前端工程师必须要知道的盒模型外边距塌陷

中科医院曝光资质 https://m.39.net/pf/a_4895883.html
一、盒模型概念广义盒模型:文档中所有功能性及内容性标签,及文档中所有显示性签。狭义盒模型:文档中以块级形式存在的标签(块级标签拥有盒模%特性且最常用)盒模型组成:margin+border+padding+content二、分类标准盒模型:width/height=content(即width和height只等于内容的宽高)IE盒模型:width/height=content+padding+border(即width和height包括了content+padding+border)二、成员介绍1.1边框borderborder-left

right

top

bottomborder-width:border-left-width、border-right-width、border-top-width、border-bottom-widthborder-color:border-left-color、border-right-color、border-top-color、border-bottom-colorborder-style:border-left-style、border-right-style、border-top-style、border-bottom-style边框属性的连写特点:没有顺序要求,线型为必写项。四个边框值相同的写法特点:没有顺序要求,线型为必写项。边框合并border-collapse:collapse;1.2内边距Padding-left

right

top

bottom属性设置:10px对应方位:上

右属性设置:10px10px对应方位:上下

左右属性设置:10px10px10px对应方位:上

左右

下属性设置:10px10px10px10px对应方位:上

左1.3外边距margin-left

right

top

bottom属性值的设置同padding外边距塌陷:两个相邻的元素框垂直相遇时,外边距会合并,合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值需要注意的是:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。三、box-sizing属性box-sizing属性允许以特定的方式定义匹配某个区域的特定元素。例如,假如需要并排放置两个带边框的框,可通过将box-sizing设置为border-box。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。content-box:默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的宽度(width属性)只包含内容border-box:设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容,即总宽度=margin+widthinherit:从父元素继承box-sizing属性的值有什么建议或者疑问可以评论留言,如果小编的文章您觉得有用就给个


转载请注明:http://www.aierlanlan.com/rzfs/7489.html