CSS盒子模型
-
CSS三大特性
-
优先级的介绍
-
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
-
优先级公式：
-
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
-
-
注意点：
-
1、!important写在属性值的后面，分号的前面！
-
2、!important不能提升继承的优先级，只要是继承优先级最低！
-
3、实际开发中不建议使用 !important 。
-
-
-
<!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>
#id {
color: orange;
}
.box {
color: blue;
}
div {
color: green !important;
}
/* !important不要给继承的添加，自己有样式无法继承父级样式 */
body {
color: red;
}
</style>
</head>
<body>
<!-- 意义：当一个标签使用了多个选择器，样式冲突的时候，到底谁生效 -->
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>
-
权重叠加计算
-
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
-
权重叠加计算公式：（每一级之间不存在进位）
-
-
比较规则：
-
1、先比较第一级数字，如果比较出来了，之后的统统不看
-
2、如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
-
3、......
-
4、如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
-
-
注意点：!important如果不是继承，则权重最高，天下第一！
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* #one {
color: red;
}
.son {
color: blue;
}
p {
color: green;
} */
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
</body>
</html>
-
计算题走起
-
第1题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第1题：普通题</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* (0, 2, 0, 0) */
#father #son {
color:blue;
}
/* (0, 1, 1, 1) */
#father p.c2 {
color:black;
}
/* (0, 0, 2, 2) */
div.c1 p.c2 {
color:red;
}
/* 继承, 最低 */
#father {
color:green !important;
}
/* 继承, 最低 */
div#father.c1 {
color: yellow ;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
这行文本是什么颜色的？
</p>
</div>
</body>
</html>-
第2题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第2题: 标签选择器选择一类</title>
<style>
/* (行内, id, 类, 标签) */
/* !important 最高 */
/* 继承: 最低 */
/* (0，0, 0， 2) */
div div {
color: skyblue;
}
/* (0， 0， 0， 1) */
div {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<div>
这行文本是什么颜色？
</div>
</div>
</div>
</body>
</html>-
第3题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第3题: 权重叠加每位不存在进制</title>
<style>
/* (行内, id, 类, 标签) */
/* (0, 0, 0, 12) */
div div div div div div div div div div div div {
color: red;
}
/* (0, 0, 1, 0) */
.one {
color: pink;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="one">这行文字是什么颜色的？</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>-
第4题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第4题：权重相同此时比较层叠性</title>
<style>
/* (0, 0, 2, 1) */
.c1 .c2 div {
color: blue;
}
/* (0, 1, 0, 1) */
div #box3 {
color:green;
}
/* (0, 1, 0, 1) */
#box1 div {
color:yellow;
}
/* 一样的话，谁在后面谁生效 */
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
这行文本是什么颜色的？
</div>
</div>
</div>
</body>
</html>-
第5题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第5题: 全是继承的特殊情况</title>
<style>
/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */
/* 继承 */
div p {
color:red;
}
/* 继承 */
.father {
color:blue;
}
</style>
</head>
<body>
<div class="father">
<p class="son">
<!-- span第一继承p然后才是继承father -->
<span>文字</span>
</p>
</div>
</body>
</html> -
盒子模型
-
盒子模型的介绍
-
盒子的概念
-
1、页面中的每一个标签，都可看做是一个"盒子"，通过盒子的视角更方便的进行布局
-
2、浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
-
-
盒子模型
-
CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（ margin）构成，这就是盒子模型
-
-
记忆：可以联想现实中的包装盒
-
<!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>
/* 纸箱子、填充泡沫 */
div {
width: 300px;
height: 300px;
background-color: pink;
/* 边框线 === 纸箱子 */
border: 1px solid #000;
/* 内边距 == 填充泡沫 ： 出现在内容和盒子边缘之间 */
padding: 20px;
/* 外边距 ： 出现在两个盒子之间，出现在盒子的外面*/
margin: 50px;
}
</style>
</head>
<body>
<div>内容电脑</div>
<div>内容电脑</div>
</body>
</html>
-
内容的宽度和高度
-
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
-
属性：width / height
-
常见取值：数字+px
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html> -
-
边框（border）- 连写形式
-
属性名：border
-
属性值：单个取值的连写，取值之间以空格隔开
-
如：border : 10px solid red;
-
不分先后
-
-
快捷键：bd + tab
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 粗细1像素 实线 黑色 */
border: 1px solid #000;
/* solid 实线； dashed 虚线； dotted 点线 */
border: 5px dashed #000;
border: 5px dotted #000;
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html> -
-
边框（border）- 单方向设置
-
场景：只给盒子的某个方向单独设置边框
-
属性名：border - 方位名词
-
属性值：连写的取值
<style>
div {
/* 只想要左边 */
border-left: 5px dotted #000;
/* border-right: 5px dotted #000;
border-top: 5px dotted #000;
border-bottom: 5px dotted #000; */
}
</style> -
-
盒子实际大小初级计算公式
-
需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
-
注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
-
-
盒子实际大小初级计算公式：
-
盒子宽度 = 左边框 + 内容宽度 + 右边框
-
盒子高度 = 上边框 + 内容高度 + 下边框
-
-
解决：当盒子被border撑大后，如何满足需求？
-
解决：计算多余大小，手动在内容中减去（手动内减）
-
<!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>
div {
/* border会撑大盒子尺寸 */
/* 盒子尺寸= width/height + 边框线=400+10*2=420 */
/* 如果只想要400*400尺寸 */
/* width: 400px; */
width: 380px;
/* height: 400px; */
height: 380px;
background-color: green;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>div</div>
</body>
</html> -
-
综合案例-新浪导航
<!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>
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
width: 80px;
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
</style>
<!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
<p>
<a href="#"></a>
</p>
</body>
</html>
-
内边距（padding）- 取值
-
作用：设置 边框 与 内容区域 之间的距离
-
属性名：padding
-
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
-
<!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>
div {
width: 300px;
height: 300px;
background-color: pink;
/* 添加了4个方向的内边距 */
padding: 50px;
/* padding 可以当作复合属性使用 ，表示单独设置某个方向的内边距*/
/* padding 最多取4个值 上右下左 */
padding: 10px 20px 30px 40px;
/* 三个值 ：上 左右 下*/
padding: 10px 40px 80px;
/* 两个值 ： 上下 左右 */
padding: 10px 80px;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>
-
盒子实际大小终极计算公式
-
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
-
注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
-
-
解决：当盒子被border和padding撑大后，如何满足需求？
-
自己计算多余大小，手动在内容中减去（手动内减）
<!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> div { /* 撑大盒子的都有啥？border+padding */ width: 240px; height: 240px; background-color: pink; border: 10px solid #000; padding: 20px; } </style> </head> <body> <div>文字</div> </body> </html> -
-
（案例） 新浪导航的优化
-
需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？
<!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> .box { height: 40px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; } /* 后代: box里面的a */ .box a { padding: 0 16px; /* width: 80px; */ height: 40px; /* 推荐先加上: 清楚的看到文字在什么位置 */ /* background-color: #edeef0; */ display: inline-block; text-align: center; line-height: 40px; font-size: 12px; color: #4c4c4c; text-decoration: none; } .box a:hover { background-color: #edeef0; color: #ff8400; } </style> <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 --> </head> <body> <div class="box"> <a href="#">新浪导航</a> <a href="#">新浪导航213456789</a> <a href="#">新浪导航</a> <a href="#">新浪导航</a> </div> <p> <a href="#"></a> </p> </body> </html> -
-
（拓展）不会撑大盒子的特殊情况
-
不会撑大盒子的特殊情况（块级元素）
-
1、如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
-
2、此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
-
-
-
CSS3盒模型（自动内减）
-
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
-
解决方法 ② ：自动内减
-
操作：给盒子设置属性 box-sizing : border-box ; 即可
-
优点：浏览器会自动计算多余大小，自动在内容中减去
-
<!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> div { width: 100px; height: 100px; background-color: pink; border: 10px solid #000; padding: 20px; /* 变成CSS3的盒子模型，好处：加了border和padding不需要手动减去 */ box-sizing: border-box; } </style> </head> <body> <div>文字</div> </body> </html> -
-
外边距
-
用法同内边距，只是一个是内，一个是外
<!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> div { width: 100px; height: 100px; background-color: pink; margin: 50px; margin-left: 100px; } </style> </head> <body> <div>div</div> </body> </html> -
-
清除默认内外边距
-
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 margin和padding，后续自己设置
-
解决方法：
-
<!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; } </style> </head> <body> <p>ppppp</p> <p>ppppp</p> <h1>h1</h1> <ul> <li>lili</li> </ul> </body> </html> -
-
版心居中
<!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> div { width: 1000px; height: 300px; background-color: pink; margin: 0 auto; } </style> </head> <body> <!-- 版心：网页的有效内容 --> <!-- 版心一般100%水平居中 --> <div>版心</div> </body> </html> -
（案例）网页新闻列表案例
<!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;
/* 所有的标签都可能添加内边距或border, 都內减模式 */
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍, 就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
/* 去掉列表的符号 */
ul {
list-style: none;
}
/* li {} */
.news li {
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
</ul>
</div>
</body>
</html> -
外边距折叠现象 – ① 合并现象
-
场景：垂直布局 的 块级元素，上下的margin会合并
-
结果：最终两者距离为margin的最大值
-
解决方法：避免就好
-
只给其中一个盒子设置margin即可
-
<!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>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
/* margin-bottom: 50px; */
margin-bottom: 60px;
}
.two {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="one">11</div>
<div class="two">22</div>
</body>
</html> -
-
外边距折叠现象 – ② 塌陷现象
-
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
-
结果：导致父元素一起往下移动
-
解决方法：
-
1、给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
-
2、给父元素设置overflow：hidden
-
3、转换成行内块元素
-
4、设置浮动
<!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>
.father {
width: 300px;
height: 300px;
background-color: pink;
/*padding-top: 50px;*/ /*son往下挪啦，但我就想用外边距来解决问题*/
/* 如果设计稿没有border，就不能使用这个解决办法 */
/* border: 1px solid #000; */
/* 完美 */
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
/* display: inline-block; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html> -
-
-
行内元素的margin和padding无效情况
-
场景：给行内元素设置margin和padding时
-
结果：
-
1、水平方向的margin和padding布局中有效！
-
2、垂直方向的margin和padding布局中无效！
-
<!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>
span {
/* margin: 100px; */ /* 上下有问题 */
/* padding: 100px; 上下有问题 */
line-height: 100px; /* 解决方案*/
}
</style>
</head>
<body>
<!-- 行内元素 内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top和bottom 不生效 -->
<span>span</span>
<span>span</span>
</body>
</html> -