html中盒子模型的基本知识点 盒子大小的计算

盒子模型

边框的样式有 solid dashed(虚线) dotted(点线) border-style:solid;

边框的宽度:border-style:1px;

边框颜色:border-color:red;

简写属性:线宽 线型 颜色 例如: border:1px solid red;

1.所有带有前缀的样式属性名 都有一个简写属性,前缀就是他们的简写属性名

例如 border-color 简写属性为border

background-color 简写属性为background 在编写时优先使用简写属性,进行样式设置

2.简写属性的值,就是将所有分立属性的值依次列举出来,之间用空格隔开,一般情况下没有先后顺序的限制

3.简写属性在设置样式时,如果有一些分立属性没有设置,会自动设置为默认值,所以在使用简写属性时,必须保证她写在所有分立属性之前,防止他将一些已经设置的分立属性叠加

标准盒模型尺寸的计算

盒子模型的实际宽度:width+左右padding+左右border

盒子模型的实际长度:width+上下padding+上下border

border以内的盒子区域 统称为盒子的可视区域

width height设定的区域,称为内容区域content,我们写在一对标签中的

内容只能出现在width和height设置的区域

padding margin 两个属性主要用来改变内容的位置关系 和 盒子的位置关系