doraemon的python 浮动、定位和background

### 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
```