css学习3

css学习3

box-sizing

作用：重新制定元素框模型的计算方式
元素边框内占地区域 = 左右内边距 + width
取值：
border-box: 对盒子的占地区域进行了重新计算 设置了width和height的值包含了内容+内边距+边框

普通流

行级元素 不独占一行  块级元素独占一行

浮动流

1.文字环绕
2.块级元素横向排列
关键字：
    float   ---->  浮动
            取值:  left    right
    left   左浮动   right  右浮动

浮动概述

如果将元素设置为浮动之后那么它将具备以下几个特点：
        1.浮动元素会被排除在文档流之外，（脱离文档流）元素是不占有之前的页面空间，其他元素会上前补位
        2.浮动元素会停靠在父元素的左边或右边，或者停留在其他已经浮动的元素的边上
        3.浮动元素只会在当前行内浮动。
        4.浮动元素拥有浮动功能之后依然还存在于父级元素中，只是飘起来了。
        5.浮动处理----让多个块元素合成一排。

清除浮动

清除浮动并不是说把某一个元素的浮动效果清除掉
而是取消上面元素给自己带来的影响
clear  
        left
        right

浮动引发的特殊效果

1.父元素的宽度显示不是所有已浮动元素最后一个元素将被强制换行（卡主）
2.元素一旦浮动起来之后宽度就会变成自适应（非人为制定的情况下）
3.元素一旦浮动起来那么将会变成块级元素，尤其对行级元素影响最大
4.文本和行内元素会进行文字环绕的方式进行排列

浮动元素对父级元素带来的影响

由于浮动元素脱离文档流的所以会导致元素不占有父级元素的空间，那么他会给父级元素带来影响
解决方案
    1.直接给父级设置高度
    弊端：必须要知道父级元素的准确高度
    2.父级浮动
    弊端：对后续元素有影响，父级的margin 0 auto 失效
    3.为父级父元素添加  overflow:hidden或者auto
    弊端： 元素一旦溢出就出被跟着影藏
    4.在父级元素里面追加一个空元素  并设置为 clear：both