1.width:100% & width:auto 区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.container {
width: 300px;
padding: 20px;
height:auto;
background: #9f7dcc;
color: #ffffff;
}
.div1{
width: auto;
background: #2C8DFB;
}
.div2{
width: 100%;
background: #15346A;
}
.div1,div2 {
border: 10px solid burlywood;
padding: 10px;
margin: 10px;
}
</style>
<body>
<div class="container">
<div class="div1">auto</div>
<div class="div2">100%……</div>
</div>
<script>
/*
标准盒模型下width = content =
width = 300px
100%盒子的width = content = 300px = 父盒子的width
auto width = border+margin+padding+width = 10*2 + 10*2 +10*2 +240 父盒子的width
*/
</script>
</body>
</html>
选择器优先级
1.css 常用的选择器
2.元素选择器
/* 元素选择器 */
span {
margin: 0;
padding: 0;
}
<!--元素选择器-->
<div>
<span></span>
<p></p>
</div>
3.id选择器
给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘p1’”的元素
/* id选择器 */ #p1 { margin: 0; padding: 0; }
<!--id选择器-->
<div>
<span></span>
<p id="p1"></p>
</div>
4.类选择器
给标签取class名，以点.加class名开头，选择所有该class名的元素
/* 类选择器 */
.span1 {
margin: 0;
padding: 0;
}
<!-- class选择器-->
<div>
<span class="span1"></span>
<p></p>
</div>
5.后代选择器
以空格隔开包含关系的元素,查找以class=‘content’的父元素下所有的p标签（包含孙子元素）
/* 后代选择器选择器 */
.content p {
margin: 0;
padding: 0;
height: 20px;
width: 20px;
background-color: #03e9f4;
}
<!-- 后代选择器-->
<div class="content">
<span class="span1"></span>
<p id="p1">2</p>
<p>3</p>
</div>
6.子代选择器
以>隔开包含关系的元素,查找以class=‘content’的父元素下所有的class=‘span1’的儿子元素
/* 子代选择器 */
.content > .span1 {
margin: 0;
padding: 0;
height: 20px;
width: 20px;
display: inline-block;
background-color: #03e9f4;
}
!-- 子代选择器-->
<div class="content">
<span class="span1"></span>
<p id="p1">2</p>
<p>3</p>
</div>
7.兄弟选择器
以波浪号隔开兄弟关系的元素(修饰前一个选择器往下的所有兄弟选择器)
/* 兄弟选择器 */
#p1 ~ p {
margin: 0;
padding: 0;
height: 20px;
width: 20px;
display: inline-block;
background-color: #03e9f4;
}
<!-- 兄弟选择器-->
<div class="content">
<p id="p1">2</p>
<div>
<span class="span1"></span>
</div>
<p>3</p>
<div>
<span class="span1"></span>
</div>
<p>4</p>
</div>
8.相邻选择器
以+隔开相邻关系的元素(修饰前一个选择器往下的相邻的选择器 只能一个)
/* 相邻选择器 */
#p1 + .span1 {
margin: 0;
padding: 0;
height: 20px;
width: 20px;
display: inline-block;
background-color: #03e9f4;
}
<!-- 相邻选择器-->
<div class="content">
<p id="p1">2</p>
<span class="span1">8888</span>
<div>
<span class="span1"></span>
</div>
<p>3</p>
<div>
<span class="span1"></span>
</div>
<p>4</p>
</div>
9.群组选择器
以，分隔(逗号分隔开需要修饰的选择器)
/* 群组选择器*/
p, span {
margin: 0;
padding: 0;
height: 20px;
width: 20px;
display: inline-block;
background-color: #03e9f4;
}
<!-- 群组选择器-->
<div class="content">
<p id="p1">2</p>
<span class="span1">8888</span>
<div>
<span class="span1"></span>
</div>
<p>3</p>
<div>
<span class="span1"></span>
</div>
<p>4</p>
</div>
10.全局选择器
以*开头,查找body下所有标签
/* 全局选择器*/
* >p {
margin: 0;
padding: 0;
height: 20px;
width: 20px;
font-size: 20px;
background-color: #03e9f4;
}
<!-- 全局选择器-->
<div class="content">
<p id="p1">2</p>
<span class="span1">8888</span>
<div>
<span class="span1"></span>
</div>
<p>3</p>
<div>
<span class="span1"></span>
</div>
<p>4</p>
</div>
11.伪类类选择器
以：为修饰符，修饰前一个选择器，比如‘button:hover’表示当鼠标放在button元素上面时，设置字体颜色为浅蓝色
/* 属性选择器*/
button:hover {
color: #9f7dcc;
height: 20px;
width: 100px;
background-color: #03e9f4;
}
<!-- 属性选择器-->
<div class="content">
<button>button</button>
<p id="p1">2</p>
<span class="span1">8888</span>
<input type="text" name="" id="" value="99999">
<div>
<span class="span1"></span>
</div>
<p>3</p>
<div>
<span class="span1"></span>
</div>
<p>4</p>
</div>
12.属性选择器
以[ ]修饰，查找属性type=text的元素
/* 属性选择器*/
input[type="text"] {
background-color: aquamarine;
}
<!-- 属性选择器-->
<div class="content">
<p id="p1">2</p>
<span class="span1">8888</span>
<input type="text" name="" id="" value="99999">
<div>
<span class="span1"></span>
</div>
<p>3</p>
<div>
<span class="span1"></span>
</div>
<p>4</p>
</div>
12.选择器优先级
// css的优先级 important! > 行间选择器 > ID选择器 > 属性选择器 && 伪类选择器 > 元素选择器
/*
1.行内样式选择器样式： 优先级：1000
2.id选择器：优先级：100
3.类选择器 || 伪类选择器： 优先级 ：10
4.元素选择器： 优先级1
*/
