今天学到了什么
1.盒子模型
box-sizing:border-box
给元素border,padding不会改变它 的width,height
div{
width: 200px;
height: 200px;
background: #ff2d51;
box-sizing: border-box;
border: 10px solid black;
padding:10px;
}
![](https://img.haomeiwen.com/i13085787/59fae540236a9b26.png)
2.浮动
2.1 浮动
float的原理:相对于整个页面漂浮起来
<style>
*{margin: 0;padding: 0;}
.one{
width: 100px;
height: 100px;
background: red;
float: left;
}
.two{
width: 200px;
height: 200px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
![](https://img.haomeiwen.com/i13085787/4d0e5f0f4001ed3a.png)
2.2 清除浮动
在.two{}中加
clear:both;
![](https://img.haomeiwen.com/i13085787/5ee33de8d80f0af5.png)
2.3 float和父元素
2.3.1
父元素不设置高度,子元素float,父元素的高度会坍塌
2.3.2
如何让父元素重新获取高度
1.给父元素 overflow:hidden;
2.float元素的后面添加一个元素,同时clear
3.给父元素公共样式row
.row:after{
content:"";
display:table;
clear:both;
}
style{
.row:after{
content:"";
display:table;
clear:both;
}
.parent{
width: 400px;
background: red;
}
.child{
width: 200px;
height: 200px;
background: blue;
float: left;
}
.one{
width: 400px;
height: 400px;
background: pink;
}
</style>
</head>
<body>
<div class="parent row">
<div class="child"></div>
<div class="three"></div>
</div>
<div class="one"></div>
</body>
![](https://img.haomeiwen.com/i13085787/df8e58e569e93b2c.png)
3.导航
<style>
*{margin: 0;padding: 0;}
.row:after{
content: "";
display: block;
clear: both;
}
li{
float: left;
list-style: none;
width: 100px;
text-align: center;
}
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>
![](https://img.haomeiwen.com/i13085787/21d94dacabaf66ee.png)
今天没学到什么
网友评论