前端入坑到放弃day6

第06天——CSS基础

一、圆角边框

        —— border-radius

          —— 圆形：border-radius：50%；

          —— 圆角矩形：border-radius：高度的一半；

          —— border-radius：10px 20px 30px 40px； 上、右、下、左（顺时针）

                  border-top-left-radius：10px；

                  border-top-right-radius：20px；

                  border-bottom-right-radius：30px；

                  border-bottom-left-radius：40px；

 

二、盒子阴影

       —— 盒子阴影：box-shadow：x y 清晰度 阴影半径 颜色 内外阴影；

         —— 文字阴影：text-shadow：x y 清晰度 颜色；

         —— 前两个数是方向，后两个数是半径，然后是颜色，最后一个几乎用不到。

                 /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */

                 box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

                 /* x偏移量 | y偏移量 | 阴影颜色 */

                 text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

 

 

三、浮动

1、传统网页的三种布局方式

      —— 标准流（文档流）：标签按照规定好的默认方式排列（块级元素、行内元素）；

       —— 浮动：float 属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 

       —— float：left；float：right；

       —— 定位：position （absolute、relative、fixed）

【注】：子浮父不浮，兄弟一起浮

 

2、为什么要清除浮动

     —— 开发时，父元素不方便指定高度，子盒子浮动脱标，不占有原来位置，导致父盒子高度为0，最终影响到下方的盒子

3、清除浮动的本质

      —— 清除浮动元素脱标后的影响

      —— 清除浮动后，父盒子可以根据浮动的子盒子自动检测高度，父盒子有了高度，就不会对下方的标准流造成影响了。

     —— 清除浮动的属性：clear：both；

4、清除浮动的方法

      ——  额外标签法

               在浮动元素末尾加一个空的div

               设置该div的样式为clear：both；

               缺点：添加无意义标签，结构化差

      —— 清除浮动之父元素 overflow

           给父元素添加overflow属性，将其设置为hidden、auto、scroll都可以

              通常是overflow：hidden；

              缺点：无法显示溢出部分

     —— 清除浮动之双伪元素

.clearfix::before,
.clearfix::after {
   content:' ';
   display:table;
}

.clearfix::after {
   clear:both;
}

.clearfix {
  *zoom: 1;
}