day04

A.今天掌握了什么

1.css盒子模型

1.1box-sizing:border-box

image.png

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

box-sizing：content-box(默认清晰)

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

//html

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

1.2实现元素居中

display:block
margin-left:auto;margin-right:auto;
       

2.浮动

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

>#####2.1如何清除浮动

（1）给下面的兄弟元素给clear：both
//html


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

（2）给父级加overflow:hidden
//html


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

（3）用伪元素，给父级内容生成
.row:before{display:table;content"  "}
.row:after{display:table;content:"  "
clear:both}
//html


//css
.two{
           width:100px;
           height:100px;
           background:red;
           float:left;
       }
       /*子级float，父级有高度，如何让父级有高度*/
 .one{
            overflow:hidden；
            width：200px;
            background:yellow;
       } 
.one,two:ofter{content:“”;
               display:table;
               cear:both;
       }

3.定位

postion:absolute/relative
(1)relative
相对元素的定位是相对其正常位置

position：relative
(2)basolute
绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，那么他的位置相当于
//html



//css
*{margin:0px;padding:0px;}
/*相对定位：就是元素在页面上的位置*/
.one
       {margin-left:100px;
        width:100px；
        height:100px;
        background-color:red
       }
  .two
       {width:50px;
        height:50px;
        background-color:yellow;
        position:absolute;
        left:0;
       }

都通过left,top,right,bottom移动

z-index:设置元素的堆积顺序  给position:absolute绝对定位的元素
例子：搜索框
input当子元素没有设置宽度，如果设置了绝对定位，他不会继承父元素的宽度

4.布局方式的总结

1、默认布局
2、浮动布局（左右安置）
层级布局（定位）

5.实现元素的垂直居中

父元素设置parent{position:relative}

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

6.css样式的几种引入方式

外部样式

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

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