昨天学习的内容
1.盒子模型margin，padding的传参
margin：20px;//上下左右外边距都改变
margin：20px 10px;// 上下 左右改变
margin：20px 10px 10px;//上 右左 下 改变
margin ：20px 10px 10px 10px;//上 右 左 下改变
padding原理同上
2.html标签的分类
2.1 块标签：1.独占一行2.能够设置宽高（原因：display:block;）
如以下标签：div,h1~h6,p,ul,li,dl,dt,dd
2.2 内联标签:1.并排显示2.不能设置宽高(原因：display:inline;)3.不能设置margin-top,margin-bottom
如以下标签：a,span,em,strong
2.3内联块：1.并排显示2.可以设置宽高(原因：display:inline-block;)
如以下标签：button，img，input
注意：1.如何让内联元素和内联块元素水平居中
display:block;
margin-left:auto;
margin-right:auto;
2.如何让内联元素和内联块元素水平居中
给父级加text-align:cent
3.css选择器
定义:选定你所要改变的元素的一种方式。（相当于给它装修）
3.1分类
具体分类如下：
例子：
<p class="test" id="first">hello world</p>
<h4>标题</h4>
(1).css元素选择器
文档的元素就是最基本的选择器
p{color:pink}
(2).class选择器
.test{color:yellow}
(3).id选择器
#first{color:blue}
(4).分组选择器
p,h4{background:gray}
(5).后代选择器
div>span{} //选取div所有子元素为span的标签
(6).兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素
(7).伪类选择器
div:hover{}
input:focus{}
(8).伪元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
(9).属性选择
div[class='test']{}
3.2选择器的优先级别排序
<div class='test' id='first'>hello world</div>
元素选择器<class选择器<ID选择器<!important
div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
