CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。
如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆 放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。
盒子模型在网页中的直观表现:
(打开方式在上一章节中有详细说明)
1.内容区(content)
标签中放置内容的区域,文本,子标签等都是放在内容区中,可以通过width和height属性设置内容区的大小(需要注意的是,width,height设置的不是标签整体的大小) ,如果没有为标签设置内边区和边框大小,内容区大小可看作标签大小.
用公式表示
标签大小=内容区+内边区+边框
2.内边距(padding)
内容区与边框之间的空间 ,同时内边距的大小会影响到整个标签的大小,我们可以使用padding属性来设置内边距的大小,如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> a{ padding-left: 像素数;/* 设置左方内边距大小 */ padding-top:像素数 ;/* 设置上方内边距大小 */ padding-right: 像素数;/* 设置右方内边距的大小 */ padding-bottom: 像素数;/* 设置底部内边距大小 */ } </style> </head> <body> <a></a> </body> </html>
当然正式运用中除非我们特别的需要,否则是不需要每设置一个方向就写一条代码的,正常情况下,我们有两种简写语法
第一种,只适合上下,左右分别相同的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
padding:上下像素数 左右像素数 ;
}
</style>
</head>
<body>
<a></a>
</body>
</html>
相比于第一种以及传统写法,第二种语法就要更加简单和灵活了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
padding:上像素数 右像素数 下像素数 左像素数;/* 总体来说按照顺时针顺序进行设置 */
}
</style>
</head>
<body>
<a></a>
</body>
</html>
3.边框(border)
可在标签周围创建边框,同时边框也是标签可见框的最外部
我们可以使用border属性设置边框的颜色,宽度,风格(注意:在设置时需要将这三条属性值同时设置,否则边框将无法显示)
颜色和像素大家必定很熟悉了,那我们就简单说明一下风格:
dotted （点线）
dashed （虚线）
solid （实线）
double （双线）
groove （槽线）
现在给大家举个例子,同时说明设置边框的基本语法:
border:像素数 颜色 风格;
(三个属性值的位置可以互换)
以下是举例,为了让大家看得清楚点我将字体设大了点,应该不影响理解:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
font-size: 100px;
border: 2px bisque solid;
}
</style>
</head>
<body>
<a>人无完人</a>
</body>
</html>
同时我们也可以为边框设置其他样式,比如圆角边框
使用属性border-radius即可以设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
font-size: 100px;
border: 2px bisque solid;
border-radius: 10px;/* 将边框的四个角全部设置为圆角边框 */
}
</style>
</head>
<body>
<a>人无完人</a>
</body>
</html>
或者我们可以单独设置某个方向的角变为圆角边框
我们以左上为圆角边框为例,相信一个例子过后,你就明白其他方向的属性该怎么设置了.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
font-size: 100px;
border: 2px bisque solid;
border-top-left-radius: 10px;/* 将左上角设置为圆角边框 */
}
</style>
</head>
<body>
<a>人无完人</a>
</body>
</html> 
4.外边距(margin)
外边距是标签边框与周围标签相距的空间,使用margin属性设置大小,用法上与padding相似,
直接给margin属性添加像素数即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
margin: 像素数;/* 为所有方向设置外边距 */
margin-left:像素数;/* 为左方设置外边距 */
margin-right:像素数;/* 为右方设置外边距 */
margin-bottom:像素数;/* 为底部设置外边距 */
margin-top:像素数;/* 为上方设置外边距 */
margin-left: auto;/* 将左右外边距设置为auto时,左右外边距将达到最大 */
margin-right:auto;
/* 上下外边距不能设置为auto,必须给具体的值 */
}
</style>
</head>
<body>
<a>人无完人</a>
</body>
</html>
最后,我们在布局中难免会受到系统默认布局的影响,所以我们可以首先清除系统默认样式
*{
margin: 0px;
padding: 0px;
}哈哈哈,熟悉的朋友就会知道这是借助了通用选择器的帮助,借助选择器的优先级不同,重新设置了默认样式
以上就是本章的全部内容啦,希望可以帮到大家!!!
标签：box,标签,边框,padding,像素数,设置,model,margin,CSS From： https://blog.csdn.net/wzc3180043380/article/details/143362578