第一阶段——day05

day04 盒模型

盒模型组成: 有效内容(width,height) ，内边距 padding ,外边距margin ,边框 border

独立 盒子 ：位置移动 ， 内部与边框的距离

width,height 必备 width,height px 100% 以父元素的宽度作为参考

padding: 有效内容与边框的距离 撑开盒子 （内减）

margin: 移动盒子 设置盒子与盒子之间的距离

border: 分界线 1px 撑开盒子 （内减）

三角

div {
    width:0;
    height:0;
    border-top:10px solid  red;
    border-left:10px solid  transparent;
    border-right:10px solid  transparent;
    border-bottom:10px solid  transparent;
}

display:inline-block 并排

缺点： 盒子转换为行内块元素 —》 （1）中间有间隙 （2）文本对齐 盒子高低对不齐—》咱们不用做并排 ----》用浮动

day05 浮动

作用： 实现盒子并排 （盒子可以是行内 ，行内块，块级）

属性名: float

属性值: left 左浮动 / right 右浮动 /none;不浮动

并排：

(1)请给每一个并排的盒子都加浮动属性

影响：

浮动元素 —》脱离的标准流 不占据位置 （浮动元素不参与高度计算）—》浮在界面上 —》 父盒子高度塌陷 （没有了）—》标准元素会上移

解决：

1: 给父盒子定高

缺点： 不实际 一般不能设置固定高度

2： 从规则入手 BFC 规则 overflow:hidden (私人领域)

BFC说了： 只要是BFC盒子 ，浮动元素都会参与高度计算

给父元素 加 overflow:hidden (把父盒子变成BFC盒子 —》参与高度计算)

缺点：overflow:hidden溢出的切掉 就会把故意溢出的盒子切掉 —》换其他方法

3：清除浮动影响的属性 clear:both/left/right

clear: 清除浮动影响的属性

值: both / left /right clear:both 性别:男 属性必须依附于结构存在

<div style="clear:both"></div>  空标签  放置在最后一个浮动子元素的下边

缺点：空标签 结构冗余 没有实现结构与样式分离 后期难维护

4： css创造盒子 （标签） div + clear:both 全能终极

1： 并排的元素一定每一个都要加浮动属性

2：只要有浮动属性添加了 ，就要清除浮动影响

<div style="clear:both"></div>

.clearfix::after {
    content:''; 没有内容
    clear:both;  --->行内元素
    display:block; 清除浮动影响的必须是块级元素
    
    
}

健壮性
.clearFix::after {
        /* .的目的 为了明显看到内部的内容 防止空格出现 有些浏览器解析空格就是白色的小盒子 */

        content:' '; 
        display: block;
        clear: both;
        /* .会显示出来  这三句话为了不让点显示出来  健壮性*/
        line-height: 0;
        font-size: 0;
        height: 0;
    }

伪元素

作用： 用css去创造元素（盒子）

E::after {
    插入一个元素作为E元素的最后一个子元素 （在E的所有内容之后插入一个盒子）
}
E::before {
     插入一个元素作为E元素的第一个子元素 （在E的所有内容之前插入一个盒子）
}

E::after {
    content:'';
}
E::before {
    content:'';  ---> 创造出来的那个盒子的文本内容  如果没有内容  不写
}

伪元素创造出来的元素是行内元素

写样式的时候，伪元素就是真正存在的元素

<div style="clear:both"></div>

div::after {
    content:''; 没有内容
    clear:both;  --->行内元素
    display:block; 清除浮动影响的必须是块级元素
    
    
}

``css

div::after {
content:’’; 没有内容
clear:both; —>行内元素
display:block; 清除浮动影响的必须是块级元素

}