### 11.5 浮动 浮动：是为了解决网页的文字环绕问题 浮动 float: - none 表示不浮动 - left 左浮动 - right 右浮动 - inherit 继承父元素的浮动属性 浮动现象： - 浮动的元素脱离了标准文档刘，即脱标 - 浮动元素相互贴靠 - 浮动的元素会产生字围效果 - 浮动元素有收缩效果 清除浮动的方式： - 原因:浮动带来的问题(衬不起父和子的高度) - 方法一：给父元素添加固定高度(不灵活，后期不易维护) - 方法二：内墙法 - ```css 内墙法：给最后一个浮动元素的后面添加一个空的块级标签，并且设置该标签的属性为clear:both; 问题：冗余 ``` - 方法三 伪元素清除法 推荐使用 - ```css 添加一个块，一般设置的名字叫clearfix .clearfix::after{ content:''; display:block; clear:both; } ``` - 方法四 overflow - ```css overflow:hidden; 常用，直接在块的属性里加 因为overflow:hidden;会形成BFC区域，形成BFC区域之后，颞部有它自己的布局规则 计算BFC的高度，浮动元素也参与计算 但是小心overflow:hidden它自己的本意 overflow:scroll;出现滚动条 ``` ### 11.6 定位 定位有哪几种： ```css position:static(静态定位) | relative(相对定位) | absolute(绝对定位) | fixed(固定定位) ``` 相对定位和绝对定位的特征和参考点 ```css 相对定位：给一个标准流下的盒子单纯的设置相对定位，与相同盒子没有任何区别 属性有；top|bottom|left|right 参考点：以原来的位置为参考点 应用：1.微调元素 2.做“子绝父相” 绝对定位：脱标 压盖现象 参考点：是否有定位(相对定位、绝对定位、固定定位)的祖先盒子进行性定位，如果没有定位的祖先盒子，以body为参考点。 应用：子绝父相 ``` #### 11.6.1 相对定位 relative 特征： - 与标准文档流下的盒子没有任何区别 - 留“坑”，会影响页面布局 - 参考点：以原来盒子为参考点 #### 11.6.2 绝对定位 㘝贩毒设置一个盒子为绝对定位： - 以top描述，它的参考点是以body的(0,0)为参考点 - 以bottom描述，它的参考点是以浏览器的左下角为参考点 #### 11.6.3 固定定位 现象： - 脱标 - 固定不变 - 提高层级 - 参考点：以浏览器的左上角为参考点 z-index 只使用与定位的元素，z-index：auto; ```css 1.z-index 只应用在定位的元素，默认z-index:auto; 2.z-index取值为整数，数值越大，它的层级越高 3.如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。(与标签的结构有关系) 4.从父现象，通常布局方案我们采用子绝父相，比较的是父元素的z-index值，那个父元素的z-index值越大，表示子元素的层级越高 ``` #### 11.6.3 子绝父相 以最近的父辈元素的左上角为参考点进行定位 特征： - 脱标 - 压盖 - 子绝父相 ### 11.7 背景background background ```css /*设置背景图*/ background-image:url("xiaohua.jpg"); background-repeat:no-repeat; 不平铺 background-repeat-x 表示背景图水平方向上的平铺 background-repeat-y 表示背景图只有垂直方向上平铺 /*调整背景图的位置*/ background-position:-164px -106px; ``` background-position 此属性表示背景图片定位初始位置。background-position是background-position-x和background-position-y的综合属性。如果想使用background-position属性，那么必须先指定background-image属性。 ```css 1.background-position:x y; 2.background-position:position position; 3.bacground-position:top left;背景图片在其实位置，即左上角 4.background-position:top right;背景图像在右上角 5.background-position:top center;背景图像上方居中 6.background-position:center center;正中央 7.background-position:bottom right;/*右下角*/ 8.background-position:50px 100px; 9.background-position:-20px -30px;用于精灵图 ``` border ```css border-radius 设置圆角或者圆 boeder-radius:100px 设置的小就会形成圆角 ``` 阴影 ```css box-shadow:水平距离 垂直距离 模糊程度 阴影颜色 inset ```