1.盒模型的概念
标准盒模型:宽度 = 内容的宽度(content) + border + padding + margin
低版本IE盒子模型: 宽度 = 肉容宽度(content + border + padding) + margin【等同于设置box-sizing: border-box;】
2.inline、block和inline-block的概念
inline:内联元素,跟随文档的文本流堆放(从左至右,从上至下),元素的宽度,高度,顶部及底部边距不可设置。常见的内联元素有:<a><span>
block:块元素,每个元素独占一行,元素的高度、宽度、行高以及边距都可设置。常见的块元素有:<div><p><hn>
inline-block:行内块元素,介于inline与block之间,跟随文档的文本流堆放,可设置元素的宽度和高度。常见的行内块元素有:<img><input>
3.内外边距,宽度,高度,box-sizing等属性
内边距 (padding): 指定一个元素的内容与其边界之间的空间,不能为负值。
设置方式为:padding:上 右 下 左;简写形式: padding : 上 左右 下【padding:10px 20px 10px】;或 padding: 上下 左右;【padding: 10px 20px】 或 padding:上下左右【padding:10px】;
外边距(margin): 给元素设置外边距属性(元素与元素的边界的距离), 有负外边距,有外边距塌陷的情况。
设置方式同padding
width: 当box-sizing为默认值时,设置内容框的宽度
height: 当box-sizing为默认值时,设置内容框的高度
box-sizing: 设置元素的盒模型的方式,默认为标准盒模型,设置box-sizing:border-box时,为IE盒模型。
4.关于BFC
BFC(Block Formatting Context)块级格式化上下文。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC布局规则:
* 内部的Box会在垂直方向,一个接一个地放置。
* Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
* 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
* BFC的区域不会与float box重叠。
* BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
* 计算BFC的高度时,浮动元素也参与计算
触发 BFC
* body 根元素
* 浮动元素:float 除 none 以外的值
* 绝对定位元素:position (absolute、fixed)
* display 为 inline-block、table-cells、flex
* overflow 除了 visible 以外的值 (hidden、auto、scroll)
BFC在布局中的应用
* 防止margin重叠
* 父元素包含浮动元素(清除浮动)
* 阻止被浮动元素覆盖(多栏布局)