这篇文章主要为大家展示了“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 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技术中的盒子模型是什么”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!