Css基本知识总结3（float）

DAY 3

圆角边框

border-radious：px|%(各个角都可设置)

盒子阴影

box-shadow:h-shadow 、v-shadow(blur\spread\color]inset)

其中，h-shadow和v-shadow是必选的，分别是水平阴影的位置和垂直阴影的位置可以为负值，blur为模糊距离（虚到实），color为阴影颜色，inset是将outset（默认为外部阴影 并且外部阴影不能写 ）外部阴影改为内部阴影，spread 阴影的尺寸

文字阴影

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

浮动

pc端传统网页布局的三种方式

方式1：普通流（标准流/文档流）：标签按照规定好的默认方式排列ul、dl、form、table....

2.浮动

3.定位

实际开发中一个页面基本都包含了这三种布局方式

（多个块级盒子如果纵向排列找标准流，多个会计盒子横向排列找浮动）

浮动：

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

float：left|right|none

背景：让多个盒子在一行中显示

如果利用inline-block的话，盒子当中会有缝隙，不容易控制

很多的布局效果，标准流无法完成，此时就可以利用浮动来完成布局，因为浮动可以改变元素标签的默认排列方式

浮动典型应用之一就是让多个盒子在一行当中显示

浮动特性：

加入浮动之后元素会具有以下特性：

1.浮动元素会脱离标准流

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

3.浮动的元素会具有行内块元素的特性

 

1.浮动元素会脱离标准流

①脱硫标准普通流的控制(浮)移动到指定位置(动)-->脱标

②浮动的盒子不在保留原先的位置

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

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列（除非一行装不开才会另起一行来显示），高度不一样也是顶端对齐

3.浮动的元素会具有行内块元素的特性

任何元素都可以浮动，不管原先什么模式的元素，添加浮动之后都具有行内块元素的相似特性，所以说当行内元素有了浮动之后就不用再将其转换了（行内块元素不给宽度的话是由本身的内容来撑开的）

浮动元素经常和标准流腹肌搭配来使用

为了约束浮动元素的位置，我们网页布局一般采取的策略是：先用标准流的父元素排列上下位置，然后，内部的子元素采取浮动排列左右位置，符合网页布局的第一准则