盒模型其實(shí)就是一個(gè)個(gè)的生活中盒子類似的東西,比方我們拿快遞的盒子,那是什么樣的呢?
快遞小哥的盒子
那我們?cè)賮砜匆幌翪SS盒模型是什么樣子的?
css盒模型
是不是非常的相似,那我們就來來學(xué)習(xí)一下css中的盒模型
盒模型概念渣淤、
width麸塞、height盐茎、padding无宿、margin(水平居中)、border赂弓、border-radius绑榴、overflow、box-sizing盈魁、box-shadow翔怎、outline
width
-
語法:width: <length> | <percentage> | auto | inherit-
length:長度,單位有px em rem...等 -
percentage:百分比 % -
autowidth默認(rèn)值
-
-
min-width- min-width屬性為給定元素設(shè)置最小寬度。它可以阻止 width屬性的應(yīng)用值小于 min-width的值杨耙。
-
max-width- max-width 屬性用來給元素設(shè)置最大寬度值. 定義了max-width的元素會(huì)在達(dá)到max-width值之后避免進(jìn)一步按照width屬性設(shè)置變大.
height
-
語法:height: <length> | <percentage> | auto | inherit-
length:長度,單位有px em rem...等 -
percentage:百分比 % -
autoheight默認(rèn)值
-
-
min-height- min-height 通常用來設(shè)置一個(gè)元素的最小高度赤套。這個(gè)屬性（min-height）不允許一個(gè)元素的高度（height）小于這個(gè)元素指定的最小高度（min-height）。
- min-height的值會(huì)覆蓋max-height 和height（譯者：這句話我的理解是珊膜，當(dāng)該元素的高度小到最小高度的時(shí)候容握，最大高度和高度值將不會(huì)有效。）
-
max-height- max-height這個(gè)屬性會(huì)阻止 height屬性的設(shè)置值變得比 max-height
更大车柠。 - max-height 屬性用來設(shè)置給定元素的最大高度. 如果height
屬性設(shè)置的高度比該屬性設(shè)置的高度還大,則height 屬性會(huì)失效. - max-height 重載（覆蓋掉） 但是min-height又會(huì)重載（覆蓋掉max-height)
- max-height這個(gè)屬性會(huì)阻止 height屬性的設(shè)置值變得比 max-height
參考:box-Model
在介紹
padding margin border等屬性之前,我們來了解幾個(gè)知識(shí),以padding為例,margin border也適合以下規(guī)則
Top Left Bottom Right
上右下左順時(shí)針
值縮寫
值縮寫
padding
語法:padding: [<length> | <percentage>]{1,4} | inherit
image.png
margin
語法:padding: [<length> | <percentage> | auto]{1,4} | inherit
image.png
-
margin合并- 毗鄰元素,外邊距會(huì)合并,取較大值
- 父元素與第一個(gè)/最后一個(gè)子元素也會(huì)合并(不是所有的情況)
- margin合并問題剔氏，詳見 MDN 外邊距合并
image.png
- 水平居中
margin:0 auto;
border
說明:
...代表不常用的
語法:border: [<border-width>||<border-style>||<border-color>] | inherit
語法:border-width:[<length>|...]{1,4} | inherit語法:border-style:[solid | dashed | dotted | ...]{1,4} | inherit語法:border-color:[<color>| transparent]{1,4} |inherit
border
border-radius
圓角
-
語法:border-radius:[<length>|<percentage>]{1,4}[/<length>|<percentage>]{1,4}]?- 語法代表一個(gè)是
水平半徑,一個(gè)是垂直半徑,可以最多有八個(gè)值,中間用/分開
- 語法代表一個(gè)是
image.png
overflow
-
overflow;visible| hidden | scroll |auto- overflow:visible默認(rèn)值
- overflow:hidden 超出隱藏
- overflow:scroll一直顯示滾動(dòng)條,不管又沒有超出
- overflow:auto 內(nèi)容少的時(shí)候沒有滾動(dòng)條,多了就有
overflow-xoverflow-y
box-sizing
box-sizing:content-box| border-box | inherit
box-sizing
- content-box 是默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px竹祷，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬谈跛，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來的元素寬度中。
- 尺寸計(jì)算公式：width = 內(nèi)容的寬度塑陵，height = 內(nèi)容的高度感憾。寬度和高度都不包含內(nèi)容的邊框（border）和內(nèi)邊距（padding）。
- border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的猿妈。也就是說吹菱，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會(huì)包含其它的border和padding巍虫，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border + padding的計(jì)算值彭则。大多數(shù)情況下這使得我們更容易的去設(shè)定一個(gè)元素的寬高。
- width = border + padding + 內(nèi)容的 width占遥，
height = border + padding + 內(nèi)容的 height俯抖。
- width = border + padding + 內(nèi)容的 width占遥，
box-shadow(陰影)
box-shadow:none| <shadow>[,<shadow>]*-
<shadow>:inset?&&<length>{2,4}&&<color>?- inset 內(nèi)陰影
- color可寫可不寫,不寫就是字體的顏色
- 陰影不占空間
值的意思
陰影用法
outline(輪廓)
-
outline:[<outline-width>||<outline-style>||<outline-color>]- 不占空間
- borde外
image.png
關(guān)于CSS屬性的瀏覽器兼容性，可以通過 caniuse 查詢瓦胎。
border-radius ie8及以下不支持
box-sizing ie7及以下不支持
box-shadow ie8及以下不支持
outline ie7及以下不支持
