1.盒子模型
1.1盒子模型的传参
margin:100px； 四个方向全部改变
margin:100px 200px; 就是上下100px 左右200px
margin:100px 200px 300px; 上100px 左右200 下300
margin:100px 200px 300px 400px; 顺时针
1.2 PADDING
传一个参数 四个方向都改变
padding: 20px 30px; 上下20px 左右20px
padding: 20px 30px 40px; 上20 左右30 下40
padding: 20px 30px 40px 50px;顺时针
2.HTML标签的分类
2.1块标签
h1,p,div,ul,li,dl,dt,dd都是块标签
特点：1、独占一行 2、能设置width，height
<h1>h1</h1>
<p>p</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
<div>div</div>
2.2内联标签
a,span,em,strong
//特点
1.并排显示
2.不能设置width,height
3.不能设置margin-top,margin-bottom
<a href="#">a</a>
<span>span</span>
<i>i</i>
<em>em</em>
<strong>strong</strong>
2.3内联块
//常用的内联块标签
button,img,input
//特点
1.并排显示
2.可以设置宽高
<button>百度一下</button>
<img src="images/timg1.jpg" alt="">
<input type="text">
2.4块标签，内联元素和内联块
- 内联元素和内联块元素水平居中
{ display:block;
margin-left:auto;
margin-right:auto;
}
- 块标签默认
display：block；
- 内联默认
display:inline;
- 内联块默认
display:inline-block
2.5如何让内联元素和内联块元素水平居中
//给父级加
text-align:center
body{
text-align: center;
}
3.CSS选择器
3.1选择器
- 伪类选择器
p{color:red; }
.one{color:yellow;}
#two{color:green;}
p,h1,div{
color: royalblue;
}
- 分组选择器
p:hover{color:firebrick;}
3.2后代选择器
.parent p{} 选择parent之后的所有p元素
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<div>
<p>hello world</p>
</div>
3.2兄弟选择器
div+p{ color:red;} -->选中div之后的第一个p元素
div~p{ color:bule;} -->选中div之后的所有p元素
div~p{
color: bisque;
}
div+p{
color: bisque;
}
3.3伪元素
伪元素-->用css自定义生产的元素
div:before{ content: " " }
div:before{
width:100px;
height: 100px;
background: red;
content:"前面";
display:block;
}
3.4属性选择器
语法
element[attr=value]{}
[class="one"]{
color:red;
}
3.5选择器的优先级
元素选择器<class选择器<ID选择器<!important
p{
color: antiquewhite !important;
}
3.6选择器的权重
选择器嵌套的层次越深，那么权重越高
.child{
color: aqua;
}
.parent>.child{
color:bisque;
}
