01盒子模型的传参
margin:100px; 四个方向全部改变
margin: 100px 200px; top-botton--100px; left-right--200px;
margin: 100px 200px 300px; top--100px;left-right--200px; bottom--300px;
margin: 100px 200px 300px 400px;
top right bottom left 按顺时针
<style>
div{
width: 100px;
height: 100px;
background: red;
margin: 100px 200px 300px;
}
</style>
02padding填充
padding
传一个参数 四个方向都改变
传两个参数 第一参数top,bottom 第二个参数left,right
传三个参数 第一个参数top 第一参数left,right 第三个参数bottom
传四个参数 top,right,bottom,left
<style>
div{
width: 100px;
height: 100px;
background: red;
padding: 10px 20px 30px;
}
</style>
03html
元素内容的起始位置，是基于自身width,height的起始位置
01.png
04标签的分类
<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>
h1,p,div,ul,li,dl,dt,dd 块标签
特点：1，独占一行 2，能设置width,height.
<a href="#">a</a><span>span</span><i>i</i><em>em</em><strong>strong</strong>
<br>
内联标签
特点： 1并排显示 2不能设置width,height 3不能设置margin-top,margin-bottom.
<input type="text">
<img src="images/icon1.png" alt="">
<button>btn</button>
内联块 ： input,img,button
特点：1并排显示 2能设置width,height
05 内联元素和内联块元素水平居中
{
display: block;
margin-left: auto;
margin-right: auto;
}
块标签默认 display:block;
内联默认 display:inline;
内联块默认 display:inline-block
06 水平居中
<style>
body{
text-align: center;
}
</style>
不改变内联和内联块的display属性 实现水平居中
方案 ：
parentElement{
text-align:center;
}
07选择器
<style>
/* p{
color:red;
} */
/* .one{
color:yellow;
} */
/* #two{
color:green;
} */
/* 伪类选择器 */
/* p:hover{
color:firebrick;
} */
/* 分组选择器 */
p,h1,div{
color:red;
}
</style>
body>
<p class="one" id="two">hello world</p>
<h1>h1</h1>
<div>div</div>
</body>
08后代选择器
<style>
/*.parent>p{} 亲儿子*/
/* .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>
</div>
<div>
<p>hello world</p>
</div>
</body>
09兄弟选择器
<style>
div+p{
color: red; --div+p{}选中div之后的第一个元素
}
div~p{
color: yellow; --div~p{} 选中div之后的所有元素
}
div~p{
color: yellow;
}
input:focus{
background: green;
}
伪类选择器： input:focus{}
</style>
</head>
<body>
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<input type="text">
</body>
10伪元素
02.png
伪元素-->用css自定义生产的元素
div:before{
content: "";
}
11属性选择器
<style>
/* 属性选择器
语法
element[attr=value]{
}
*/
p[class="one"]{
color: red;
}
</style>
<body>
<p class="one">hello world</p>
</body>
12选择器的优先级
<p class="one" id="two">hello world</p>
important>id>class>p
13选择器的权重
<style>
/*选择器嵌套层次的越深，权重越重*/
.child{
color: yellow;
}
.parent{
color: red;
}
</style>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
网友评论