HTML5中CSS的布局
本章摘要 : 自從2014年完成制定對HTML的标準後,在預設情況下,所有的網頁标簽都是在"标準流"布局中.
1, 标準流中的預設樣式
從左到右
從上到下
2, 在各個網站上可以看到有種标簽,不管你怎麼拖動滑動條,它都是在原來的位置不變,這種标簽就是脫離了"标準流"的标簽,有兩種方式設定"脫離标準流"的方法 :
float屬性
position屬性 需要和top left right bottom等屬性聯用
一, CSS布局 - float屬性
float屬性常用的兩個取值是
left : 脫離标準流,浮動在父标簽的最左邊
right : 脫離标準流,浮動在父标簽的最右邊
注意點: 當繼續添加資料時,會緊貼着脫離的标簽,具體如下例子
float相關知識點
CSS布局
.one{
color: darkkhaki;
background-color: mediumpurple;
font-weight: bolder;
font-size: 15px;
width: 120px;
float: left;
}
.two{
background-color: green;
color: red;
width: 200px;
}
ul li{
background-color: red;
color: green;
float: left;
margin: 7px;
}
my name is Alex I am 20 years old
- Alex
- Alex
- Alex
- Alex
- Alex
CSS布局 - position屬性
1, position屬性和float屬性功能是一樣的,都是将指定标簽脫離"标準流"但是它們的用法完全不相同,下面我們來了解一下position的用法,在使用position之前,我們來了解幾個position屬性的幾個常用值 :
1,absolute :它生成的是絕對定位元素,相對于static定位以外的第一個父标簽進行定位.元素的位置是通過 : left, right, top, 以及bottom等屬性值進行規定的.
2,fixed :生成絕對定位元素,該值是相對于浏覽器的視窗進行定位,元素的位置是通過 : left, right, top, 以及bottom等屬性值進行規定的.
3,relative :生成的是相對定位元素,相對于其正常位置進行定位,比如:"left :50px" 表示的意思是:會像left位置增加50個像素.
4,static 預設值,沒有定位,元素會出現在正常的"标準流"中(會忽略掉top, bottom, left, right 或者 z-index聲明)
** inherit** 規定元素應該從父元素那裡繼承position屬性的值
position的簡單使用
CSS布局 - position屬性
.William{
background-color: mediumslateblue;
color: red;
font-size: 15px;
width: 200px;
height: 200px;
position: relative;
margin: 50px;
}
.Alex{
background-color: green;
width: 100px;
height: 100px;
position: absolute;
bottom: 0px;
right: 0px;
}
不要擔心,萬事開頭難,努力學習新知識
總結 : 屬性值的定義和運用有點繞,多練習就可以了.