2018.07.11学习总结
1.盒子模型margin,padding的传参
1.1margin的传参
margin:0; //四个方向都改变
margin:0 10px; //上下为0px;左右为10px
margin:0 10px 20px; //上 0; 左右10px;下20px;
margin:0px 10px 20px 30px;//上右下左
//
margin传参.PNG
1.2padding的传参
padding传参.PNG
同理，padding也是这样的顺序
2.HTML标签的分类及特点
2.1块标签 div,h1~h6,p,ul,li,dl,dt,dd
1.独占一行
2.能够设置宽高
2.2内联标签 a,span,em,strong
1.并排显示
2.不能设置宽高
3.不能设置margin-top,margin-bottom
2.3内联块 button,img,input
1.并排显示
2.可以设置宽高
块级标签 内联标签 内联块.PNG
3.原理:
块标签：独占一行,能够设置宽高
div,h1~h6,p,ul,li,dl,dt,dd
display:block;
内联标签:并排显示,不能设置宽高,margin-top,margin-bottom
a,span,em,strong
display:inline
内联块:并排显示,可以设置宽高
button,img,input
display:inline-block
4.如何让内联元素和内联块元素水平居中
4.1第一种实现居中
display:block;
margin-left:auto;
margin-top:auto;
第一种实现居中.PNG
4.2第二种实现居中
给父级加text-align:center
第二种方式 居中.PNG
5.css选择器（除元素选择器 #id选择器 .class选择器 分组选择器外）
5.1.后代选择器
div>span{} //选取div所有子元素为span的标签
后代选择器.PNG
5.2.兄弟选择器
div+p{}选取紧邻div之后的第一个兄弟元素
div~p{}选取紧邻div之后的所有兄弟元素
兄弟选择器.PNG
5.3.伪类选择器
div:hover{}
input:focus{}
5.4.伪元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
伪元素选择器.PNG
5.5.属性选择
div[class='test']{}
6.选择器的优先级别排序
元素选择器<class选择器<ID选择器<!important
选择器的优先级.PNG
7.选择器的权重
选择器的权重.PNG
8.作业
<style>
*{margin:0;padding: 0}
.top{
text-align: center;
}
.nav{
background:#A2DBF9;
height:50px;
}
.nav-wrap{
margin-left: auto;
margin-right: auto;
height:50px;
width:1200px;
}
.nav-wrap a{
text-decoration: none;
color:white;
text-align: center;
display: block;
width: 100px;
line-height: 50px;
background-color:#01AEF0;
}
a:hover{
color:#425066;
}
.container{
width:1200px;
margin-left: auto;
margin-right: auto;
}
.container p{
margin-top: 20px;
margin-bottom:20px;
color:#333;
text-indent: 20px; /*首行缩进*/
}
.footer{
background-color:#01AEF0;
text-align: center;
line-height:30px;
}
</style>
</head>
<body>
<div class="top">
<img src="images2/logo2.png">;
</div>
<div class="nav">
<div class="nav-wrap">
<a href="#" >关于远大</a>
</div>
</div>
<div class="container">
<img src="images2/about.jpg">
<p>可「跳过」选择页面直接进入主页的按钮设置避免了功能的强制性，为用户提供了更多选择的自由。</p>
<p> 可「跳过」选择页面直接进入主页的按钮设置避免了功能的强制性，为用户提供了更多选择的自由。</p>
<p>可「跳过」选择页面直接进入主页的按钮设置避免了功能的强制性，为用户提供了更多选择的自由。</p>
</div>
<div class="footer">
<p><span>版权所有@xxxxxx</span><span>技术支持:xxxxxx</span></p>
<p>copyright@xxx</p>
</div>
</body>
</html>
今天上课时听的很好，可是做作业时不知如何将所学知识应用到具体的网页上，以后应该要加强理解，多思考，多实践。2018 07 11 19:15
