1.盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
应用:
margin 0 auto
可以实现水平居中效果注意该元素要未脱离文档流- 溢出:若子元素的大小超过父元素的大小则会溢出
- 在进行竖直布局中可以在父元素中设置
overflow
来解决溢出效果- overflow的特殊值:
(1)visible:(默认值)让子元素溢出,不做处理
(2)hidde :将溢出的部分进行裁剪,不显示
(3)scroll :生成两个滚动条
(4)auto :根据需要生成滚动条
- overflow的特殊值:
display
(用来设置元素的显示类型)可选择值:
(1)inline
::将元素设置为行内元素
(2)block
:将元素设置为块元素
(3)inline-block
:将元素设置为行内块元素(既能设置高度也能设置宽度)但不推荐使用
(4)table
:将元素设置为一个表格
(5)none
:使元素不在页面中显示- 行内元素不支持设置宽度和高度
visibility
(用来设置元素的显示状态)可选值:
(1)visible
:默认值,是元素在页面中正常显示
(2)hidden
:元素在页面中隐藏不显示 ,但是依然占据页面的位置
float的用法和注意事项
- 可选值:
(1)none
:元素不浮动
(2)left
:元素向右浮动
(3)right
:元素向左浮动 - 注意事项及特点:
(1)使用float后该元素脱离文档流,不在占用文档流的位置。而所以元素下面的还在文档流的元素 向上移动
(2)设置浮动后元素回向父元素左移或右移
(3)对于设置浮动的元素,它并不会遮盖住文字。文字会自动环绕其周围。因此,可以利用这个特点设置文字环绕图片的效果
(4)脱离文档流后,则元素将不再区分块元素和行内元素
、