首页前端开发CSSCSS技术中的盒子模型详解

CSS技术中的盒子模型详解

时间2024-05-24 11:44:03发布访客分类CSS浏览100
导读:盒子模型: 布局一般顺序: 1、关注内容,放内容; 2、控制内容与边框距离,Padding,内边距; Padding(内边距,内容距离标签边框的距离,该元素的宽度=内容宽度+padding):10px; 代表上、右、下、左(顺时针)内容与边...

盒子模型:

布局一般顺序:

1、关注内容,放内容;

2、控制内容与边框距离,Padding,内边距;

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

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

4Margin:外边距。边框距离容器的距离。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
两种让WordPress支持中文用户名注册账户的方法整理 如何在CentOS中安装OpenSSH服务器

游客 回复需填写必要信息