一、bfc
1、定义：块级格式化上下文
2、作用：
1⃣、相邻元素垂直外边距合并【】
2⃣、margin-top【子元素设置margin-top之后，父元素会随之下移】
3⃣、高度塌陷【父元素没有设置高度，子元素设置浮动之后高度会发生塌陷】
4⃣、布局【两栏布局，双飞翼布局】（自适应两栏布局两种解决途径，第一种是ovr那个触发bfc，第二种方法是给下面的div设置个子元素然后给你margin-left 距离重叠的区域那个）
3、触发条件：
1⃣.根元素 html默认就是一个BFC
2⃣.float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC
3⃣.overflow的值不为visible 单纯的div不是BFC，如果添加了overflow：hidden等就是BFC
4⃣.display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex
5⃣.position的值为absolute或fixed
4、bfc的特性及应用
1⃣.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）
2⃣.BFC的区域不会与float box发生重叠（应用：自适应两栏布局）
3⃣.计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）
4⃣、BFC内部的Box会在垂直方向，一个接一个的放置。
5⃣、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
6⃣、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素
5、双飞翼布局（两种第一种就是over那个 第二种就是给大的那个加个儿子 左右设置margin）
二、css属性选择器
1、E[attr] A.希望选择有某个属性的元素，而不论属性值是什么 例如：a[href]{color:red;}
2、E[attr=”value”] 除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素 例如: a[href=”www.baidu.com”]{color:red;}
3、E[attr^=”value”] 指定了属性，并且指定了属性值，属性值是以value开头的 例如：a[title^="text"] {color: red;}
4、E[attr$=”value”] 指定了属性，并且指定了属性值，属性值是以value结尾的 例如：a[title$="text"] {color: red;}
总结、type 选择器带有tpe属性的进行操作
type=“value”选择的type属性值为value
type^=“value”选择的type属性值开始位置带有value
type$=“value”选择的type属性值结尾位置带有value
三、结构伪类选择器
附注1、双飞翼布局的两种解决方法
1、
<!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>
/* 给浮动元素加overflow:hidden */
.left{
width: 100px;
height: 500px;
background-color: pink;
float: left;
overflow: hidden;
}
.zhong{
width: 100%;
height: 500px;
background-color: red;
}
.right{
width: 100px;
height: 500px;
background-color: pink;
float: right;
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="zhong"></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>
/*a给中间的那个加个子元素 然后设置两端margin为两个盒子的距离 */
*{
padding: 0; margin: 0;
}
.left{
width: 100px;
height: 500px;
background-color: pink;
float: left;
}
.zhong{
width: 100%;
height: 500px;
background-color: red;
}
.right{
width: 100px;
height: 500px;
background-color: pink;
float: right;
}
.son{
width: 100%;
height: 500px;
background-color: greenyellow;
margin: 0 100px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="zhong">
<div class="son"></div>
</div>
</body>
</html>
附注2、自适应两栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<!DOCTYPE html>
<html lang=" en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
height: 100%;
}
.wrap {
width: 200px;
height: 100%;
float: left;
border: 1px solid red;
background: red;
}
.wrap1 {
height: 100%;
border: 1px solid yellow;
background: yellow;
}
.son{
height:100%;
margin-left: 200px;
background: skyblue;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="wrap1">
<div class="son">123456</div>
</div>
</body>
</html>
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
