HTML学习笔记---09day

圆角边框

border-radius:length;

圆与边框的交集形成的圆角效果。length是圆半径值。

盒子阴影

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

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

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

blur:可选，模糊距离。

spread:可选，阴影的尺寸。

color:可选，阴影的颜色。

inset:可选，将外部阴影改为内部阴影。默认的外阴影，但是不可以写。

盒子阴影不占用空间。

 文字阴影

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

同盒子阴影相同。

浮动

网页布局：多个块级元素纵向排列标准流，多个块级元素横向排列找浮动。

float：将其移动到一边，直到左边缘或右边缘触及包含款或者另一个浮动框的边缘。

选择器:{ float: 属性值;}

属性值：none(元素不浮动，默认)、left(左浮动)、right(右浮动)。

特性：

      1.脱标

      2.多个盒子设置浮动，按照属性值一行内显示并且顶端对齐排列。

     3.具有行内块元素特性。 

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

清除浮动

选择器{clear:属性值;}

属性值：left（清楚左侧浮动影响）、right（清楚右侧浮动影响）、both（清楚两侧浮动影响），常用both。 

额外标签法（实际不常用）：在浮动元素末尾添加一个空的标签（必须是块级元素），清除额外标签的浮动影响。

父级添加overflow：

父级选择器{overflow:属性值;}

属性值：hidden、auto、scroll。

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

 after伪元素法：

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

添加给父元素，直接复制即可。

双伪元素清除浮动： 

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

			.clearfix::after {
				clear: both;
			}

			.clearfix {
				*zoom: 1;
			}

相较于after伪元素清除浮动，代码更为简洁，用处和after伪元素清除浮动相同。

*zoom:1;兼容版本。