div布局
1、如果單單就是乙個div和span 那麼他們的顯示沒有什麼實際上的區別
他們主要的區別就是 div換行顯示 而span不換行顯示。。 div被認為是乙個而span是行內元素 不會產生換行。
div的預設寬度是充滿整個瀏覽器的並且會隨著瀏覽器的變化而變化,div的寬度和高度設定的時候一定要帶上單位如px
2、盒子模型是排版的乙個重要模型 ,css所有元素都可以看成乙個盒子來操作
css的盒子模型包括 margin border padding content 四個重要概念
在div中 只能設定內部文字居中並不能設定 div中的div居中我們設定居中要通過padding來設定 、
比如 比如內部的div即使我們設定了內部div的寬度 但是如果我們設定了外部div的padding屬性那麼瀏覽器不顯示我們設定的寬度
行內元素就是不可以換行的元素 ,span我們平時設定他的樣式的時候也只是設定他的背景 字型等等,如果我們設定寬度和高度就不可以
如果我們想設定他的寬度和高度 那麼就加上 display:inline-block; 這個把span設定成行內快顯示,不會換行,
如果我們設定成displau:block;就會換行,因為此時span的顯示相當於div,div可以巢狀span但是反過來就不可以 。
我們設定span的margin值為負數可以使兩個span重合,我麼如果想要看到重合的效果就不能使用xhtml的dtd約束。
padding:10px;預設情況下是設定div塊的上下邊界 .
3、 div可以巢狀div ,也叫子div 。
margin 和padding的值原則 1值: 上 右 下 左 三值: 上 左右 下 二值: 上下 左右 .
padding是指這個元素內部的內容和他的邊界的距離,margin則是指這個元素邊框和外部元素的距離 ,兩個元素的margin和相加才是間距。 例如margin-left+margin-right
div高度 寬度設定原則是 :如果我們設定的高度或者寬度大於 內部所有盒子的總高度或者寬度 那麼設定有效 , 否則設定無效 。
css中每乙個元素都可以認為是乙個盒子 、
4、 以上是盒子模型 下面是元素的定位:
float定位是css定位中使用頻率最高的方法 。
float的效果一旦被設定,那麼div塊原先的占行效果就沒有了, 就好像浮動在瀏覽器上面一樣,n個浮動的div將 顯示在一行 我們完全可以靈活的設定 margin 和padding
來控制div的位置 。比如乙個div我們設定了浮動效果left ,如果他的後面還有乙個div那麼後面那個div 將會到前面那個div的行上,而前面設定了float的div將會漂浮在
後面的div上面 ,這就是div的float浮動效果。
乙個div被設定了浮動效果 那麼就會導致其後面的div向前移動,
知道了這個原理 我們考慮下 div選單如何設定呢?
在設定內部巢狀div的margin為負數的時候,內部的div也可能出現超出外部塊的情況 。
son1
上述**我們將son1 和son2的樣式設定為float:left;的時候發現,無論我們怎麼設定son的margin都不好用,而且son1 和son2這兩個子塊固定在 father的下邊,
為了解決這個問題我們需要設定father的padding 設定到直到 son1和son2不超出father的時候,但是設定father的padding的時候我們發現實際上是設定了father的 。
左上邊距離son1 和son2的距離 。
上面的兩種方法都不好,最好的解決方案是 在所有的子div 的後再加上乙個 不浮動的div 即沒設定float屬性的div ,這個時候我們發現 設定了float的div漂浮到了
下面這個div之上了 而且可以設定margin了,並且也沒有超出 father ,並且father也會改變大小。
5、clear 作用如果指定範圍有浮動物件 那麼會換到沒有浮動物件的那行顯示 ,清除float對元素的影響,往往導致了大量的換行顯示
none : 允許兩邊都可以有浮動物件
both : 不允許有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
清除所有float影響 clear:both ;在**混排中很有用
6、內聯樣式 inline 可以使乙個快元素 變成乙個行內元素 ,不會換行 。看下面一段用div實現選單的** 。
如果div內部是行內即不換行的元素 或者設定了 diplay:inline;那麼可以設定 text-aline:center ; 居中顯示 。
">
inline1
inline1
inline1
inline1
inline1
inline1
inline1
inline1
inline1
inline1
inline1
inline1
inline1
inline1
css學習3 css與div排版定位
1.排版常用標籤 a.塊級元素 b.行級元素，可以包含,反之不成立。2.盒子模型 乙個盒子由 content，padding，border，margin組成，盒子的實際寬度 content padding border margin。3.元素定位 a。position static，absolute...
css 不使用定位的 div層疊
想要達到的效果是 下面兩個123被藍色的遮住,使用了上下兩個div 下面的div margin top 負數 移上去蓋住了上面的div卻蓋不住字 最後使用了 下面的css 樣式 達到了效果 transform translate3d 0px,0px,0px webkit transform tran...
論CSS樣式的使用以及常用屬性
css的使用方式 1.行內樣式 內聯樣式 標籤 2.頁面嵌入 內部樣式表 在head標籤裡面增加乙個子標籤 3.外部檔案 外部樣式表 在head標籤裡面增加乙個子標籤 4.外部匯入樣式 主要用在樣式初始化。因為有一些標籤有自己的樣式，我們需要清空，方便自己計算 css 選擇器 id選擇器 使用id選...