一.css样式中的属性
1.1.盒子模型的传参
<style>
<div>
width:40px;
height:40px;
background-color:red;
margin:20px 30px 40px 50px;
<style>
margin传递的参数：
1——传递两个参数，先上下后左右；
2——传递三个参数，先上，左右，后下；
3——传递四个参数，先上，再右，再下，后左；
1.2.padding的传参
div{
width:100px;
height:100px;
background:red;
padding:10px 20px 30px;
border:1px solid #333; /*对padding填充的修饰设置
}
padding 传递一个参数，四面都被改变
传递两个参数，先上下，后左右
传递三个参数，上，左右，下
传递四个参数，上，右，下，左；
二.标签分类
1.1.块标签
<h1>h1</h1>
<p>p</p>
<ul>
<li>12</li>
<li>2</li>
</ul>
<dl>
<dt>dt</dt>
<dd>dd</dd>
</dl>
<div>div</div>
其 h1 p div ul li dl dt dd ——块标签
特点：独占一行 能设置宽高
且 只有块标签可以实现元素居中（margin-right margin-left）
1.2.内联标签
<a href="#">a</a>
<span> </span>
<i>i</i>
<em>em</em>
<strong>strong</strong>
内联标签
特点：并排显示 不能设置宽高 不能设置
margin-top
margin-bottom
1.3.内联块
<input type="text">
<img src="images/icon1.png"alt="">
<button>btn</button>
内联块
input img button
特点 并排显示 能设置宽高
1.4.内联标签，内联块的居中
span{
display: block;
margin-right: auto;
margin-left: auto;
background: red;
width:100px;
}
内联元素和内联块元素水平居中（此方法将内联标签转化为块标签）
display: block;
margin-right: auto;
margin-left: auto;
块标签默认 display：block；
内联标签默认 display:inline;
内联块默认 display:inline-block;
<style>
body{
text-align: center;
}
</style>
此方法可不改变内联标签和内联块的display属性 实现水平居中
三.选择器
1.1.兄弟选择器
div+p{
color:red;
}
div~p{
color:red;
}
<body>
<div>div</div>
<p>hellow</p>
<p>hellow</p>
<p>hellow</p>
<p>hellow</p>
<input type="text">
</body>
兄弟选择器
div+p{} 选择div之后的第一个p元素
div~p{} 选中di之后的所有的p元素
1.2.分组选择器
<style>
p,h1,div{
color:red;
}
</style>
</head>
<body>
<p>hellow world</p>
<h1>h1</h1>
<div>div</div>
</body>
1.3.后代选择器
.parent>p{
color:red;
}
</style>
</head>
<body>
<div class="parent">
<p>hellow </p>
<p>hellow</p>
<div>
<p>hellow</p>
</div>
</div>
</body>
.parent>p{} 亲儿子 选择parent之后的所有p元素
1.4.属性选择器
p[class="one"]{
color:red;
}
</style>
</head>
<body>
<p class="one">
hellow
</p>
</body>
1.5.选择器的优先级排列
p{
color:red !important;
}
.one{
color:yellow;
}
#two{
color:green;
}
</style>
</head>
<body>
<p class="one" id="two">hello world</p>
</body>
排列： ! important > id> class > p{ }
1.6.选择器的权重
*/
.child{
color:red;
}
.parent{
color:green;
}
</style>
</head>
<body>
<div class="parent">——————嵌套层次较浅
<div class="child">child</div>——————嵌套层次较深
</div>
</body>
嵌套层次深的权重比较重，优先调用
网友评论