day04 盒子模型 + 居中 + 浮动 + 定位 + z-index

A今天我学到了什么

1 盒子模型

1.1 box-sizing:border-box

当设置box-sizing:border-box; 时,
设置padding,和border,div的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
当设置padding和border时宽度会发生改变
总宽度=width+border+padding

div{
            border:10px solid #333;
            padding:20px;
            box-sizing: border-box;
            width:100px;
            height:100px;
            background-color: red;
        }

1.2 实现元素居中

margin-left:auto;margin-right:auto;

2 浮动float

2.1 float：left | right 可以让元素并排显示

    
手机
    
电视
    
平板

     li{float: left}

3 清除浮动

3.1 给下面的兄弟元素设置 clear:both;

 .one{
            width:100px;
            height:50px;
            background-color: red;
            float: left;
        }
        .two{
            clear: both;
            width:200px;
            height:50px;
            background-color: yellow;
        }

3.2 给父级加 overflow:hidden;

  .one{
            width:100px;
            height:100px;
            background:red;
            float: left;
        }
        /*子级float,父级没有高度，如何让父级有高度*/
        .parent{
            overflow: hidden;
            width:200px;
            background:yellow;
         }

3.3 父级后面增加伪元素

.row:after{ content:””；display:table; clear:both;}

.one{
            width:100px;
            height:100px;
            background:red;
            float: left;
        }
        /*子级float,父级没有高度，如何让父级有高度*/
        .parent{
            /*overflow: hidden;*/
            width:200px;
            background:yellow;
                  }
        .parent:after{
            content:"";
            display: table;
            clear:both;
        }

4 定位：posintion

4.1 position:absolute | relative

position:relative(相对定位）
//相对定位元素的定位是相对其正常位置。
position:absolute (绝对定位）
//绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对；
通过设置 top,right,bottom 移动
没有设置已定位的父元素，position:absolute 通过left移动
   *{margin:0;padding:0}
        /*相对定位:就是元素在页面上正常的位置*/
        .one{
            margin-left:100px;
            width:100px;
            height:100px;
            background-color: red;
        }
        .two{
            width:50px;
            height:50px;
            background-color: yellow;
            position: absolute;
            left:0;
           }

利用float和display实现导航
li{float: left}
        a{
            text-decoration: none;
            display: block;
            width: 150px;
            height: 50px;
            background-color: red;
        }
        ul{
            list-style: none;
            background-color: chartreuse;
            text-align: center;
            line-height: 50px;
        }
        ul:after{
            content: "";
            display: table;
            clear: both;
        }
        a:hover{
            background-color: aquamarine;
        }

4.2 z-index

z-index:设置元素的堆叠顺序 
堆叠必须必须在父级上!!!!!
给position:absolute绝对定位的元素
  /*z-index:可以给绝对定位的元素，设置它们的堆叠顺序*/
      


    

    

4.3 用position实现搜索框

div{
            margin: 100px;
            width: 300px;
            position: absolute;
        }
        input{
            width: 300px;
            height: 30px;
            background-color: #eeeeee;
            border-radius: 15px;
            border: none;
            outline: none;
            padding-left: 10px;
        }
        button{
            width: 23px;
            height: 22px;
            background-image: url("images/icon4.png");
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -11px;
            border: none;
            outline: none;
        }

4.4 布局方式的总结

1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)

5 实现元素的垂直水平居中

 .box{
            width: 500px;
            height: 500px;
            background-color: red;
            position: relative;
        }
        .one{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }

6 CSS样式的几种引入方式

6.1 外部样式

6.2 内部样式表（位于 标签内部）

6.3 内联样式（在 HTML 元素内部）

hello world

样式的优先级
内联样式 > 内部样式 > 外部样式
以后统一使用外联样式