css盒子模型

八月五

于 2024-08-10 20:13:20 发布

阅读量537

点赞数 9

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62909831/article/details/141095466

版权

html里边的任何一个元素都可以看成是一个盒子，如div，span。若有嵌套，则是大盒子套小盒子

<body>
    <div>hello</div>
    <div>hello</div>
    <span>demo</span>
    <span>demo</span>
</body>

div,span {
    background-color: aquamarine;
}

我们可以看到：div整个一行都加上了背景，而span只有内容部分加上了样式。因为他们的本质属性不同，此现象称为盒子模型

块级元素（标签、元素）

独占一行，对宽度、高度支持，如div、p、ul、li、h1~h6

不独占一行，对宽度、高度不支持，如span、a

不独占一行，对宽高支持，如img、input。可以加inline:block属性变为块级元素

该盒子不论能否放下子元素们，子元素始终横向布局
正常情况下：存不下会竖向布局
初始状态
当我们为其加上一个属性display：flex，变为弹性盒子
变成弹性盒子后
其他标签也适用，如

width和height设置内容区的宽和高
box-sizing:content-box—>默认针对内容区
box-sizing：border-box;---->针对整个盒子，就是将border和padding数值包含在width和height之内，这样的好处就是修改border和padding数值盒子的大小不变。
padding给填充区设值。从上开始，顺时针进行旋转，如果没有则进行对称。
padding:50px 10px ---->上下50，左右10；padding: 50px 10px 100px—>上50，左右10，下100
只对某一个方向设值：padding-top/bottom/left/right
边框区：border 复合属性必须由不同方面综合进行设置 border-color、border-width、border-style（solid：实线；双实线：double;dashed：虚线；dotted：点点）
简化写法：border：_ _ _; 无顺序要求
单独对某个方向设值：border-top/bottom/left/right
单独对某一方向的属性进行设置：border-top-color… 三方面*四方向
外边距用margin。从上开始，顺时针进行旋转，如果没有则进行对称。
单独对某个方向设值：margin-top/bottom/left/right
margin:auto–>居中。会计算整个元素和浏览器的宽度，使元素水平居中。因为浏览器的高度不固定，所以不会水平居中。
去除浏览器默认的留白：

*{
	padding:0;
	margin:0;
}

关注