今天学习的东西
1.盒子模型
box-sizing:border-box;//设置padding：和border：的值，它的宽度还是会保持不变
box-sizing:content-box;//(默认设置)
当设置padding:和border:值时，宽度会发生改变
2.浮动float（实现元素并排展示）
2.1如何清除浮动：三种
给下面的兄弟元素:clear:both;
给父级加overflow：hidden；
用伪元素，给父级内容生成：
.row:before{
dispay:table;
content:"";}
.row:after{
display:table;
content:””
clear:both
}//如果前面的元素float,后面的元素没有清除float就会受前面float的影响
3.定位
position:absolute|relative//绝对定位，相对定位，传参：left,top,right,bottom,px
4.布局方式的总结
1.table表格布局
2.float + margin布局
3.inline-block布局
4.flexbox布局
5.实现元素的垂直水平居中
parent{
position:relative;
}//父元素设置
6.导航栏的设置
<a href="网址">百度</a>
.nav{
font-size:0;
}
.nav a{
display:inline-block;
//inline-block实现导航，同时给父元素设置font-size:0
//一般正规用ul来设置导航栏
<style>
*{margin:0px;padding:0px;}
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>
7.float和父元素
//父元素不设置高度，子元素float,父元素的高度会坍塌（本来是子继父的高度）:
如何让父元素重新获取高度1.给父元素overflow:hidden;2.给父元素公共样式row;
.row:after{
content:"";
display:table;
clear:both;
}
8.设置浮动div
<head>
<style>
*{margin:0px;padding:0px}
.parent{
width:1000px;
background:#333;
magrin-left:center;
magrin-right:center;}//总的大盒子
.parent>div{
width:240px;
height:300px;
border:1px solid #333;
float:left;
}//大盒子里面的小盒子
.row:after{
content:"";
display:block;
clear:both;
}//设置伪元素清除float
.parent>.child{
magrin-right:13.333px;
}//设置盒子的右边距
</style>
</head>
body{
<div class="parent row">
<div child></div>
<div child></div>
<div child></div>
<div></div>
</div>
}
网友评论