前端基础笔记10

最新推荐文章于 2023-12-20 17:00:00 发布

l_0525

最新推荐文章于 2023-12-20 17:00:00 发布

阅读量60

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/l_0525/article/details/127205039

版权

## 1.子绝父相

注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位，这三种情况，参照元素都是父元素**

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap {

width: 300px;

height: 300px;

background-color: pink;

/* position: relative; */

/* position: absolute; */

position: fixed;

}

.box1 {

width: 100px;

height: 100px;

background-color: tomato;

position: absolute;

top: 100px;

right: 50px;

}

</style>

</head>

<body>

<!--

这三种情况，子元素设置绝对定位，参照元素都是父元素

1.子绝父相（一般都用这个）

子元素设置绝对定位，父元素设置相对定位

2.子绝父绝

子元素设置绝对定位，父元素设置绝对定位

3.子绝父固

子元素设置绝对定位，父元素设置固定定位

-->

</div>

</body>

</html>

```

# 二、CSS 透明

## 透明度属性

### 1、rgba(r,g,b,a)颜色模式

- 兼容性：IE6、7、8下不兼容，IE9+支持

- 使用：

background-color属性、color属性、border-color属性等中设置透明度

- 语法

rgba(r,g,b,a)

r-red 取值范围0-255之间

g-green 取值范围0-255之间

b-blue 取值范围0-255之间

a-alpha 取值范围0-1之间表示半透明 1表示完全不透明 0表示完全透明

> 超出范围的值将被截至最近的极限值

### 2、opacity属性透明度

- 兼容性：IE6、7、8下不兼容，IE9+支持

- 使用

将内容（及所有后代）、背景一起透明，自身透明，子元素也透明

- 取值

范围0-1之间表示半透明 0表示完全透明 1表示完全不透明

### 3、filter属性

- 兼容性：仅仅支持IE6、7、8、9，在IE10及以上被废除

- 使用：

IE浏览器专属

- 语法

filter:Alpha(opacity=n)

n的取值在0-100之间表示半透明，0表示完全透明，100表示完全不透明

- 想用filter实现父元素背景透明，子元素不透明：

父元素加静态定位,子元素加相对定位,能阻止透明度的传递

```html

.box盒子有透明度

.box{

background: red;

opacity: .4;/* IE9+ */

filter: Alpha(opacity=40);/* IE6|7|8|9兼容 */

}

.box{

width:300px;

height: 300px;

background:red;

filter:Alpha(opacity = 30);

position: static;

}

.box span{

background:blue;

font-size: 40px;

position: relative;

}

</div>

```

# 三、CSS块级格式化

## 概念

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box(块级标签)参与，它规定了内部的Block-level Box(块级标签)如何布局，并且与这个区域外部毫不相干。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

#### 怎样生成**BFC**

- 根标签（html标签）

- float的值不为none

- overflow 的值不为 visible

- display 的值为 inline-block

- position 的值为 absolute 或 fixed

#### **BFC**的特性

1、内部的标签默认会在垂直方向上一个接一个的放置。

2、垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠。

3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

4、BFC 的区域不会与 float 的标签区域重叠。

5、计算BFC的髙度时，浮动子标签也参与计算。

6、BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然。

#### BFC解决的问题

##### 1.清除浮动

原因：浮动会让其所在的父元素撑不起来高度

解决办法(特性5)：计算BFC的髙度时，浮动子标签也参与计算。

触发bfc的几个条件都可以用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap {

width: 400px;

/* height: 300px; */

background-color: pink;

/* 5、计算BFC的髙度时，浮动子标签也参与计算。 */

/* overflow: hidden;

overflow: scroll;

overflow: auto;

float: left;

float: right; */

/* display: inline-block; */

/* position: absolute; */

position: fixed;

}

.wrap div {

width: 100px;

height: 100px;

background-color: yellowgreen;

float: left;

}

.wrap .box2 {

background-color: tomato;

}

</style>

</head>

<body>

</div>

</body>

</html>

```

##### 2.兄弟塌陷

原因：垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠

解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面反之亦然

触发bfc只有overflow属性能用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1,

.box2 {

width: 200px;

height: 200px;

}

.box1 {

background-color: tomato;

margin-bottom: 100px;

}

.box2 {

background-color: green;

margin-top: 100px;

margin-top: 200px;

}

/* 解决方法，给盒子套一个父盒子，加 overflow: hidden;*/

.father {

/* 触发bfc */

overflow: hidden;

overflow: scroll;

overflow: auto;

}

/* 解决办法(特性6)： BFC就是一个独立的容器，容器内部的元素不会影响到容器外面反之亦然 */

</style>

</head>

<body>

</div>

</div>

<!-- 兄弟关系外间距塌陷问题

现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

两个值一样大，取当前值

两个值不同，取较大值

原因：并列关系的两个元素共用了一个外间距区域

解决办法：

分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden' -->

</body>

</html>

