CSS学习4（边框、阴影、浮动）

1、圆角边框

border-radius:  lengthpx  属性用于设置元素的外边框圆角。lengthpx为半径为lengthpx的圆。数值越大，半径越大，越圆润。

如果想要一个圆形边框，可以让length值等于盒子（正方形）高度的一半。也可以用更灵活的方式书写：让lengthpx等于50%。

圆角矩形也是设置为高度的一半。

简写：border-radius: length1 length2 length3 length4       分别为左上角、右上角、右下角、左下角（顺时针）

如果只写两个数值： 分别为左上角和右下角（一对）、右上角和左下角（一对）

也可以分开写：border-top-left-radius（左上角）、border-bottom-right-radius（右下角）其他同理。

2、盒子阴影

box-shadow属性为盒子添加阴影。

值：

　　h-shadow  必须的，水平阴影位置，允许负值。

　　v-shadow  必需的，垂直阴影位置，允许负值。

　　blur 模糊距离。

　　spread  阴影的尺寸。

　　color    阴影的颜色。

　　insert    将外部阴影改为内部阴影。

格式： 

box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3) insert;    insert不写的话默认是外阴影。不要写outside。

3、文字阴影

text-shadow属性

值：h-shadow、v-shadow、blur、color。

4、浮动

网页布局的本质：用CSS来摆放盒子。

CSS提供了三种传统布局方式：普通流（标准流）、浮动、定位。

4.1 标准流（普通流/文档流）

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

块级元素：自己独占一行，从上往下顺序排序。

　　常见块元素：div、hr、h1-h6、ul、ol、dl、form、table

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

　　常见行内元素：span、a、i、em等。

4.2 浮动

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。原因如下：中间会有间隔。

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

属性值：none、left、right。

添加  float: left ;   后

 

4.3 浮动的特性

 1、浮动元素会脱离标准流移动到指定的位置（脱标）。浮动的盒子不再保留原先的位置。

2、浮动的元素会一行内显示并且元素顶部对齐。

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

任何元素都可以浮动，不管原先是什么样式的元素，添加浮动之后都具有行内块元素的特性。

 5、浮动布局

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

理想中的状态是让子盒子撑开父盒子，有多少个孩子，父盒子就有多高。

5.1 清除浮动

由于浮动的元素不占用元文档流的位置，所以会对后面的元素排版产生影响。

例如，一个父级盒子里面有浮动的子盒子，但是父盒子高度位0的时候，就会影响下面的标准流盒子。

清除浮动的本质就是清除浮动元素造成的影响，如果父盒子本来就有高度就不用清除浮动。清除浮动之后，父盒子会根据浮动的子盒子自动检测高度，父盒子有了高度就不会影响下面的标准流了。

格式：

选择器 { clear: 属性值; }

属性值：left（清除左侧浮动影响）,right（清除右侧浮动影响）,both（清除左右两侧浮动）。

5.2 清除浮动的方法

1、额外标签法（隔墙法），是W3C推荐的做法。

2、父级添加overflow属性

属性值可以设置为hidden、auto、scroll。

缺点：无法显示溢出部分。

3、父级添加  :after  伪元素

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

 

4、父级添加双伪元素

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