盒子模型组成
边框(border)
| 边框特性 | 属性 | 属性值 |
|---|---|---|
| 边框粗细 | border-width | 20px等 |
| 边框颜色 | border-color | #fff blue等 |
| 边框样式(必须指定) | border-style | solid(实线) dashed(虚线) dotted(点线) |
边框的复合写法(没有顺序): border: 1px solid red;
其他边框注意事项
四个边框也分开写
就近原则,层叠性: border: 1px solid blue; border-top: 1px solid red;
边框之间合并重合部分
table, td, th {
border: 2px solid black;
border-collapse: collapse; /* 表框之间合并重合部分*/
text-align: center;
}
边框会改变盒子大小（外部扩大）
div { //最后盒子大小为长宽200px
width: 180px;
height: 180px;
background-color: pink;
border: 10px solid red;
}
内边距（padding）
和border一样，padding也分为四个方位：
padding-left padding-right padding-bottom padding-top
padding的复合写法
| padding的复合写法 | 实际意义 |
|---|---|
| padding: 5px; | 四边内边距都是5px |
| padding: 5px 10px; | 上下5px， 左右10px |
| padding: 5px 10px 15px; | 上5px。左右10px，下20px |
| padding: 5px 10px 15px 20px; | 上5右10下15左20px（顺时针） |
内边距也会改变盒子大小（内部撑大）
div { //最后盒子大小为长宽200px
width: 180px;
height: 180px;
background-color: pink;
padding: 10px;
}
内边距其他注意事项：
-
指定内边距不指定盒子大小有时视觉效果更好(微博导航栏)
-
不指定盒子的width（继承父类），指定内边距不会改变盒子大小
外边距（margin, 一般用于盒子和盒子之间的距离）
和其他性质一样，具有四个方margin-top ... margin-left
margin的复合写法和padding一样
| padding的复合写法 | 实际意义 |
|---|---|
| margin: 5px; | 四边外边距都是5px |
| margin: 5px 10px; | 上下5px， 左右10px |
| margin: 5px 10px 15px; | 上5px。左右10px，下20px |
| margin: 5px 10px 15px 20px; | 上5右10下15左20px（顺时针） |
典型应用（在浏览器的块级盒子水平居中显示）：
前提条件：
-
盒子必须指定宽度（width）
-
盒子左右的外边距都设置为auto
-
一般写法 margin: 0 auto;(只需要保证左右auto即可)
.header{
margin: 0 auto;
width:960px;
}
class="header"
行内块/行内元素水平居中:
只需要在父类元素添加 text-align: center即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>行内元素/行内块元素水平居中对齐</title>
<style>
.header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
text-align: center;
}
/* 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可 */
</style>
</head>
<body>
<div class="header">
<span>里面的文字</span>
</div>
<div class="header">
<img src="down.jpg" alt="">
</div>
</body>
</html>
外边距的合并(贴得太紧)
相邻块级元素margin会取较大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外边距合并-相邻块级元素垂直外边距合并</title>
<style>
.damao, .ermao {
width: 200px;
height: 200px;
background-color: pink;
}
.damao {
margin-bottom: 200px;
} /* damao和ermao的外边距取决于这两个值的最大值*/
.ermao {
margin-top: 300px;
}
</style>
</head>
<body>
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</body>
</html>
嵌套块元素的垂直外边距塌陷(父子块)
解决方案:
-
为父元素定义(上)边框
-
为父元素指定 padding(内边距)
-
给父类添加 overflow: hidden;(不会像前两种改变盒子大小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外边距合并-嵌套块级元素垂直外边距塌陷</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
/* border: 1px solid red; */
/* border: 1px solid transparent; 边框透明, 视觉上不影响*/
/* padding: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
/* 父子的外边距会一起坍陷,取决于谁比较大 */
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
清除内外边距(元素可能有默认的内外边距)
* {
/* 通配符,全局使用 CSS的第一行代码*/
/* 行内元素尽量只设置左右的内外边距 */
margin: 0;
padding: 0;
}
圆角边框
border-radius:length;(指定圆的半径) border-radius: 10px 20px 30px 40px (分别代表左上 右上 右下 左下) 半径越大, 边框越圆 length: 10px / 10% 分开写四个部分: border-top-left-radius、 border-top-right-radius、border-bottom-right-radius 、 border-bottom-left-radius
| border-radius的复合写法 | 实际意义 |
|---|---|
| border-radius: 5px 10px ; | 左上右下(对角线)为第一个值， 另两个为第二个值 |
| border-radius: 5px 10px 15px 20px; | 左上角开始，顺时针的圆角半径 |
特殊形状:
(1) 胶囊型: 需要将border-radius设置为盒子height的一半
(2) 圆形: 首先需要盒子为正方形, border-radius设置为盒子height的一半
盒子阴影
注意盒子阴影时占用空间的
div:hover {
box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.3);
}
| 值 | 描述 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值， 10px(右) |
| v-shadow | 必需的。垂直阴影的位置。允许负值，-10px(左) |
| blur | 可选。模糊距离，值越大越模糊 |
| spread | 可选。阴影的大小，比如10px |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表, rgba(0, 0, 0, 0.3) |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影，默认时外侧阴影 |
文字阴影
注意盒子阴影时占用空间的
p:hover {
box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.3);
}
| 值 | 描述 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值， 10px(右) |
| v-shadow | 必需的。垂直阴影的位置。允许负值，-10px(左) |
| blur | 可选。模糊距离，值越大越模糊 |
| spread | 可选。阴影的大小，比如10px |
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
.box {
background: #fff;
height: 415px;
width: 298px;
margin: 100px auto;
border: 2px gray solid;
}
img {
width: 100%;
/* 使图片的宽度不会超过父类的宽度 */
}
.review {
height: 70px;
font-size: 14px;
/* font-weight: 700; */
padding: 0px 28px;
/* 没有width，padding不会撑开盒子 */
margin-top: 30px;
/* margin-top不需要改变盒子大小*/
/* padding-bottom: 40px; */
/* color: black; */
/* text-align: center; */
}
.appraise {
padding: 0 28px;
font-size: 12px;
margin-top: 20px;
color: #c5c9cd;
}
.info {
margin-top: 15px;
padding: 0 28px;
font-size: 14px;
}
.info h4 {
display: inline-block;
font-weight: 400;
}
.info .price {
color: orange;
}
.info em {
font-style: normal;
color: gray;
margin: 0 6px 0 15px;
}
</style>
</head>
<body>
<div class="box">
<img src="img.jpg" alt="女生耳机" title="耳机">
<p class="review"> 快递牛，整体不错蓝牙可以说秒连，红米给力</p>
<div class="appraise">
来自于1173238927的评价
</div>
<div class="info">
<h4>Redmi AirDots真蓝牙... </h4>
<em> | </em>
<span class="price"> 99.9元</span>
</div>
</div>
</body>
</html>
注意事项
-
第一行代码要清空内外边距
-
出现大小盒子嵌套时margin、padding、font-size是在大盒子里完成的，注意代码的嵌套书写
-
盒子之间的距离用margin写
-
img {width: 100%} 使图片大小自适应父类的宽度
-
list-style: none 去掉ul li前面默认的小圆点
好的编程习惯
-
选取标签时首先考虑语义，而不是类型（块标签、行内标签和行内块标签），比如h2适合标题，p适合大量文字等
-
给每个盒子都取一个class名字，方便后期维护
-
margin和padding使用要方便自己计算，盒子之间一般用margin
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
