CSS盒模型的概念及组成 content padding border margin

2024年04月10日 前端 css 共享博客

嗯...ps随便大概画了一个参考图,色彩有点...见谅

CSS盒模型的概念及组成

css盒模型概念——css盒模型是css的基石,每个html元素都可以看作是一个盒模型。

css盒模型的组成——内容(content)、补白或填充(padding)、边框(border)、外边距(margin)


1.内容(content)

语法:

width: 数值+单位;
height: 数值+单位;

eg:

.box{
    width: 300px;
    height: 300px;
}


2.补白或填充( content 和 border 之间的距离)

①设置一个值

padding: 20px; (上下左右均为20px)

②设置两个值

padding: 15px 25px; (上下为15px、左右为25px)

③设置三个值

padding: 10px 5px 20px; (上下为10px、左右为5px、下为20px)

④设置四个值(顺时针方向)

padding: 20px 10px 5px 0px; (上为20px、右为10px、下为5px、左为0px)

⑤还可以单独设置某一个方向的padding值

padding-left: 20px; (left 还可以设置为 top、bottom、right)

注:

①当给元素设置了padding值后,要在原来的宽高上减去设置的padding值,保证总宽高不变;

②当需要调整子元素在父元素中的位置关系时,给父元素设置padding属性;

③padding不允许设置负值;

④背景可以延伸到padding区域。


3.边框(设置 padding和margin 之间的部分)

语法:

①边框类型

border-style: solid(实线) | dashed (虚线) | dotted (点线) | double (双线);

②边框颜色

border-color: 颜色值;

③边框宽度

border-width: 数值+单位;

④border简写方式

border: 宽度 线型 颜色;

eg:

border: 5px solid black;

⑤还可以单独设置某一方向的边框

border-top: 2px solid black;
/*注: top可更改为 bottom、right、left*/

注:

①背景可以延伸到border区域,当边框为实线时会遮挡住背景色

③当元素设置了border时,要在原来宽高的基础上减去设置的border值,保证总宽高不变


4.外边距

语法:

margin: 数值+单位;

注:margin属性值的设置方法同padding

①背景不能延伸到margin区域

②margin可以设置负值

③当需要调整元素之间的位置关系或子元素在父元素中的位置关系时,给本元素添加margin属性


注:

标准盒模型的总宽高 = width + 左右padding + 左右border + 左右margin

标准盒模型的总高度 = height + 上下padding + 上下border + 上下margin


标准盒模型 = content + padding + border + margin

怪异盒模型 = content + margin

注: 当网页没有添加文档声明时,就会触发某些浏览器的怪异模式


本文链接:http://so.lmcjl.com/news/1674/

展开阅读全文
相关内容