4、css盒子模型
2021/10/2 6:43:21
本文主要是介绍4、css盒子模型,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
4.1、什么是盒子模型
所有的HTML元素,我们都可以看成一个四边形,即一个盒子。
用css来设置元素盒子的内边距、边框 和 外边距 的样式的方式,
相当于设置盒子的样式,所以我们将其称之为 盒子模型
边框有四个属性可以设置:
border-top:上边框
border-right:右边框
border-bottom:下边框
border-left:左边框
示例:
<span style=“border-top” solid red; >内容体<span/>
也可以在元素选择器中设置border-top 结果一样
效果:
通用性设置:
一次性设置上下左右边框样式 为1像素的 实体 红色线
border:1px solid red;
4.2、边框(border回顾及再阐述)
边框:HTML元素盒子的框体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ border-top:1px solid red ; } div{ border-bottom:1px solid blue ; } </style> </head> <body> <span >上边框</span> <div>下边框</div> </body> </html>
4.3、内边距(padding)
内边距;HTML元素里的内容体 到 HTML元素边框 的距离
内边框有四个属性可以设置:
padding-top:上边框
padding-right:右边框
padding-bottom:下边框
padding-left:左边框
格式:padding-bottom:10px;
表示该文本距离外边框下边的距离是10px
通用性设置:
padding:10px;
表示上下左右距离外边框的距离都是10px
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*没有外边框时,也可是设置内边框*/ border: 1px solid red; padding-top: 50px ; } </style> </head> <body> <div>内边框的设置</div> </body> </html>
4.4、外边距margin
外边距:HTML元素边框到 其他 HTML元素边框的距离
外边距有四个属性设置:
margin-top:上边距
margin-right:右边距
margin-bottom:下边距
margin-left:左边距
通用性设置:margin:10px;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #d1{ border: 10px solid red; padding: 10px ; /*margin: 10px;也可以通用性设计,上下左右外边距*/ margin-right: 10px; margin-bottom:20px; </style> </head> <body> <span id="s1">外边距演示</span> <span id="s2">span标签的特点是用于展示少量的信息,有多少内容就会占用多少空间</span> <div id="d1">div标签的特点是,容量大,内容会自动占满一行</div> <div id="d2"> 外边距演示一次</div> </body> </html>
这篇关于4、css盒子模型的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享