首頁  >  文章  >  web前端  >  css盒模型簡介

css盒模型簡介

一个新手
一个新手原創
2017-09-11 10:32:041818瀏覽


盒子模型

1 盒子中的區域

#f35d6e602fd7d0f0edfa6f7d103c1b57盒子的主要屬性:
width 宽度,css中width指的是内容的宽度,而不是盒子的宽度。 
height高度 ,css中Height指的是内容的高度,而不是盒子的高度。 
padding 内边距 
border 边框 
margin 外边距
03b0e52a809871cc1c756269f1a22959如果想保持一個盒子的真實佔有寬度不變,那麼加width就要減padding ,加padding就要減width.

2.認識padding

f35d6e602fd7d0f0edfa6f7d103c1b57padding的區域有背景顏色,在css2.1中背景顏色一定和內容區域的相同。
2cc198a1d5eb0d3eb508d858c9f5cbdbpadding是4個方向的,所以我們能夠分別描述4個方向的padding.

第一種:小屬性,也就是複合屬性。

padding-top:30px;  上padding-right:20px; 右padding-bottom:40px; 下padding-left:100px; 左

第二種:綜合屬性。
空格隔開,上右下左。

padding:30px 20px 40px 100px;
5bdf4c78156c7953567bb5a0aef2fc53可以用小屬性層疊大屬性(不能把小屬性寫在大屬性前面):
padding:20px;padding-left:30px;

題目一:

p{   
width:200px;    
height:200px;    
padding-left:10px;    
padding-right:20px;    
padding:40px 50px 60px;    
padding-bottom:30px;    
border:1px  solid #000;
}

答案:padding -left:10px;和padding-right:20px;沒用,因為後面的padding大屬性,層疊掉了他們。

23889872c2e8594e0f446a471a78ec4c有些標籤預設有padding.例如ul.所以說,我們做站的時候,會清除這個預設的padding.

3.border 邊框

f35d6e602fd7d0f0edfa6f7d103c1b57邊框三要素:粗細、線型、顏色。
2cc198a1d5eb0d3eb508d858c9f5cbdb所有的線型:
none    定义无边框。 
hidden  与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 
dotted  定义点状边框。在大多数浏览器中呈现为实线。 
dashed  定义虚线。在大多数浏览器中呈现为实线。 
solid   定义实线。 
double  定义双线。双线的宽度等于 border-width 的值。 
groove  定义 3D 凹槽边框。其效果取决于 border-color 的值。 
ridge   定义 3D 垄状边框。其效果取决于 border-color 的值。 
inset   定义 3D inset 边框。其效果取决于 border-color 的值。 
outset  定义 3D outset 边框。其效果取决于 border-color 的值。 
inherit 规定应该从父元素继承边框样式。 
常用的有:solid 、dashed、 dotted
5bdf4c78156c7953567bb5a0aef2fc53border屬性能夠被拆開,有兩大種拆開的方式:

#第一種:依要素

border-width:10px;  
边框宽度border-style:solid;    
线型border-color:red;      
颜色等价于:border:10px solid red;

如果某一個小要素後面是空格隔開的多個值,那麼就是上右下左的順序:

border-width:10px 20px;border-style:solid dashed dotted;border-color:red  green blue yellow;

第二種:按方向
第一種拆法:

border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;等价于:border:10px solid red

第二種拆法:就是把每個方向的,每個要素拆開:

border-top-width:10px;border-top-style:solid;border-top-color:red;border-right-width:10px;border-right-style:solid;border-right-color:red;border-bottom-width:10px;border-bottom-style:solid;border-bottom-color:red;border-left-width:10px;border-left-style:solid;border-left-color:red;等价于:border:10px solid red;
23889872c2e8594e0f446a471a78ec4c可以用邊框做三角形。
<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style type="text/css">
        p{            
        width: 0px;            
        height: 0px;            
        border: 30px solid white;            
        border-top-color: pink;            
        transition:all 1s ease 0s;        
        }
        p:hover{            
            transform: rotate(180deg);        
            }
    </style>
    </head>
    <body>
    <p>
    </p>
    </body>
    </html>

4.標準文件流程

4.1區塊級元素和行內元素

f35d6e602fd7d0f0edfa6f7d103c1b57從宏觀上講,web頁面和Ps等設計軟體有本質的趨避:
web頁面的製作,從上往下。而設計軟體,想往哪裡畫東西,都可以畫。
2cc198a1d5eb0d3eb508d858c9f5cbdb標準流的微觀性質:
(1)空白折疊現象。
(2)高矮不齊,底邊對齊。
(3)自動換行,一行寫不完,換行寫。
5bdf4c78156c7953567bb5a0aef2fc53區塊級元素和行內元素
(1)標籤分為兩種等級:區塊級元素和行內元素。
(2)區塊級元素:

霸占一行,不能与其他任何元素并列。
能接受宽高。
如果不设置宽度,那么宽度将默认变为父亲的100%。

(3)行內元素:

可以与其他行内元素并排。
不能设置宽高。默认的宽度,就是文字的宽度。

(4)標籤分為:文字層級、容器級。

文本级:p、span、a、b、i、u、em
容器级:p 、h系列 、li 、dt 、dd

基本上所有的文字層級標籤,都是行內元素。除了p,是塊級元素。
所有的容器級標籤,都是區塊級元素。

4.2區塊級元素與行內元素的相互轉換

f35d6e602fd7d0f0edfa6f7d103c1b57區塊級元素可以設定為行內元素。行內元素可以設定為區塊級元素。
2cc198a1d5eb0d3eb508d858c9f5cbdbdisplay用來改變元素的行內、區塊級性質。

display:inline; 这个标签将会变为行内元素。
display:block; 这个标签将会变为块级元素。

5bdf4c78156c7953567bb5a0aef2fc53css中一共有三種手段,使一個元素脫離標準文檔流。
(1)浮動
(2)絕對定位
(3)固定定位

5.浮動:是CSS裡面佈局用的最多的屬性。

5.1浮動的元素脫標
5.2浮動的元素互相貼靠

f35d6e602fd7d0f0edfa6f7d103c1b57如果有足夠的空間,會靠著二哥。如果沒有足夠的空間,會靠著一哥。如果沒有足夠的空間靠著一哥,自己去貼左牆。
2cc198a1d5eb0d3eb508d858c9f5cbdbfloat:left/right;

5.3浮動的元素有「字圍」效果

以上是css盒模型簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn