04.17

一.css元素浮动
元素水平浮动
子元素在默认情况会自动撑开父元素
元素水平浮动 left right
元素在浮动之后会脱离文档流 就不占位置

子元素浮动，父元素撑不开 怎么处理
1.给父元素设置固定高
2.给父元素设置 超出部分隐藏 overflow: hidden;
3.在父元素内部设置一个空的div <div style=" clear: left;"></div>
父元素底下的兄弟元素，里面的内容会受上边浮动的隐藏
1.面的第三种方案解决 <div style=" clear: left;"></div> 在自己内部写
2.在兄弟元素样式里面写清除浮动（clear: both;） 在兄弟元素内的style写

<div class="a">
    <div class="a1"></div>
    <div class="a2">
        <div class="c3">hello</div>
        <div class="c4">hi</div>
        <div style=" clear: left;"></div>
    </div>

</div>
<div class="b"><span>我是文本</span></div>
 <style>
        .a {
            border: 1px solid red;
            /*overflow: hidden;*/

        }

        .a1 {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background: blue;
            float: left;
        }

        .a2 {
            width: 100px;
            height: 100px;
            border: 1px solid green;
            background: green;
            float: left;
        }

        .a2 > div {
            float: inherit; /*浮动方式与父文本一致*/
            width: 50%; /*一人占父元素的一半*/
        }

        .b {
            clear: both;
            height: 100px;
            background-color: greenyellow;
        }

    </style>

二.伪类 类似鼠标操作
:hover 鼠标悬停伪类
:active 激活伪类
:visited 访问之后的伪类
:link 访问之前的伪类
<style> a:link{color: red;} a:hover{color: blue;} a:active{color: black;} a:visited{color: yellow;} </style>

三.元素分为行元素 块元素（默认宽度100%）
块元素默认换行，转成行元素让其不换行
他们之间的相互转化问题：
1.块元素转化行元素 display: inline;
块元素转化行级块 display: inline-block;
2.行元素转化块元素 display:block
行元素转化行级块 display: inline-block;

元素在转化为行级块的时候默认有间隙（大概五个像素）
去除间隙的方法：给父元素设置字体大小为0，再给子元素设置字体大小

四.元素显示隐藏
display:block; 显示，同时元素自动转换成块元素
display:none; 隐藏

五.元素的定位
定位有 absolute绝对定位 relative相对定位 fixed固定定位

元素默认在文档流上占位置，文档流默认层0

元素在定位之后可以多使用5个属性 zindex 分层 left right bottom top（距离顶部）

1.relative: 给元素设置相对定位 占位置 默认位置不变 相对自身的位置进行左上右下移动以及分层
2.absolute: 给元素设置绝对定位 元素脱离文档流 不占位置 默认相对于浏览器页面左上右下移动
如果让子元素相对父元素绝对定位，给父元素设置相对定位，子元素就在会在父元素的内部上下左右移动以及分层，否则在整个浏览器页面移动
3.fixed ： 固定定位 元素脱离文档流 设置上下左右之后，当滑动滚动条时位置固定不变
注意：
1.元素绝对定位或者固定定位没有宽和高 需要自己设置
2.元素在绝对定位或者固定定位的初始位置，得看前面有没有元素占位置，有则默认位置在这个元素的下边（自己就看不到），需要自己输入调整；没有就默认左上角

<div class="a">
    <div class="a1"></div>
    <div class="a2"></div>
</div>
<div class="b"></div>
<div class="c"></div>
<style>
        .a{
            position: relative;
            border: 1px solid #000;
        }
        .a1{
            position: absolute;
            left: 10px;
            bottom: 10px;
            z-index: 1;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .a2{
            width: 200px;
            height: 200px;
            background-color:blue;
        }

        .b{
            height: 1000px;/*撑出浏览器滚动条*/
        }
        .c{
            position: fixed;
            z-index: 999999;
            right: 10px;
            top: 100px;
            width: 50px;
            height: 200px;
            border: 1px solid #000;
            background-color: #000;
        }
    </style>

六.盒子模型
css盒子模型
所有的元素都可以看做盒子 用来设计或者布局的时候用
1.元素设置行级块的时候 水平的和垂直的元素之间的外边距都是累加的
2.子元素全部浮动的时候 元素之间的外边距也是累加的
3.正常默认情况元素上下外边距不会累加 而是走最大值

如果想设置内间距又不撑开，让元素边框和内间距向盒子内部走 box-sizing: border-box
margin属性复合写法(外边距)
margin: auto;浏览器帮助计算外边距
margin: 10px 20px 30px 40px;外边距上10右20下30左40
margin: 10px 20px 30px;外边距上10右20下30左20
margin: 10px 20px;外边距上下10左右20
margin: 10px;上下左右10
padding属性复合写法（内边距）
padding: 10px 20px 30px 40px;内边距上10右20下30左40
padding: 10px 20px 30px;内边距上10右20下30左20
padding: 10px 20px;内边距上下10左右20