今天学到了什么？
一、盒子模型
有些时候我们需要padding但不希望齐元素大小发生改变，这个时候需要给元素设置box-sizing:border-box属性。
box-sizing:border-box//给元素border,padding不会改变它的width,height
二、inline-block布局
使用nline-block可以使块级元素在同一行显示
<style>
*{margin: 0;padding: 0;}
.nav{
text-align: center;
background-color: #ff416d;
height: 50px;
font-size: 0;
}
.nav a{
display:inline-block;
width: 100px;
line-height: 50px;
text-align: center;
color: white;
font-size: 14px;
text-decoration: none;
}
.nav a:hover{
background-color: pink;
}
</style>
效果如下：
02.png
三、浮动float
1.可以使块级标签再同一行显示
float:left//强制使标签靠左
float:right//强制使标签靠右
2.如果前面的元素float,后面的元素没有清除float,那么就会受到前面元素的影响
四、float和父级标签
<style>
*{margin: 0;padding: 0;}
/*
父元素不设置高度，子元素float，父元素的高度会坍塌
1.使用overflow: hidden;属性可以重新获取子元素的高度。
2.使用clear：both清除浮动。
3.使用一个公用的样式row清除浮动。
*/
.parent{
width: 200px;
background-color: red;
border: 1px solid #000;
}
.child{
height:200px;
width: 100px;
float: left;
background-color: blue;
}
.row::after{
content: "";
display: table;
clear: both;
}
</style>
五、快速实现导航
1.inline-block实现导航
:给父元素font-size:0;
<style>
*{margin:0;padding:0}
.nav{
line-height: 50px;
background:deeppink;
font-size: 0;
height:50px;
}
.nav a{
color:#fff;
text-decoration: none;
display: inline-block;
font-size: 14px;
width:100px;
text-align: center;
}
a:hover{
background-color: pink;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">手机</a>
<a href="#">平板</a>
<a href="#">电脑</a>
</div>
</body>
2.使用ul-li方式实现导航
<style>
*{margin:0;padding:0}
li{float:left;list-style: none;width:100px;text-align: center}
.row:after{
content:"";
display: block;
clear:both;
}
a{
display: block;color:#fff;text-decoration: none;
}
ul{
line-height: 50px;
background:deeppink;
}
a:hover{
background: pink;
}
</style>
</head>
<body>
<ul class="row">
<li><a href="#">手机</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">电脑</a></li>
</ul>
</body>
今天没掌握的知识
网友评论