知识点四

1、css盒子模型

1.1:box-sizing:border-box

当设置box-sizing:border-box时;
设置padding,和border,它的宽度还是会保持不变

//HTML

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

box-sizing:content-box;(默认清晰)
//没有图像，

当设置padding和border时宽度会发生改变
总宽度=width+border+padding

1.2实现元素居中

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

2、浮动float

float：left/right/top/bottom
//目的：为了让元素并排显示

//HTML

    
手机
    
电视
    
平板

//CSS
 *{margin:0;padding:0}
        li{float: left}

3、如何清除浮动

（1）给下面的兄弟元素给clear:both;

//HTML


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

（2）给父级加overflow:hidden;

//HTML

    


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

（3）用伪元素,给父级内容生成

.row:before{ display:table; content:”” }

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

//HTML

    


//css
  .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.1position:absolute | relative

position:relative(相对定位）
//相对定位元素的定位是相对其正常位置。

position:absolute (绝对定位）
//绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相对；

position:absolute | relative都position:absolute ,top,right,bottom移动

没有设置已定位的父元素，position:absolute 通过left移动
//HTML

    
 

//css
   *{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实现导航
//HTML

手机
平板
电脑

//CSS
 *{
margin:0;
   padding:0;
}
 a{
  text-decoration: none;
   display: block;
   color:white;
}
 ul{
     list-style: none;
     overflow: hidden;
     background:pink
}
  li{
float:left;
line-height: 50px; 
width:100px;
text-align:center;
}
 a:hover{
color:gainsboro;
background-color: deeppink;
}

4.2 z-index

z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素

//HTML

    
 
    


//CSS
  /*z-index:可以给绝对定位的元素，设置它们的堆叠顺序*/
        .parent{
            width:300px;
            height:300px;
            background-color: red;
            position: relative;
        }
        .one{
            z-index: 100;
            position: absolute;
            width:100px;
            height:50px;
            background-color: green;
        }
        .two{
            z-index:90;
            position: absolute;
            width:50px;
            height:50px;
            background-color: pink;
        }
        .parent:hover .one{
            z-index: 80;
        }

4.3例子:用position实现搜索框

//***当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度

//HTML
div class="center">
    
    

//CSS *{margin:0;padding: 0;} div{ width:250px;height:40px;margin-top:15px; position:relative; } input{ box-sizing: border-box; width:250px; outline: none; padding-left:20px; height: 38px; font-size: 14px; border: 1px solid #eee; border-radius: 40px; background: #eee; } a{ cursor: pointer; width:24px; height:24px; display: block;position:absolute;top:9px;right:5px; background:url(images/icon4.png) no-repeat } input:focus div{width:300px;}

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

父元素设置parent{position:relative;}

子元素设置child{
position:absolute;
left:50%;
top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}

//HTML





//CSS
   *{
            margin:0;
            padding:0}
        .one{
            width: 500px;
            height: 500px;
            background-color: green;
            position:relative}
        .two{
            width :100px;
            height:100px;
            background: red ;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-50px;
            margin-top:-50px;
        }

6、CSS样式的几种引入方式

外部样式

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

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

hello world

给同一选择器设置同一样式,离元素近的样式设置方式优先级高