1、盒子模型的传参
margin按照top 、right 、bottom、 left的顺序改变。
div{
width: 100px;
height: 100px;
background-color: red;
margin: 100px 200px 300px 400px;
}
01.png
2、关于padding
2.1、margin按照top,right,bottom,left顺序改变
<style>
div{
width: 100px;
height: 100px;
background-color: red;
padding: 20px 30px 40px 50px;/*传一个参数，四个方向都改变*/
}
</style>
2.2、元素内容的起始位置，是基于它自身的width.height的起始位置
<style>
*{margin: 0;padding: 0;}
div{
width: 300px;
height: 300px;
background-color: red;
padding: 20px;
}
</style>
<body>
<div>
hello world
</div>
3、标签的分类及其特点
3.1、块标签
<h1>~<h6>,<p>,<div>,<ul>,<li>,<dl>,<dt>,<dd>
特点：1、独占一行
2、能设置width、height
3.2、内联标签
<a><span><i><em><shrong>
特点： 1、并排显示
2、不能设置width、height
3、不能设置margin-top、margin-bottom
3.3、内联块标签
<input>、<img>、<button>
特点：1、能设置width，height
2、并排显示
3.4、 内联元素和内联块元素水平居中
{
display:block;
margin-left: auto;
margin-right: auto;
}/*块标签默认 display:block;
内联标签 display:inline*/
4、选择器
4.1、组合选择器
<style>
p,h1,div{
color: red;
}
</style>
<body>
<h1>hello world</h1>
<p>p</p>
<div>div</div>
4.2、后代选择器
<style>
/*.parent>p{ <!--亲儿子
color: red;
}*/
/*.parent p{}选择parent之后的所有p元素*/
.parent p{
color: red;
}
</style>
<body>
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
<p>hello world</p>
</div>
4.3、兄弟选择器
<style>
/*兄弟选择器*/
/*div+p{}-->选中div之后的第一个P元素*/
/*div~p{}-->选中div之后的所有P元素*/
div+p{
color: red;
}
/*div~p{
color: yellow;
}*/
/*伪类选择器
input：focus{}
*/
input:focus{
background: red;
}
</style>
<body>
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<input type="text">
4.4、伪元素
<style>
/*伪元素-->用CSS自定义的元素
div:before{
content:
}
div:after{
content:
}*/
div::before{
width: 50px;
height: 50px;
background: blue;
content: "前面";
display: block;
}
div:after{
width: 50px;
height: 50px;
background: yellow;
content: "后面";
display: block;
}
</style>
<body>
<div>content</div>
</body>
02.png
4.5、属性选择器
<style>
/*属性选择器
语法
element[attr=value]{
}*/
p[class="one"]{
color: red;
}
</style>
<body>
<p class="one">hello world</p>
</body>
4.6、选择器的优先级别
id>class>p
<style>
/*id>class>p*/
p{
color: red !important;
}
.one{
color: yellow;
}
#two{
color:green;
}
.child{
color: red;
}
.parent>.child{
color: blueviolet;
}
</style>
<body>
<p class="one" id="two">hello world</p>
<div class="parent">
<div class="child">child</div>
</div>
</body>
04.png
选择器嵌套的层次越深，权重高越
<style>
p{
color: red !important;
}
.one{
color: yellow;
}
#two{
color:green;
}
/*选择器的权重*/
.child{
color: red;
}
.parent>.child{
color: blueviolet;
}
</style>
<body>
<p class="one" id="two">hello world</p>
<div class="parent">
<div class="child">child</div>
</div>
</body>
09.png
03.png
网友评论