学习目标
- 盒子模型 的组成部分
- 盒子模型的 边框、内边距、外边距 的作用及简写形式
- 计算盒子的 实际大小
- 外边距折叠现象，并知道如何解决 盒子塌陷问题
css三大特性(!!!)
继承性 层叠性 优先级
优先级
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
继承<通配符<标签选择器<类选择器<id选择器<行内样式<!important
!important不能提升继承的优先级,只要是继承优先级最低.
如果不是继承,!important天下第一,实际开发不建议使用!important
权重叠加
如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
权重叠加公式:
权重叠加计算公式：（每一级之间不存在进位）
行内样式个数 id选择器个数 类选择器个数 标签选择器个数
0 0 0 0
简单理解
行内样式个数:1000 ---1000
id选择器个数:0100 --100
类选择器个数:0010 ---10
标签选择器个数 :0001 ---1
如果优先级相同,则比较层叠性,谁的样式在后面,谁说了算.
!important如果不是继承,权重最高 天下第一
盒子模型组成
内容区 +边框 +内边距 +外边距
网页的每个元素(标签)都可以理解为盒子.
内容区域
宽高设置内容区域的大小
width:50px;
height:60px;
边框(border)
边框粗细
border-width:5px;
边框样式
border-style:solid|dashed|dotted
边框颜色
border-color:red;
边框单方向
border-top:solid 1px red;
border-bottom:solid 1px red;
border-left:solid 1px red;
border-right:solid 1px red;
边框简写
border：solid 1px red;
内边距(padding)
上右下左
padding:10px;
上下 左右
padding:10px 20px;
上 左右 下
padding:10px 20px 30px;
上右下左
padding:10px 20px 30px 50px;
内边距单方向设置
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
盒子模型终极计算公式
盒子宽度=左右边框+左右padding+内容宽度
盒子高度=上下边框+上下padding+内容高度
边框 padding都会撑大盒子
1 手动内减
2 自动内减
自减盒子模型(超级好用!!)
css3盒子模型
box-sizing: border-box;
不会撑大盒子问题:
如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
示例代码:
外边距(margin)
上右下左
margin:10px;
上下 左右
margin:10px 20px;
上 左右 下
margin:10px 20px 30px;
上右下左
margin:10px 20px 30px 50px;
外边距单方设置
清除内外边距
因为部分标签有默认的内外边距,如果不清除,会影响网页布局..
*{
margin:0;
padding:0;
}
版心
网页的可视区域.版心一定要固定的宽度.实际开发固定宽度一旦设置,不要轻易更改.
.w{
width:1226px;
margin:0 auto;
}
新闻案例
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">武汉招聘前端开发，vue.js，css</a></li>
<li><a href="#">武汉招聘网页设计，vue.js，css</a></li>
<li><a href="#">武汉招聘网页设计，vue.js，css</a></li>
<li><a href="#">武汉招聘网页设计，vue.js，css</a></li>
<li><a href="#">武汉招聘网页设计，vue.js，css</a></li>
</ul>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
/* ps */
/* background-color: pink; */
margin: 50px auto 0;
padding: 40px 30px 0;
border: 1px solid #ccc;
}
.news h2 {
font-size: 30px;
color: #000;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
ul {
list-style: none;
}
.news ul li {
height: 50px;
line-height: 50px;
padding-left: 28px;
border-bottom: 1px dashed #ccc;
/* text-indent: 2em; */
}
.news a {
font-size: 18px;
color: #666;
text-decoration: none;
}
.news a:hover {
text-decoration: underline;
color: orange;
}
外边距折叠现象
外边距正常现象
水平布局的盒子,左右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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
display: inline-block;
width: 200px;
height: 300px;
}
.box1 {
background-color: pink;
margin-right: 20px;
}
.box2 {
background-color: green;
margin-left: 30px;
}
/*
水平布局的盒子,左右margin正常,互不相影响,
最终的距离为margin左右的和.
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
外边距折叠-合并现象
垂直布局 的 块级元素，上下的margin会合并 最终两者的距离为margin最大值 解决方案:实际开发避免即可,只给其中一个盒子设置margin即可
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 300px;
}
.box1 {
background-color: pink;
margin-bottom: 20px;
}
.box2 {
background-color: green;
margin-top: 60px;
}
/*
垂直布局 的 块级元素，上下的margin会合并
最终两者的距离为margin最大值
解决方案:实际开发避免即可,只给其中一个盒子设置margin即可
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
外边距折叠-塌陷现象
互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
解决方案:
1 给父元素设置border-top;
2 给父元素设置padding-top
3 给父元素设置 overflow: hidden
4 转换为行内块元素
5设置浮动
注意:浮动 绝对定位 固定定位的盒子不会有嵌套块级元素塌陷问题.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.father {
width: 600px;
height: 600px;
background-color: pink;
/* border-top: 1px solid #000; */
/* padding-top: 1px; */
/* overflow: hidden; */
}
.son {
float: left;
width: 200px;
height: 200px;
margin-top: 40px;
background-color: green;
}
/*
互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
导致父元素一起往下移动
解决方案
1 给父元素设置border-top;
2 给父元素设置padding-top
3 给父元素设置 overflow: hidden
4 转换为行内块元素
5 设置浮动
注意:浮动 绝对定位 固定定位的盒子不会有嵌套块级元素塌陷问题.
*/
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
行内元素内外边距无效
注意：
- 行内元素 我们只能给左右的内外边距，不要给上下的内外边距。
- 如果非得要给，请转换为块级元素或者行内块元素。
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
/* display: inline-block; */
/* 水平方向 有效 */
/* margin:0 20px; */
/* 垂直方向 无效*/
/* margin: 30px 0; */
padding: 50px 30px;
}
</style>
</head>
<body>
<a href="#">百度</a>|<a href="#">新浪</a>|<a href="#">谷歌</a><a href="#">小米</a>|
</body>
</html>
