前端学习基础第五天

零散注意知识点

当一个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>