Web学习第一天

盒模型

1.什么是盒模型？

   每个标签都是一个矩形，类似一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。

2.盒模型的组成。

（1）width宽度
（2）height高度
（3）padding（内边距）
1~4个值 例：padding:10px 20px 30px 40px;
顺时针赋值 上右下左
值的改变会改变盒模型的面积
（4）boder(边框)
包含三个符合属性：boder-width(宽度), boder-style（样式）, boder-color(颜色)
会增加盒模型的面积
boder-radius：数值（调整边框圆角）
制作三角形
(5)margin(外边距)
1~4个值 例：margin:10px 20px 30px 40px;
顺时针赋值 上右下左
叠压现象：常态下，兄弟间标签上下间距取决于最大外边距的值。
塌陷问题：常态下，父级的第一个子集标签是个块标签，并且使用了margin或margin-top.
解决方法：1.在父级使用padding-top.
2.不使用margin-top,在父级使用padding-top.
3.在父级使用在父级使用overflow：hiddden(溢出隐藏)

以上为盒模型的介绍及组成。