CSS浮动详解

黑马程序员

已认证账号

今日学习

1.CSS布局三种机制

2.CSS浮动

3.CSS浮动特点

4.CSS清除浮动

扩展css3属性

圆角边框

矩形 -- 包含正方形和长方形。

正方形变成圆 ---- border-radius:宽高的一半(50%)。

矩形变成椭圆 ---- border-radius值:高度的一半。

 .radius {
            width: 200px;
            height: 120px;
            background-color: pink;
            /* 四个值遵循顺时针，从上左角开始数 */
            border-radius: 0px 40px 0 40px;
        }

   3. 可以设置不同的圆角:
    <div class="radius"></div>
/*圆形的大头贴*/  
img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }

  <img src="./img.jpg" alt="">

盒子阴影

box-shadow:水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色内/外阴影(默认，但是不要写这个值)；

注意：水平阴影和垂直阴影是必须书写，不能省略。

双阴影的写法，如下：  
div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .6),
              8px 10px 9px -3px yellow;
        }

<div></div>

文字阴影

text-shadow:水平（必须）垂直（必须）模糊距离阴影颜色。

文字也可以双阴影，基本不用
 text-shadow: 5px 2px 3px rgb(100, 12, 88), 6px 6px 5px rgb(90, 100, 0);

css布局三种机制

三种机制 -- 普通流（标准流）浮动定位

普通流

块级元素会独占一行，从上向下排列

常见的块级标签：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序从左到右顺序排列，碰到父元素边缘自动换行

常用元素：span、a、i、em等

为什么需要浮动

网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。

举例子：

前面学过行内块，行内块可以一排显示；但是中间会有缝隙，所以不能满足我们的开发需求。

认识浮动

选择器{float:属性值;} 值：none(没有) left(左浮动) right(右浮动)

注意：标准流占有位置。

浮动的特点（重点！）

浮动特点1 --- 脱离标准流，不占位置（自己原来的位置漏给后面的标流）
浮动特点2 --- 浮动的元素一排显示，如果父亲装不下了，默认另起一行显示。浮动的元素之间默认无缝隙。
浮动特点3 -- 任何元素都可以添加浮动，无论它是块元素还是行内元素，浮动后可以直接设置宽高，默认类似于行内块特性，不需要display转换。

权重复习：
*和继承                  0000
标签                     0001
类选择器(伪类)            0010
ID选择器                  0100
行内样式                  1000
！important             无穷大

浮动排版注意点

一个技巧：一般一个标流的父亲，里面一个孩子浮动了，其他的孩子也都浮动。

浮动与兄弟盒子的关系（重点）

标准流--占有位置浮动--- 不占位置(脱标)

浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。

浮动元素与父盒子的关系(重点)

浮动的元素压不住父亲的边框
浮动的元素压不过父亲的padding
后面学的定位可以随便压

清除浮动（理解）

清除浮动不是真的把浮动清除，而是清除加了浮动带给后面的标流的影响。

如果子盒子是标流，因为标流占有位置，所以父亲能检测到高度。

子盒子浮动了，不占有位置，又因为父亲高度为零；所以父亲检测不到高度。

清除浮动的本质

清除前面的盒子设置浮动后，带给后面盒子的影响。

额外标签法（不推荐使用）

在最后一个加了浮动元素的末尾添加一个块级别的空标签。
<div style="clear:both;"></div> --- 这个空标签一定是块元素.

缺点：结构容易乱。

给浮动元素的父亲添加overflow属性方法（也不是很推荐）

overflow:hidden;

缺点：内容增多的时候导致内容被剪贴掉，无法显示需要溢出的内容。

after伪元素清除浮动（推荐）

 .clearfix:after {
            /* 使用伪元素必须添加content属性 */
            content: "";
            /* 因为伪元素是行内元素，所以需要转换成块元素 */
            display: block;
            /* 兼容 */
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6、7 专有  */
            *zoom: 1;
        }

双伪元素清除浮动(推荐)

  .clearfix::before,
        .clearfix::after {
            /* 要想使用伪元素，必须写上content属性 */
            content: "";
            /* 这里写成block也是没有问题的，为什么使用table,这是老的写法，兼容老版本浏览器 */
            display: table;
        } 
        .clearfix::after {
            clear: both;
        } 
        .clearfix {
            *zoom: 1;
        }

什么时候清除浮动？

1.父亲没有高度。

2.子盒子又浮动。

3.因为浮动影响了后面的布局。

发布于 2020-10-23 14:54

CSS

CSS3

网页布局