CSS之盒子模型的浮动

1.CSS盒模型

盒子模型,如div等的宽和高的计算都是通过 content width + border + padding + margin(外盒加,内盒不加), 打个比方:本来盒子的width是200px , 加上了 2px的border之后 总的宽度 width 就成了 204px,为了避免在添加了padding和border属性后盒子的高度变化,在写盒子的样式的时候在CSS中添加 : box-sizing: border-box; 这样一开始的width规定的大小就是最后的大小,padding和border都算在其中,不会将盒子的高度再增加.

2.盒子阴影

box-shadow: 水平 垂直  模糊距离 阴影尺寸(影子大小) 颜色  inset(内阴影,不写inset的话,默认为外阴影);

div等块级盒子元素有普通流和浮动两种 ,

1.普通流(标准流或者文档流)

网页中标签从上到下,从左到右的顺序

2.浮动

作用:1.可以用开做文字环绕效果

          2.多个块级元素放在一行上(用inline-block也可以实现,但标签之间有空隙,而且容易去掉)

浮动的定义:元素的浮动指设置了浮动属性的元素会脱离标准普通流的控制,移动到父元素指定的位置去

语法:float: left ;  right; none ; 三个属性写一个;

解释:浮动就是块级元素有了行内块元素的属性,元素飘起来 , 压在标准流的上方.

要求:使用浮动首先要添加父元素

原因:多行都是浮动的时候一行有多个盒子,上面一行会压住下面一行的浮动,出现盖住的情况,所以父元素用标准流一个占一行,子元素在父元素里面浮动,并且浮动的子元素总是找直接找父元素中已经浮动的元素对齐,有内边距则不会压在内边距上,而是贴在内边距上.浮动的盒子将会顶对齐 , 第一个盒子不浮动,第二个也不浮动,则两个不会在同一行,只用都浮动才会在一行上显示.