一.盒子模型
1.1
box-sizing:border-box;
————————给元素border，padding不会改变它的width，height
div{
width:200px;
height: 200px;
background: red；
box-sizing: border-box;
border:10px solid black;
padding:10px;
}
二.布局
1.1.方框中插入图片
<style>
div{
box-sizing:border-box;
}
.parent{
width:1000px;
margin-left: auto;
margin-right: auto;
background:white;
}
.parent>div{
/* display: inline-block;*/
float:left;
width:240px;
height: 300px;
border:1px solid #333;
}
.row:after{
content:"";
display:block;
clear:both;
}
.parent>.child{
margin-right: 13.3333px;
}
img{
margin-left: auto;
margin-right: auto;
display: block;
width:238px;
}
</style>
</head>
<body>
<div class="parent row">
<div class="child">
<img src="images/data_image.png"alt="">
</div>
<div class="child">
<img src="images/data_image.png"alt="">
</div>
<div class="child">
<img src="images/data_image.png"alt="">
</div>
<div></div>
<div></div>
</div>
</body>
</html>
font-size: 0；
当使用inline-block布局，给父元素font-size:0
.parent>div------使parent样式之后的所有div标签改变
.parent>.child-------使parent样式之后的所有child样式改变
三.导航条
1.1
.nav{
line-height: 50px;
background: red;
font-size: 0;
}
.nav a{
display:inline-block;
font-size: 16px;
width:100px;
vertical-align: bottom;
text-align: center;
text-decoration: none;
color:aliceblue;
}
a:hover{
background-color:pink;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">手机</a>
<a href="#">商城</a>
<a href="#">个人</a>
</div>
设置div标签，框出范围，再设置a标签样式
四.浮动
1.1
.one{
width:100px;
height: 100px;
background: red;
float:left;
*/
}
.two{
width:200px;
height: 200px;
background: blue;
float:right;
}
.three{
width:100px;
height:100px;
background: green;
float:left
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
float的原理是 整个页面漂浮起来，下面元素会被挤上去
/*clear:both; 清除float浮动影响
且如果多个元素都一起浮动，则多个元素处于并排显示
且如果前面元素没有清除浮动，则后面元素会受到前面的影响
五.继承
1.1
/*
父元素不设置高度，若子元素float，父元素的高度会坍塌
/*
如何让父元素重新获取高度
1 给父元素 overflow:hidden;
2 在浮动元素的后面添加一个元素，清除浮动clear：both；
3 给父元素一个公共样式
.row:after{
content:"";
display:table;
clear:both;
}
*/
.parent{
width:400px;
background: green;
overflow: hidden
}
.child{
width:200px;
height:200px;
background: red;
float: left;
}
.two{
width:400px;
height: 400px;
background: blue;
}
/* .three{
clear:both;
}*/
.row::after{
content:"";
display:table;
clear:both;
}
</style>
</head>
<body>
<div class="parent row">
<div class="child"></div>
若子元素浮动。可给子元素套一个父元素，即overflow: hidden;
六.用li标签制作导航nav
1.1
li{
float:left;
list-style: none;
width:100px;
text-align: center;
}
.row:after{
content: "";
display: table;
clear:both;
}
a{
display: block;
color:white;
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>
对ul标签进行设定，设置范围，在ul标签里设置li标签的样式大小
其中运用“布局”的知识。
网友评论