```

##### 3.防止字体环绕

原因：浮动脱离标准流不脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc除了（绝对，固定定位）属性其余都能用

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap {

width: 700px;

height: 500px;

border: 2px solid red;

}

.wrap .box1 {

width: 200px;

height: 200px;

background: pink;

float: left;

}

.wrap .box2 {

width: 300px;

height: 200px;

background: yellowgreen;

/* 触发bfc */

/* float: left;

float: right; */

overflow: hidden;

overflow: scroll;

overflow: auto; */

display: inline-block;

/* 不能用 */

/* position: absolute;

position: fixed; */

}

</style>

</head>

<body>

<div class="box2">box23.防止字体环绕3.防环绕3.防环绕3.防止字体环绕</div>

<!-- 原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠 -->

</div>

</body>

</html>

```

##### 4.两栏自适应和三栏自适应

两栏自适应：左侧固定宽度右侧自适应的状态随着浏览器的窗口改变大小（左侧浮动，右侧触发BFC）

三栏自适应：左右侧固定宽度中间自适应随着浏览器的窗口改变大小（左侧左浮动，右侧右浮动，中间触发BFC）

原因：浮动脱离标准流不脱离文本流，浮动的标签提升层级会覆盖正常标签

解决办法(特性6，4)：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签

BFC 的区域不会与 float 的标签区域重叠

触发bfc的条件触发bfc只有overflow属性能用

* 两栏自适应

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap .left {

width: 200px;

height: 300px;

background-color: red;

float: left;

}

.wrap .right {

height: 350px;

background-color: aquamarine;

/* 触发bfc */

overflow: hidden;

overflow: scroll;

overflow: auto;

/* 以下不能用 */

/* float: left;

float: right; */

/* display: inline-block; */

/* position: absolute;

position: fixed; */

}

</style>

</head>

<body>

<div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表</div>

</div>

</body>

</html>

```

* 三栏自适应

```html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.wrap .left {

width: 200px;

height: 200px;

background-color: red;

float: left;

}

.wrap .right {

width: 200px;

height: 200px;

background-color: aquamarine;

float: right;

}

.wrap .center {

height: 300px;

background-color: pink;

/* 触发bfc */

overflow: hidden;

overflow: scroll;

overflow: auto;

/* 以下不能用 */

/* float: left;

float: right; */

/* display: inline-block; */

/* position: absolute;

position: fixed; */

}

/* 原因：浮动的标签会覆盖正常标签

解决办法(特性4)：BFC的区域不会与float的标签区域重叠 */

</style>

</head>

<body>

<div class="right">right </div>

<div class="center">center哈哈哈哈哈哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵哈哈哈呵呵呵呵呵呵</div>

</div>

</body>

</html>

```

# 四、阴影

## 1、盒子阴影

语法

```css

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: x轴偏移量 y轴偏移量模糊值阴影大小阴影颜色内阴影inset|外阴影（outset默认）

h-shadow：阴影的水平偏移量。正数向右偏移，负数向左偏移。必需单位： px

v-shadow：阴影的垂直偏移量。正数向下偏移，负数向上偏移。必需单位： px

blur：阴影模糊度，不能取负数。可选单位： px

spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。可选单位： px

inset：表示添加内阴影，默认为外阴影。可选

box-shadow: 0 0 20px 10px green inset;

当 spread 为0时，阴影大小与元素大小相同

.box1 {

background-color: yellow;

/* 多个阴影 */

/* 盒子阴影 */

box-shadow: 5px 2px 2px 1px pink, 8px 4px 3px 2px tomato;

}

```

> 可以在一个元素上设置一个或多个阴影，阴影之间用逗号隔开

## 2、文字阴影

语法

```html

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

text-shadow: x轴偏移量 y轴偏移量模糊值阴影颜色;

h-shadow 必需，水平阴影的位置，允许负值；

v-shadow 必需，垂直阴影的位置，允许负值；

blur 可选，模糊距离；

color 可选，阴影的颜色；

.box{ text-shadow: 5px 5px 2px #ff0, -5px -5px 2px skyblue;}

```

> 可以在一个文字中设置一个或多个阴影，阴影之间用逗号隔开

## 五、圆角

```css

语法： border-radius: ;

单位：px，百分比

左上角：border-top-left-radius: ;

右上角：border-top-right-radius: ;

左下角：border-bottom-left-radius: ;

右下角：border-bottom-right-radius: ;

（1）一个值：设置四个角的圆角大小；

（2）两个值：设置左上和右下、右上和左下的圆角大小；

（3）三个值：设置左上、右上和左下、右下的圆角大小；

（4）四个值：设置左上、右上、右下、左下的圆角大小。

border-radius: 20px; 四个角都有圆角

border-radius: 20px 40px; 左上角和右下角右上角和左下角

border-radius: 20px 40px 60px; 左上角右上角和左下角右下角

border-radius: 20px 40px 60px 80px; 左上角右上角右下角左下角（顺时针角度）

border-radius: 50%; 是一个圆形宽高一样

```

l_0525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础笔记10

div class="right">出师表出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师出师表出师表出师表出师表原因：浮动脱离标准流不脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。-- 原因：浮动不会脱离文本流浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。spread：阴影大小。可选单位： px。
复制链接

扫一扫