今天我学到了什么
一.html标签的分类
1.1 块标签：div，p, h1-h6, ul,li,dl,dt,dd .默认 display:block 特点 1.独占一行
2.能够设置width,height
1.2 内联标签：a,span,i,em,strong 默认 display:inline 特点1.并排显示
2.不能够设置width,height
3.不能设置margin-top,margin-bottom
1.3 内联块标签：img,input,button 默认 display:inline-block 特点 1.并排显示
2.能够设置width,height
二.水平居中
分别举例
2 给父级加text-align:center
//HTML
<div>
<span>span</span> <br/>
<button>btn</button>
</div>
//css
<style>
div{
text-align:center
}
</style>
三 选择器
分组选择器：//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
color:pink;
}
后代选择器：//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
//css
div>p{
color:pink;
}div>p //选取div所有[子元素](//www.greatytc.com/p/66e6df4b3542)为p的标签；//css
div p{
color:red;
}div p //选取div之后的所有元素
兄弟选择器://HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
//css
div+p{
color:red;
}div+p //选中div之后的第一个p元素
//css
div~p{
color:red;
}div~p //选中div之后的所有p元素
伪元素://HTML
<p>hello world</p>
//css
p:before{
content:"我是前面";
display:block;
}
p:after{
content:"我是后面";
display:block;
}
属性选择器(了解)://HTML
<p class="one">hello world</p>
//css
<style>
p[class="one"]{
color:red;
}
</style>
今天我掌握了什么
1 块标签分类
块标签
div,p,h1~h6,ul,li,dl,dt,dd
//默认的display
display:block
1.独占一行
2.能设置width、height
2内联标签分类
内联标签
a,span,i,em,strong
//默认的display
display:inline
1.并排显示
2.不能设置width、height
3.不能设置margin-top,margin-bottom
3内联块标签分类
img,input,button
//默认的display
display:inline-block
1.并排显示
2.能设置width、height
2怎么水平居中
display:block
//HTML
<span>span</span> <br/>
<button>btn</button>
//css
<style>
span,button{
display:block;
width:100px;
margin-left:auto;
margin-right:auto;
}
</style>
给父级加text-align:center
//HTML
<div>
<span>span</span> <br/>
<button>btn</button>
</div>
//css
<style>
div{
text-align:center
}
</style>
3选择器
伪类选择器hover,focus
//HTML
<input type="text"/>
<p>hello world</p>
//css
input:focus{
background-color:red;
}
p:hover{
color:pink;
}
分组选择器
//HTML
<div>div</div>
<span>span</span>
<p>hello world</p>
//css
div,span,p{
color:pink;
}
后代选择器//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
div>p //选取div所有[子元素](//www.greatytc.com/p/66e6df4b3542)为p的标签
//css
div>p{
color:pink;
}
div p //选取div之后的所有元素
//css
div p{
color:red;
}
兄弟选择器
//HTML
<div>div</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
div+p //选中div之后的第一个p元素
//css
div+p{
color:red;
}
div~p //选中div之后的所有p元素
//css
div~p{
color:red;
}
我今天没掌握什么
后代选择器//HTML
<div>
<p>hello world</p>
<p>hello world</p>
<ul>
<li><p>hello world</p></li>
<li><p>hello world</p></li>
</ul>
</div>
div>p //选取div所有[子元素](//www.greatytc.com/p/66e6df4b3542)为p的标签
//css
div>p{
color:pink;
}
div p //选取div之后的所有元素
//css
div p{
color:red;
} 不是很清楚
