八、背景与阴影8.1背景1、背景颜色background-color:颜色值;默认值为透明2。背景图片background-image:url('...');3.背景平铺当图像区域小于方框时,图片会复制自己,然后平铺整个方框,我们可以使用background-repeat设置是否平铺background-repeat:repeat|不重复|重复-x|repeat-yrepeat:平铺,默认值为no-repeat:不平铺repeat-x:水平平铺repeat-y:垂直平铺4.图片位置background-position属性可以改变图片在背景中的位置background-position:xy参数表示:x坐标和y坐标,可以使用位置名词或精确单位length:百分比或数值+单位position:位置词,如:top,bottom,left,center,rightposition位置词/*upperleftcorner,两者的顺序相反*/background-position:topleft如果只写了一个,那么第二个默认就是中心参数background-position:20px50px的确切单位;如果只写一个,第二个默认居中5.背景图片固定。滚动背景附件的其余部分:scroll|fixedscoll:背景图片随对象内容滚动(默认值)fixed:背景图片固定背景合成写法:background:颜色地址是否平铺或滚动位置8.2框阴影box-shadow属性为添加阴影totheboxbox-shadow:h-shadowv-shadowblurspreadcolorinset值说明h-shadow必填,水平阴影的位置(值+单位)v-shadow必填,垂直阴影的位置(值+单位)模糊是可选的,模糊距离(数字+单位)传播是可选的,阴影的大小(数字+单位)颜色是可选的,阴影的颜色插入是可选的,将外部阴影(开始)更改为内阴影(默认它被识别为外部阴影)box-shadow:00px15px5px#333;框阴影不占空间8.3文字阴影text-shadow设置文字阴影box-shadow:h-shadowv-shadowblurcolor同box-shadow:00px15px#333;9。浮动9.1什么是浮动首先说标准流程。标准流程就是我们正常的div,h1~h6,span等一系列块元素和内联元素按照从上到下,从左到右的排序方式进行排序所以,标准流程是按照默认方式排列的,这是最基本的布局方式。所谓浮动就是改变元素的排序方式,使一个或多个元素排成一行显示。9.2浮动float用于创建浮动框,将其移动到一侧,可以是左或右float:left|对|nonenone:不浮动(默认)left:左浮动right:右浮动然后保持原来的位置,会向上浮动显示在一行中,顶部对齐的浮动元素会粘在一起。如果一条线放不下,将显示另一条线。浮动元素将具有行内元素的特征。任何元素都可以设置为浮动,并且可以修改大小。注意事项:浮动元素与标准流父框配对。首先使用标准的流式排序父元素的上下位置,内部子元素采用浮动排序(常用方式)。如果一个元素浮动,理论上其余的兄弟姐妹也应该浮动。floatingboxonly会影响后续的standardflowboxes,不会影响前面的9.4Clearfloating(重点)由于浮动元素不再占据源文档流的位置,所以会影响后面元素的布局.一句话:父盒无高,子盒无高。盒子是浮动的,影响下面的布局。清除浮动的本质是:将浮动元素的影响清除出标准流;清除浮动后,parent会根据浮动框自动检测高度,如果parent有框则不会影响后面的标准流程中四种清除浮动的方法清除浮动的策略是:关闭浮动,即就是,锁定浮动在父框内,不影响父框外的其他框1.额外标签method.clear{clear:both;}
