?

一位初學(xué)php的隨堂筆記，記錄自己的成長(zhǎng)！

1.清除浮動(dòng)
(1)格式
clear:both清除兩邊|left清除左邊
right清除右邊

高度塌陷:父元素中的子元素都浮動(dòng)，而父元素
沒(méi)有設(shè)置高，那父元素的高為0
（2）萬(wàn)能清除(在父元素中加清除)
.clear{
clear:both;
zoom:1;
}
.clear:after{
display:block;
content:'.';
height:0;
clear:both;
visibility:hidden;
}

2.布局顯示
(1)display:none 隱藏|
block 塊|
inline 行|
inline-block內(nèi)聯(lián)塊
說(shuō)明:
a. inline-block內(nèi)聯(lián)塊是塊元素，
但有行元素不折行的特性
b.display:none 隱藏，不占位隱藏
(2)visibility:visible默認(rèn)值|
hidden隱藏
說(shuō)明：visibility:hidden,占位隱藏


3.背景(Background)
（1）背景顏色 background-color:value;
（2）背景圖片 background-image：url(圖像URL)；
（3）背景重復(fù) background-repeat:repeat默認(rèn)值|
repeat-x 水平方向重復(fù)|
repeat-y 垂直方向重復(fù)|
no-repeat 不重復(fù)
（4）背景位置 background-position：
value水平方向坐標(biāo) value 垂直方向坐標(biāo);
說(shuō)明:
a.水平方向 left center right
垂直方向 top center bottom
b.如果background-position只有一個(gè)值
這個(gè)值代表水平方向，而垂直方向默認(rèn)垂直
居中
例如 :background-position：right;//center
c.background-position:數(shù)值 數(shù)值;
單位px
正值背景圖片往右走，負(fù)值背景圖片往左走
(大盒子小背景圖片一般正值；
小盒子大背景圖片一般負(fù)值)
（5）背景固定 background-attachment:
scroll滾動(dòng)默認(rèn)值|fixed有滾動(dòng)條背景固定
縮寫(xiě):
background:color image repeat
attachment position;

4.CSS精靈 (css sprites)
原理:將多個(gè)小的背景圖片整合到一個(gè)大圖中，
為了減輕服務(wù)器負(fù)擔(dān)
說(shuō)明:CSS精靈背景圖片位置都是負(fù)值，最大值 0

5.列表(List)
（1）list-style-type:disc默認(rèn)值實(shí)心圓|
circle空心圓|
square方塊|
decimal阿拉伯?dāng)?shù)字|
lower-roman小寫(xiě)羅馬數(shù)字
upper-roman大寫(xiě)羅馬數(shù)字
lower-alpha小寫(xiě)英文字母
upper-alpha大寫(xiě)英文字母
none

（2）list-style-image:url(圖像URL)；
（3）list-style-position:inside|outside 默認(rèn)值;
縮寫(xiě)形式:
list-style:type image position;
例如:
list-style:none;

新聞列表常用寫(xiě)法

.list3{
list-style:none;
}
.list3 li{
background:url(dot.png) no-repeat left center;
padding-left:16px;
}

轉(zhuǎn)載于:https://www.cnblogs.com/guowangdeyanjiang/p/5450633.html

總結(jié)

以上是生活随笔為你收集整理的第一阶段 XHTML.定位样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。