CSS技术中的盒子模型是什么

这篇文章主要为大家展示了“CSS技术中的盒子模型是什么”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS技术中的盒子模型是什么”这篇文章吧。

盒子模型：

布局一般顺序：

1、关注内容，放内容；

2、控制内容与边框距离，Padding，内边距；

Padding（内边距，内容距离标签边框的距离，该元素的宽度=内容宽度+padding）:10px; 代表上、右、下、左（顺时针）内容与边框的距离都是10PX；还可以控制内边距的上下、左右距离：50px 100px;可以这样书写完全控制 padding:10px 20px 30px 40px;

3、border：外边框。可以单独写border-bottom:1px solid black; 也可以简写border:1px solid black;

4、Margin：外边距。边框距离容器的距离。Margin:10px; 类似于padding上、右、下、左，外间距,但是只有顶部、左侧有效。Margin:10px20px 30px 40px;

margin-left:100px; margin-top:100px;

5、针对于表格：cellpadding为单元格内容距离单元格边框的边距；cellspacing单元格与单元格之间的边距。

边框圆角： border-radius:50px;

<img class="lazy" data-src="anniu.jpg" width="200px" height="100px" style="cursor:pointer; border-radius:10px;" onclick="alert('haha');" />

对齐(align)：

1、容器对齐：

该标签相对于容器对齐，该标签加上align属性（块元素无效）；

2、内容对齐（左、右、居中、两端）

该标签的内容样式 style=”text-align:center;”

以上是“CSS技术中的盒子模型是什么”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！