CSS技术中的盒子模型详解
导读:盒子模型: 布局一般顺序: 1、关注内容,放内容; 2、控制内容与边框距离,Padding,内边距; Padding(内边距,内容距离标签边框的距离,该元素的宽度=内容宽度+padding):10px; 代表上、右、下、左(顺时针)内容与边...
盒子模型:
布局一般顺序:
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;
对齐(align):
1、容器对齐:
该标签相对于容器对齐,该标签加上align属性(块元素无效);
2、内容对齐(左、右、居中、两端)
该标签的内容样式 style="text-align:center; "
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: CSS技术中的盒子模型详解
本文地址: https://pptw.com/jishu/667005.html