元素和尺寸

目录

元素性质

外边距重叠

---

 

元素性质

块级元素

1. 自占一行（默认父级元素的100%宽度），可以设置宽和高，可以包裹块级或行内元素；

内联元素

1. 不自占一行，只能包裹内容和文字，设置宽度和高度无效，不能包裹块级元素
2. 特例：img标签。可替换元素，有图片大小，可设置宽度和高度；

显示属性

1. block：块级显示
2. inline：行内显示
3. inline-block：行内块显示

提前补充样式

font-size，字体大小，text-decoration，修饰线。text-align，文本居中，

边框

border实现自定义图形，边框线会让元素本来的面积增大

内变距

1. 内容距离边框的边距（padding）；
2. 内边距的增大会导致整个元素的作用；
3. 行内元素的上下内边距是无法渲染出来的；
4. img，button，input，这些元素生效。

外边距

原指 ：兄弟元素之间的距离

简写：

3值，margin：上  左右  下；

特殊值auto

1. 其中指的值margin：auto，可以自动计算取中间值，让元素产生居中效果
2. auto只针对块 级元素中的块级元素水平居中，对文字和行内元素不生效；
3. 外边距可以是负值。

外边距重叠

1. 在正常文档流中，上下排列的兄弟元素，外边距发生重叠取最大值；
2. 正常文档流中，父元素的第一个块级子元素，父元素的最后一个块级子元素都会产生外边距重叠现象。

解决父子外边距合并（重点）：

1. 第一种：给父元素加边框；
2. 第二种：给父级元素设置内边距；
3. 第三种：给父元素设置overflow：hidden，溢出处理。

盒模型

标准盒模型 ：width+margin（左右）+padding（左右）+border（左右）；

 IE盒模型：width+margin（左右），宽度已经包含了宽度和border值。

溢出

当子元素的内容超出父元素的范围称之为溢出 

1. overflow: visible; 默认子元素溢出；
2. overflow: hidden;溢出隐藏（常用）；
3. overflow: auto;溢出出现滚动条（常用）；
4. overflow：scroll；x轴y轴都出现滚动条。

BFC与IFC

BFC：块级格式化上下文。

1. 独立渲染区域；
2. 可以消除父子外边距合并情况；
3. 子元素清除浮动。

IFC：行内格式化上下文；