admin 发表于 2022-2-15 02:22:32

div盒子模型

我们说div就是一个块,它就是一个盒子。其实我们做网页的过程就是摆放盒子的过程
盒子模型特性:
4个组成部分:宽高、内间距、边框、外间距

1.内边距padding
示意图


注意:
[*]添加了padding属性的元素,会加大盒子的宽或高,需要减去padding的大小
[*]如果这个块级盒子没有width属性(从父级继承宽度)的时候,添加padding和border不会撑大盒子(盒子内容部分会自动压缩)
2.外边距margin
示意图


多学一招:margin:0 auto;可以让盒子在其父元素中居中
margin:0 auto;和text-align:center;的区别
margin:0 auto;text-align:center;
针对的对象盒子---块元素(标签本身)标签内部的行元素
居中的范围在父盒子中居中自己内部

3.边框属性边框有3要素:边框类型、边框颜色、边框厚度a) 边框类型语法:border-style:值取值:        (1)solid实线        (2)dashed虚线        (3)dotted点线        (4)double双线
页: [1]
查看完整版本: div盒子模型