前端小白的學習之路html與css的較量【二】
標籤的劃分
-
塊級元素
-
獨佔一行
-
設置 寬 高可以起作用
-
排列方式： 上下排列
-
-
行內元素
-
可以共佔一行
-
設置 寬 高 不起作用，大小由內容決定
-
排列方式：左右排列
-
-
行內塊
-
可以共佔一行
-
可以設置寬 高
-
排列方式：左右
-
標籤
-
標題：h1-h6
-
段落 p
-
圖片 img
-
超鏈接 a
-
格式化標籤
-
加粗 b strong
-
斜體 i em
-
下劃線 ins u
-
刪除線 del s
-
-
預格式化標籤 pre
-
音頻 audio
-
視頻 video
-
大盒子 div
-
小盒子 span
-
三大列表 ul li ol dl dt dd
塊級元素
h1-h6 div p
三大列表 ul li ol dl dt dd
新增 table
行內元素
加粗 b strong
斜體 i em
下劃線 ins u
刪除線 del s
span
a
行內塊
視頻 video audio
圖片 img
display的幾個值
-
display：block；轉化為塊級元素
-
display：inline；轉化為行內元素
-
display：inline-block；轉化為行內塊
-
display：none；讓元素消失
面試題讓元素消失的幾種方法？？
-
display：none；讓元素消失
-
opacity：0；透明度 數值範圍 0-1
-
visibility：hidden；可見性 ：隱藏
-
定位的元素，通過改變z-index（層級關係）
-
通過margin負值，把元素調到屏幕的一側；
讓元素消失前三者 的關係
-
display：none;元素徹底消失
-
opacity：0；元素消失位置還在
-
visibility：hidden；元素消失位置還在
font-family 字體樣式
-
設置字體： 如果是中文或者應為字體由多個單詞組成，需要加引號可以設置多種字體，有順序關係
font-family: “宋體”;
font-family: Georgia, ‘Times New Roman’, Times, serif;
font-weight 加粗
font-weight：700;
font-wightt:bold; //加粗
font0-wight:bolder; //更粗
font-weight：900;
font-weight：normal;//正常粗細 的相當於400
## 語義化
合適的標籤做合適的事：語義化
控制文字樣式font-style
font-style：normal； //正常
font-style：italic； //傾斜
塊級元素水平居中magin：0 auto;
塊級元素，快速水平居中
盒子文字垂直居中
/* 文字垂直居中，讓此元素的高度=行高 */
height: 200px;
line-height: 200px;
文字水平調節 text-align
text-align：left； //左對齊
text-align：center；//居中
text-align：right； //右對齊
邊框border
/* 第一個值：邊框粗細
第二個值：邊框樣式 solid實線 dashed虛線
第三個值：邊框顏色
*/
border: 5px solid darkcyan;
