第三天css學習
1.行內元素、塊級元素、行內塊元素
行內塊元素:inline-block; 可設定寬高和對齊方式。一行可以放好幾個元素。
行內塊元素常見的有 <input /> <img /> <td></td> 後面可以跟其他元素。
行內元素 : 常見有<span></span>, <a></a>,<strong></strong>,<em></em>,<ins></ins>,
其不能更改寬和高,設定後無效,不能對其設定文字對齊,長用於控制頁面中文字的樣式。水平方向上padding,margin 可設定
寬高由內容決定。行內元素裡面只能放行內元素。
塊級元素: 單個元素獨佔一行,如 div ,h1-h6,p,ul,li 等。可以設定寬高對齊屬性。
2.模式轉換
display: block; 轉換為塊級元素
display:inline-block 轉換為行內塊元素
display:inline 轉換為行內元素
可以為這些元素都設定background;
3.標籤內的巢狀注意點
存放文字內的塊級標籤h1~h6,p, 不能讓其他的塊級標籤如 div巢狀進去。
行內元素裡面只能存放行內元素和文字。但<a></a>標籤例外。
<a></a>標籤裡面可以巢狀塊級標籤div等
行級標籤中可以巢狀 行級元素和行級塊元素。
4. 易混淆的選擇器
p.box{
} 表示的是class名為“box”的p標籤元素樣式。
p, .box{
} 表示p標籤和 所有類名為(class名)“box” 的元素樣式。
p .box {
} 表示p標籤下所有後代中類名為box 的元素樣式。
#box>p {
}表示id 為box 下直接後代p標籤元素樣式。
5.css樣式優先順序
#id 選擇器權重0,1,0,0> .class 類選擇器權重 0,0,1,0> 標籤選擇器0,0,0,1 > 繼承選擇器0,0,0,0 (不安進位制算,按高低位比大小。比如:0,0,1,0 >0,0,0,10)
繼承選擇器
<head>
<style>
.father{
color:green;
}
p{
color:yellow;
}
</style>
</head>
<body>
<div class="father" >
<p>MM最棒!</p>
</div>
</body>
最後結果: 文字為黃色
子代總是優先選擇自己的樣式。
6.背景 background 設定
background-repeat: no repeat;/repeat-x;repeat-y;不平鋪;延x方向平鋪;延y方向平鋪;
background-position: 3px,center; /* left,right,top,bottom 可設定其值 前面表示x方向,後表示y方向 */ 預設為左上方影象填充
background: rgba(r,g,b,a) a在0~1 之間,r,g,b在0~255之間。
background-color:
background-image: url(i.jpg);
簡寫: background:
在div 等標籤中設定background 屬性時,不影響其他如文字的排版等。
7.盒子
每個標籤都可以看成一個盒子。與盒子有關的屬性有
border/border-width :邊框大小。
border-color border-style:邊框樣式,實線(solid),虛線(dashed),點線(dotted)。
在一個盒子中,可設定padding 來保證文字內容等於盒子保持一定距離。如:在連結中的文字,a 轉化為行內塊元素,設定行高(line-height),可讓文字與盒子邊框產生一定距離。
li標籤 預設前面標籤會有小黑點,list-style: none 取消小點
text-indent:2em 首行縮排兩個字元。
但在l兩個盒子中,如兩個div 巢狀,此時若設定padding 的值,會讓div盒子變大,可能把頁面上的其他元素擠出去。
padding-left;padding-right;padding-top;padding-bottom;
同時設定border 邊框的大小值 也會影響盒子的大小。+border-left +border-right;
8.當一張大圖作為背景時,影象中心內容不在螢幕中心顯示,可以調節 background-position: top center;
9.盒子必須指定寬度,才能 外邊距 對其設定垂直居中對齊。margin:0 auto;
10.外邊距該注意的地方:
問題的前提:父盒子無邊框,兩盒子巢狀。
兩個盒子巢狀使用時,若父盒子無邊框,想讓兩盒子間有一定間距。在父盒子中設定border或padding 值,產生的副作用是會“撐大盒子”;若在子盒子中設定 margin,則父盒子會產生“塌陷”,整體margin 移動;最直接的方法是在父盒子中設定 overflow:hidden;
合併問題: 兩個相鄰盒子 eg:一個設定 margin-bottom:100px; 一個設定margin-top:50px;則以最大的那個為準;即外間距維持在100px;
浮動:讓多個塊級元素一行顯示。浮動是“脫標的”;不會超過內邊距和邊框的範圍;標準流的盒子單獨佔一行。
浮動的對齊方式:如果子盒子有一個浮動,其餘的子盒子都應該浮動。下面的盒子會“頂上去”。
浮動元素有預設的行內塊顯示轉換。
一個盒子的內容 預設靠左上角起始。