css盒模型簡介
- 一个新手原創
- 2017-09-11 10:32:041833瀏覽
盒子模型
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中文網其他相關文章！