css_day7

浮动的影响

            /* 在默认情况下，父盒子与子盒子都是标准流 */
            /* 所以父盒子的高度由子盒子撑开 */

			 /* 当所有的子盒子都浮动了 */
            /* 父盒子可能会失去高度 */

            /* 父盒子是标准流，子盒子是浮动流 */
            /* 浮动的元素不占据标准流位置 */

            /* 清除浮动的影响：让父元素找回高度 */

浮动的影响的解决

• 高度法
• 用overflow解决（慎重使用）
• 额外标签法（官方推荐）

		/* 额外标签法：在子元素的最后面，添加一个额外标签，并且给这个标签设置一个clear:both; */
        /* clear:both;  ————  我不要我的两边有浮动元素，如果有，我走  */
		 /* 适合固定高度，也适合动态高度 */
        /* 但是，程序员不能用 */

		 /* 为什么程序员不用额外标签法：因为需要添加额外的标签 */
        /* 如果现在有1000个父盒子需要清除浮动的影响，那么就需要添加1000额外标签 */
        /* 代码会变得非常的冗余————会多出来很多没有用的盒子 */

• 用伪元素
  1.认识伪元素

<!-- 在不动html结构代码的前提下，添加想要的元素 -->

		/* 伪元素 */
        /* 虽然是个伪元素，但是一样可以使用css样式 */
        div::before{
            /* 在div的所有子元素之前 */
            content: "2020年11月5日";
            /* content属性必须要有，哪怕为空 */
            font-size: 20px;
            color: red;
            font-style: italic;
        }
        div::after{
            content: "下午四点";
            color: yellow;
            font-size: 20px;
        }

2.单伪元素清除浮动

/* 伪元素：可以在不修改结构代码的同时，又能添加额外的伪元素 */
.clearfix::after{
            content: ".";
            /* 为了兼容某一个低级版本的浏览器 */
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
            /* 元素的可见性 */
        }

        /* 针对低级ie浏览器做兼容 */
        .clearfix{
            *zoom: 1;
            /* 让ie浏览器认识伪元素 */
        }

		/* 代码看着很多，但是一个网站只需要你写一次，一劳永逸的事情 */

3.双伪元素清除浮动

.clearfix::before,
        .clearfix::after{
            content: "";
            display: block;
        }
        .clearfix::after{
            clear: both;
        }
        .clearfix{
            *zoom: 1;
        }

定位布局属性

• 静态定位

			position: static;
            /* 定位属性：默认是静态定位 */

			/* 定位的元素，还有另外一套位移手段，边偏移属性：top bottom right left */
            /* 但是对于静态定位（标准流）来讲，边偏移属性没有任何作用 */

• 固定定位

  <!-- 固定定位一般用在固定的头部，固定的导航栏，固定的小广告 -->
position: fixed;
            /* 固定定位 */
            /* 1.固定定位元素，实现了模式转换，拥有行内块的特点 */
            /* 2.固定定位元素，脱离了标准流，不占据标准流的位置 */
            /* 3。固定定位元素，不会随着内容滚动，会固定在某个位置 */

            /* 固定定位元素能使用margin */
            /* margin-top: 20px;
            margin-left: 20px; */

            /* 还可以使用边偏移属性 */
            /* top: 200px; */
            /* 距离顶部200个像素 */
            /* left: 200px; */
            /* 距离左边200个像素 */

            /* 边偏移属性写0是有效果的 */
            /* left: 0; */
            /* 左浮动 */
            right: 0;
            /* 右浮动 */
            /* 距离右边为0个像素 */
            /* top: 0; */
            bottom: 0;

			/* 固定定位的位移参照物：浏览器的可视区域//body */

• 绝对定位

 position: absolute;
            /* 绝对定位 */

            /* 绝对定位元素的位移 */
            /* margin-left: 100px; */
            /* 可以使用margin */

            /* right: 0;
            bottom: 0; */
            /* 绝对定位的位移参照物 */
            /* 1.当子元素绝对定位了，如果父元素没有定位（绝对，相对，固定），那么会参照body */
            /* 2.当子元素绝对定位了，如果父元素有定位，那么参照最近的定位父盒子位移 */
            
           /* 虽然绝对定位有两种位移参照物，但是项目中用的最多的还是绝对定位元素参照父元素位移 */
            /* 如果现在子元素用到了绝对定位，那么要思考的第一件事就是父元素有没有定位 */
            /* 绝对定位不会单独出现，必须搭配和：子绝父固 子绝父绝 子绝父相 */


			/* position: fixed; */
            /* position: absolute; */
            /* float: left; */
            /* 以上的所有属性都实现了模式转换 */
            margin: 0 auto;
            /* 块级元素才可以使用 */
            position: relative;
            /* 相对定位，没有实现模式转换 */

定位的盒子如何居中：

			/* margin: 0 auto; */
            /* 块级盒子才能用 */

            /* 先走父盒子的一半，再走自己的一半 */
            left: 50%;
            /* 百分之五十指的是父元素的一半 */
            margin-left: -250px;