学习css第四天---盒子圆角边框、盒子阴影、文字阴影、浮动、清除浮动

一、盒子的边框和阴影

1、圆角边框

1.1、圆形： border-radius: 50%;
正方形盒子是圆形，长方形盒子是椭圆

1.2、圆角矩形
border-radius: 高度的一半;

1.3、设置不同的圆角
border-radius: 10px 20px 25px 30px; 左上—>右上—>右下—>左下。

1.4、分步写法（不推荐使用）：
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 30px;

2、盒子阴影

      x方向距离 y方向距离 模糊程度 阴影尺寸 颜色
box-shadow: 10px 15px 10px 13px rgba(0,0,0,0.2);

注：阴影不会影响盒子的大小。

3、文字阴影

           x方向距离 y方向距离 模糊程度 颜色
 text-shadow: 10px 14px 14px rgba(0,0,0,.5);

二、浮动

1、传统网页布局三种方式：标准流、浮动、定位。

标准流的布局：按照规定好的默认方式排列（块元素，行内元素）；
标准流是最基本的布局方式。

2、浮动能解决的问题：

使多个块元素在一行排列；让块元素一个左对齐，一个右对齐。

网页布局准则：

• 多个块级元素纵向排列–标准流；
• 多个块元素横向排列—浮动。

3、浮动的概念：

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

float: left; float: right;

4、浮动的特性：

• 脱离标准流的控制，移动到指定位置；
• 一行显示并顶部对齐；
• 具有行内块元素的特性。
• 浮动的元素不再保留原先位置。
• 浮动元素只会影响下面的元素；
• 浮动的元素不会超出父元素的padding值，在父元素内部浮动；
• 浮动的元素是压不住图片和文字的；
• 浮动的元素不能被text-align: center;margin: auto;居中

5、浮动元素一行显示

浮动元素之间不会有缝隙，按照顶部对齐
如果父元素宽度不够装下浮动盒子，会另起一行显示。

6、浮动元素具有行内块元素的特性

行内元素使用浮动，不需要转换为块级\行内元素就 可以直接指定宽高
块元素设置了浮动，宽度是内容的宽度

7、清除浮动

原因：

如果开发时不方便给父盒子指定高度，子盒子浮动后，不占有原来的位置，导致复合字高度为0，会影响下边的元素。
浮动盒子不会影响上边的标准流，只影响下边的。

7.1、额外标签法

clear: both;
给父元素最后的浮动子元素后边加标签，最后多加的标签只能是块级元素。

7.2、给父元素添加overflow:hidden;

7.3、after伪元素 父元素调用<div class=”box clearfix”>子元素

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

7.4、双伪元素 父元素调用<div class=”box clearfix”>子元素

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

---

今天就到这里啦，感谢各位观看。

今天你认真写代码了吗？