今天学到了什么
1.盒子模型的传参(margin与padding 相同)
1.margin:100px; //传一个参数，四个方向都改变。
2.margin:100px 200ps; //传两个参数，第一个参数top，bottom , 第二个参数right,left
3.margin:100px 200px 300px //传三个参数，第一个参数top，第二个参数right,left , 第三个参数bottom
4.margin:100px 200px 300px 400px //传四个参数，top,right,bottom,left(顺时针 上右下左)
传一个参数.png
传两个参数.png
传三个参数.png
传四个参数.png
2.标签的分类
2.1 块标签
//常用的块标签
div,h1~h6,p,ul,li,dl,dt,dd
//特点
1.独占一行
2.能够设置width,height
2.2 内联标签
//常用的内联标签
<a href="#">a</a> <span>span</span> <em>em</em> <strong>strong</strong>
//特点
1.并排显示
2.不能设置宽高,margin-top,margin-bottom
2.3 内联块标签
//常用的内联块标签
button,img,input
//特点
1.并排显示
2.可以设置宽高
3.水平居中
3.1内联元素和内联块元素水平居中
{
display:block;
margin-left:auto;
margin-right:auot;
}
块标签默认 display:block; //能独占一行
内联默认 display:inline; //能并排显示
内联块默认 display:inline-block; //独占一行，并排显示
3.2不改变内联和内联块的display属性 实现水平居中
实现方案:
parentElement(父元素)
{
text-align:center;
}
4.选择器
4.1 css元素选择器
p{
color:pink
}
4.2 class选择器
.test{
color:yellow}
4.3 id选择器
#first{
color:blue }
4.4 分组选择器
p,h4{
background:gray}
4.5 后代选择器
div>span{} 选取div所有子元素（直接后代）为span的标签
div span{} 选中div之后的所有span元素
4.6 兄弟选择器
div+p{} 选取紧邻div之后的第一个兄弟p元素
div~p{} 选取紧邻div之后的所有兄弟p元素
4.7 伪类选择器
div{
width: 100px;
height: 100px;
background: green;
}
原图.png
div:hover{
background-color：red； } 鼠标经过div时，div变为红色
div变红.png
input:focus{
color：blue； } 鼠标在文本框中时，文本框变为蓝色
文本框变色.png
4.8 属性选择器
div[class='test']{}
5.选择器的优先级别
元素选择器<class选择器<ID选择器<!important
<style>
p{
color: red;
}
.one{
color: yellow;
}
#two{
color:blue;
}
</style>
</head>
<body>
<p class="one" id="two">hello world</p>
</body>
选择器优先级别.png
6.选择器的权重
选择器嵌套的层次越深，则权重越高
<style>
.child{
color: red;
}
.parent>.child{
color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
child
</div>
</div>
</body>
选择器的权重.png
7.伪元素
伪元素-->用css自定义生产的元素
div:before{ //div最前面
content:""
}
div:after{
content:"" //div最后面
}
div:before{
width: 50px;
height: 50px;
background: red;
content: "前面";
display: block;
}
div:after{
content: "后面";
display: block;
width: 50px;
height: 50px;
background: blue;
}
伪元素.png
今天还有什么不会
网友评论