零散注意知识点
当一个div盒子出现margin-bottom和下一个div 盒子有margin-top同时存在的时候,会发生合并。只保留最大的那个margin。
.top1,.top2{
width: 300px;
height: 200px;
margin: 0px auto 20px;
background-color: #ffb300;
}
.top2 {
margin: 50px auto;
background-color: #b3d4fc;
}
<div class="top1">第一个</div> /*两个盒子的margin是50px */
<div class="top2">第二个</div>
当块级标签下的子标签没有设置宽度的时候,会继承父级标签的宽度。在这里设置padding不会影响盒子的大小,也就是说不会将盒子撑大。
.nav{
/*当出现margin-bottom和下一个盒子的margin-top 有值的情况会发生合并，只保留最大的那个值*/
/*margin:0 auto;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0px auto 50px;
height: 50px;
width: 80%;
background-color: #cccccc;
text-align: center;
}
.nav li{
/*由于li没有指定宽度,所以width从父级里面继承过来，在这里设置padding不会影响盒子的大小。*/
padding-left: 30px;
list-style: none;
text-align: left;
}
<div class="nav">看江山
<li>
今日新闻
</li>
</div>
当子标签和父标签margin-top为0的时候,在子标签设置margin-top可能会出现将父标签盒子也往下拉的情况,解决方法有以下三种。
/*padding-top: 1px;*/ 使用内边距来实现。
/*border-top: 1px solid brown;*/ 给父级标签加个borde上r边界。
/*overflow: hidden;*/ 将溢出设置为隐藏。
浮动样式
浮动包括左浮动和右浮动，浮动有三个特性,浮起来，不占位置，需要和父级标签联合使用。其中浮动的主要目的就是让div 块级标签 在一行显示,因此浮动具有了什么特性?就是inline-block的属性， 它会 将块级标签 或者是行内标签 、转化为行内块标签 。
float: right;
float: left;
阴影样式
box-shadow: 0px 15px 15px 0px #555555 ; /* 水平阴影 垂直阴影 模糊距离 阴影尺寸 颜色 inset为内部阴影 默认是外部阴影 前面两个参数必须拥有的且可以为负值*/
圆角边界
border-radius: 15px 20px 25px 20px; /*左上角 右上角 右下角 左下角 */类似于上右下左 以左上角和右下角的对角线为衡量标准。
一个值就是四个都是,两个值就是左上角和右下角为第一个参数,右上角和左下角为第二参数.
三个值就是第一个是左上角 第二个代表右上角和左下角,第三个是右下角。
版心布局
练习
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第三种版心布局平均分布</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.banner,.main_top,.main_bottom{
width: 958px;
background-color: #f8f6f1;
border: 1px dashed #666666;
margin: 10px auto 0px;
}
.banner{
height: 150px;
}
.main_top{
height: 120px;
border: none;
}
.main_bottom{
height: 200px;
border: none;
}
.top{
width: 80%;
height: 40px;
margin: 0px auto;
text-align: center;
background-color: #999999;
}
.footer{
width: 80%;
height: 45px;
background-color: #555555;
margin: 10px auto 0px;
}
.main_top li,.main_bottom li{
width: 24%;
list-style: none;
float: left;
margin-right: 10.5px;
border: 1px dashed #00aaee;
/*background-color: red;*/
background-color: #cccccc;
}
.main_top li{
height: 120px;
}
.main_bottom li{
height: 200px;
}
.main_top .lista,.main_bottom .listb{
float: right;
margin-right: 0px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="main_top">
<ul>
<li ></li>
<li ></li>
<li ></li>
<li class="lista"></li>
</ul>
</div>
<div class="main_bottom">
<ul>
<li></li>
<li ></li>
<li></li>
<li class="listb"></li>
</ul>
</div>
<div class="footer"></div>
</body>
</html>l>