Python 前端开发之CSS盒模型
【摘要】 HTML 盒模型相关知识。
盒模型
在CSS中，"box model"这一术语是用来设计和布局时使用，然后在网页中基本上都会显示一些方方正正的盒子。我们称为这种盒子叫盒模型。
盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。
1、盒模型示意图
2、盒模型的属性
width：内容的宽度 height: 内容的高度 padding：内边距，边框到内容的距离，padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 border: 边框，就是指的盒子的宽度 margin：外边距，盒子边框到附近最近盒子的距离
如果让你做一个宽高402*402的盒子，您如何来设计呢？答案有上万种，甚至上亿种。
1）、盒模型的计算 ：width/height+2*padding+2*border
width不等于盒子的真实宽度：
如果一个盒子设置了padding，border，width，height 盒子的真实宽度=width+2*padding+2*border 盒子的真实高度=height+2*padding+2*border
如果要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。
2）、padding的设置
padding有四个方向，分别描述4个方向的padding。描述的方法有两种：
1.写小属性,分别设置不同方向的padding：
padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
2.写综合属性，空格隔开：
/*上 右 下 左*/ padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ padding: 20px;
标签的默认padding
比如ul，ol标签，有默认的padding-left值。
那么我们一般在写网页的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。
通配符选择器：
*{
padding:0;
margin:0;
}
但这种方法效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）
3）、border的设置
border:边框的意思，描述盒子的边框
边框有三个要素： 粗细 线性样式 颜色（如不写颜色默认为黑色。如不写粗细不显示边框。只写线性样式，默认有上下左右 3px宽度的实体黑色边框。）
按照三要素来写baoder：
border-width: 3px; border-style: solid; border-color: red; /* border-width: 5px 10px; border-style: solid dotted double dashed; border-color: red green yellow; */ /*设置顺序 ：上 右 左 下*/ /*border-style: 实线，点状，双线，虚线*/
按照方向划分设置小属性：
border-top-width: 10px; border-top-color: red; border-top-style: solid; border-right-width: 10px; border-right-color: red; border-right-style: solid; border-bottom-width: 10px; border-bottom-color: red; border-bottom-style: solid; border-left-width: 10px; border-left-color: red; border-left-style:solid;
按照方向设置：
border-top: 10px solid red; border-right: 10px solid red; border-bottom: 10px solid red; border-left: 10pxb solid red;
设置border没有样式：
border:none； border：0； 表示border没有设置样式。
border-radius属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.box1{
width: 200px;
height: 200px;
border-radius: 20px;
background-color: #f0809d;
}
div.box2{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #7ef0c2;
}
div.box3{
width: 200px;
height: 200px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #b589f0;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
利用border画三角
画三角示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px;
border-color: #7ef0c2 transparent transparent transparent;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4）、margin的设置
margin：外边距的意思。表示边框到最近盒子的距离。
设置margin：
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; /*表示盒子距离右面的盒子100px*/ margin-right: 100px; /*表示盒子距离下面的盒子100px*/ margin-bottom: 100px;
margin的塌陷：
html:
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
css:
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
border: 1px solid gray;
/*float: left;*/
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
/*float: left;*/
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
/*float: left;*/
}
/*
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候注意margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
*/
margin：0 auto;
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
/*当一个div元素设置margin：0 auto;时就会居中盒子，那我们知道margin:0 auto;表示上下外边距离为0，左右为auto的距离，那么auto是什么意思呢？
设置margin-left:auto；我们发现盒子尽可能远离左侧，当设置margin-right:auto；我们发现盒子尽可能远离右侧。当两条语句并存的时候，我们发现盒子尽可能远离两侧，此时盒子就居中了。
如果给盒子设置浮动，那么margin:0 auto失效。
使用margin：0 auto;注意点：
1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;
2.只有标准流下的盒子 才能使用margin:0 auto;
当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了
3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;
*/
5）、善于使用父亲的padding，而不是margin
margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系.
如果让大家实现如图的效果，应该有不少的同学做不出来。
错误示例：
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
设置border：
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
border: 1px solid;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
margin-top: 30px;
}
使用padding:
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
background-color: blue;
padding-top: 30px;
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
}
因为父亲没有border，那么儿子margin-top实际上踹的是“流” ，踹的是行，所以父亲掉下来了，一旦给父亲一个border发现就好了。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）