1.盒子模型的传参
《1.1》margin
div{
width:100px;
height:100px;
background: red;
margin:100px 200px 300px;
}
--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(依次对应)
《1.2》padding
div{
width:100px;
height:100px;
background:red;
padding:10px 20px 30px;
}
//传一个参数 四个方向都改变
//传两个参数 第一参数top,bottom 第二个参数left,right
//传三个参数
第一个参数top 第一参数left,right 第三个参数bottom
//传四个参数 top,right,bottom,left
《1.3》文字起始位置
<style>
*{margin:0;padding:0}
div{
width:300px;
height:300px;
background:red;
padding:20px;
}
</style>
元素内容的起始位置,是基于它自身width,height的起始位置
《1.4》标签的分类
①块标签
h1,p,div,ul,li,dl,dt,dd
特点:独占一行，能设置宽高
<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>
②内联标签
特点:
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>
③内联块标签
input,img,button
特点:
1.并排显示
2.能设置width,height
<input type="text">
<img src="images/icon1.png" alt="">
<button>btn</button>
《1.5》让内联元素和内联块元素居中
{
display:block;
margin-left:auto;
margin-right:auto;
}
实例
span{
display: block;
margin-left: auto;
margin-right: auto;
background: red;
width:100px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
}
不改变内联和内联块的display属性 实现水平居中
实现方案:
parentElement{
text-align:center;
}
body{
text-align：center;
}
2.其他元素选择器
2.1分组选择器：同时选中多个元素标签
p,h1,div{
color:red;
}
2.2后代选择器
.parent>p{}-----选择parent所有直接指代的P元素
.parent p{}------选择parent之后所有P元素
.parent>p{
color:red;
}
或
.parent p{
color:red;
}
<div class="parent">
<p>hello world</p>
<p>hello world</p>
<div>
<p>hello world</p>
</div>
</div>
<div>
2.3兄弟选择器
div+p{} -->选中div之后的第一个p元素
div~p{} -->选中div之后的所有p元素
div+p{
color:red;
}
或
div~p{
color:yellow;
}
<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>
2.4针对输入框：伪类选择器
input:focus{
background: #ff2d51;
}
<body>
<input type="text">
</body>
2.5伪元素
伪元素-->用css自定义生产的元素
<style>
div:before{
width:100px;
height:100px;
background: red;
content:"前面";
display: block;
}
div:after{
content:"后面";
display: block;
width:100px;
height:50px;
background:yellow;
}
</style>
2.5属性选择器
语法
element[attr=value]{ }
[class="one"]{
color:red;
}
2.6选择器的优先级别
!important> id>class>p{}
p{
color:red !important;
}
.one{
color:yellow;
}
#two{
color:green;
}
<body>
<p class="one" id="two">hello world</p>
</body>
2.7选择器的权重
选择器嵌套的层次越深,那么权重越高
<style>
.child{
color:red;
}
.parent>.child{
color:green;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
最终显示绿色
网友评论