1.盒子类型的传参
margin和padding的传参方式一样
`margin:100px `四个方向全部改变
`margin:100px 200px; top,bottom-- 100px left,right -- 200px`
传三个参数 `top--100 left,right -- 200 bottom --300`
`margin:100px 200px 300px;`
传四个参数
`margin:100px 200px 300px 400px`
`top right bottom left`顺时针的方向改变大小
元素内容的起始位置,是基于它自身width,height的起始位置
2.标签的分类
块标签：
h1,p,div,ul,li,dl,dt,dd
特点：1.独占一行 2.能设置width和heigth
内联标签：a,span,i,strong
特点：1.并排显示 2.不能设置width和heigth3.不能设置margin-top和margin-bottom
内联块：input,img,button
特点：1.并排显示 2.能设置width和heigth
3.水平居中
{
display:block;
margin-left:auto;
margin-rigth:auto
}
块标签默认：
disply:block
内敛标签默认：disply:inline
内联块默认：disply:inline-block
4.选择器
4.1伪类选择器
p:hover{color:firebrick;}
<p class="one" id="two">hello world</p>
<h1>h1</h1>
<div>div</div>
2.png
鼠标移到
p所在的元素时变色
4.2分组选择器
p,h1,div{ color:red}
<p class="one" id="two">hello world</p>
<h1>h1</h1>
<div>div</div>
1.png
4.3后代选择器
parent>p{
color: red;
}选中parent的直接子代
.parent p
{
color:aquamarine;
}`选中parent的所有子代
2.png
4.4兄弟选择器
div+p{ color: aquamarine; }
div+p--->选中div之后的第一个p元素
div~p---->选中div之后的所有p元素
input：focu{ background: red; }
<div>
div
</div><p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<input type="text">
2.png
4.5伪元素
div:before{
width: 100px;
height: 100px;
background: red;
content: "前面";
display:block;
}
/*伪元素-->用css自定义产生的元素
div：before{}
div：after{}
*/
<div>
content
</div>
3.png
4.6属性选择器
语法: element[attr=value]{}
<style>
/*
*/
[class="A"]{
color: red;
}</style>
<body>
<P class="A">hello word</P>
</body>
3.png
5.选择器的优先排序
!important > id > class > p
6.选择器的权重
选择器嵌套的层次越深，那么权重越高
<style>
.B{
color: aqua;
}
.A>.B{
color:brown;
}
</style>
<body>
<div class="A">
<div class="B">
AB
</div>
</div>
</body>
3.png
网友评论