2019-05-29

盒子模型也叫框模型:

盒子的大小由 内容区和内边距和边框来决定的。

盒子的大小=内容区+内边距+边框的宽度

内容区,内边距,边框,外边距。

border:设置边框的宽度,是实心线。

dotted:是点状虚线。

dashed:是虚线。

double:是双线。

border-color:设置边框的颜色。

border-width:设置边框的宽度。

none:表示没有边框。

内边距:padding

padding-top; padding-left; padding-right; padding-bttom.

外边距:margin

margin-top; margin-left; margin-right; margin-bttom.

auto:是放到最大的边距。

设置外边距要注意  会重叠。

子元素和父元素重叠,子元素的外边距会传递给父元素。

给子元素一个外边距,父元素也会执行这个外边距。

解决方案:设一个边框和设置一个内边距和overflow(溢出):hidden会解决这些问题。

兄弟之间的外边距重叠,会取他俩外边距的最大值。

浏览器的默认样式:

清除浏览器的默认样式

*{

margin:0;

padding:0;

}

内联元素的盒模型:

内联元素不能设置宽和高,设置了也不好使。

左右水平方向的可以设置宽和高,都好使。

垂直方向可以设置宽和高,但是不好使,会覆盖别的盒子。垂直的会影响布局。

内联元素不能设置宽高,设了也不好使,只能设置左右水平方向和边框。

你可能感兴趣的:(2019-05-29)