前端入门视频笔记 CSS3（四）浮动 P165-188

CSS3（四）

网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应的位置。

新增属性：

04~07 圆角边框、阴影

（1）圆角边框：将盒子的边框变成圆角的，

                               border-radius: 数字px或百分比;

属性也可以分成四个角来写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius；

属性值可以是四个数值，分别代表左上角、右上角、右下角、左下角（顺时针方向）；

属性值得大小代表圆角的圆弧半径，数值越大，圆角的弧度越明显；

可利用圆角边框画出圆形或者圆角矩形的块元素。

 

（2）盒子阴影

                  box-shadow: h-shadow  v-shadow  blur  spread  color  inset;

属性值	描述
h-shadow	必需。水平阴影的位置，允许负值；
v-shadow	必需。垂直阴影的位置，允许负值；
blur	可选。模糊距离；(数值越大，阴影越模糊)
spread	可选。阴影的尺寸；
color	可选。阴影的颜色；(常用rgba)
inset	可选。将外部阴影(outset)改为内部阴影。

其中默认了外部阴影outset，但是不可以在属性值中写这个单词，否则会导致阴影无效；

阴影不会影响盒子的大小，不会影响盒子之间的排列。

 

（3）文字阴影

                         text-shadow: h-shadow  v-shadow  blur  color;

 

 

09-传统网页布局的三种方式（盒子的排列顺序）：

                              标准流（普通流文档流）、浮动、定位

 

标准流：就是标签按照规定好的默认方式排列，是最基本的布局方式。

              例如，块元素独占一行，从上到下排列；

                         行内元素从左到右排列，碰到父元素边缘就会自动换行。

 

10~21 CSS浮动

浮动（float）：因为浮动可以改变元素标签默认的排列方式，实现标准流完成不了的排列；

则网页布局的第一准则：多个块元素纵向排列用标准流，多个块元素横向排列用浮动。

 

float属性用于创建浮动框，将其移动到一边，直到触及左边缘或右边缘；或触及另一个浮动框的边缘。

                                       选择器  { float: none / left / right; }

 

• 特性：

（1）浮动元素脱落标准流的控制（浮起来），移动到指定位置；（脱标）

         则浮动的盒子不再保留原先的位置。

 

（2）给多个盒子设置浮动，它们就会按照属性值在同一行顶端对齐排列；

         当同一行的盒子宽度超过了父级的宽度，多出的盒子就会自动换行；

         浮动元素靠在一起，之间没有空隙。

 

（3）浮动的元素具有行内块元素的特性；

         所以行内元素如果有了浮动属性，就不需要转换为行内块或者块元素，可以直接设置高、宽度。

 

（4）浮动常与标准流的父元素搭配使用：

         为了约束浮动元素在网页中的位置， 先用标准流的父元素排列上下位置，然后内部元素采取浮动排列左右位置。（网页布局第一准则）

 

（5）一个盒子浮动了，理论上它的兄弟盒子也要浮动；

         因为浮动盒子会影响后面的标准流的位置，但不会影响前面的标准流。

 

22~27 清除浮动

由于在很多情况下，父盒子不方便设置高度，但子盒子浮动就不占据位置，使得父盒子的高度变成0；

清除浮动的本质就是清除浮动元素脱标而产生的影响；

所以在父元素不设置高度的情况下，清除浮动，使父元素根据子盒子自动形成高度。

 

                                     选择器 { clear: left / right / both(常用) }

 

策略：闭合浮动，即只让浮动在父盒子内部影响，不影响外部的盒子。

（1）额外标签法（不常用）

也称为隔墙法，是在浮动元素末尾添加一个带有clear属性的空标签（须为块元素），

如 <div  style = "clear: both; " > </div>；

或者<br>等标签。

 

（2）父元素添加overflow属性

                                         overflow: hidden / auto / scroll;

 

（3）父元素添加after伪元素

给父元素设置一个 class = "clearfix"，然后在CSS中加入after伪元素：

.clearfix:after {
            content: "";
            /* 转化为块级元素 */
            display: block;
            height: 0;
            /* 添加清除浮动标签 */
            clear: both;
            visibility: hidden;
        }

.clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

 

（4）父元素添加双伪元素

.clearfix:before,
.clearfix:after {
            content: "";
            /* 转化为块级元素，并且在一行上显示(类似于表格的单元格) */
            display: table;
        }

.clearfix:after {
            clear: both;
        }

.clearfix {
            *zoom: 1;
        }

 

9.9