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

 

猜你喜欢

转载自www.cnblogs.com/doraemon548542/p/11518077.html