首页 前端知识 css3(BFC很重要)

css3(BFC很重要)

2024-04-21 10:04:37 前端知识 前端哥 837 140 我要收藏

目录

新增长度单位

box-size怪异盒模型

resize调整盒子大小

box-shadow盒子阴影

opcity不透明度·

背景属性

1. background-origin

2. background-clip

3. background-size

4. backgorund 复合属性

5. 多背景图

边框圆角

边框外轮廓

文本

渐变

线性渐变

径向渐变

重复渐变

web字体

2D变换

3D变换

过渡

动画

多列布局

伸缩盒模型

响应式布局

BFC


新增长度单位

1. vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。

2. vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。

box-size怪异盒模型

content-box: width 和 height 设置的是盒子内容区的大小。(默认值)

border-box :width 和 height 设置的是盒子总大小。(怪异盒模型)

resize调整盒子大小

none 不允许用户调整元素大小。 (默认)

both 用户可以调节元素的宽度和高度。

horizontal 用户可以调节元素的宽度 。

vertical 用户可以调节元素的高度。

box-shadow盒子阴影

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

/* 写六个值,含义:水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */

box-shadow: 10px         10px        20px 3px      blue inset;

opcity不透明度·

值是 0 到 1 之间的小数, 0 是完全透明, 1 表示完 全不透明。

背景属性

1. background-origin

作用:设置背景图的原点。

语法

       1. padding-box :从 padding 区域开始显示背景图像。—— 默认值

       2. border-box : 从 border 区域开始显示背景图像。

       3. content-box : 从 content 区域开始显示背景图像。

2. background-clip

作用:设置背景图的向外裁剪的区域。

语法

       1. border-box : 从 border 区域开始向外裁剪背景。 —— 默认值

       2. padding-box : 从 padding 区域开始向外裁剪背景。

       3. content-box : 从 content 区域开始向外裁剪背景。

       4. text :背景图只呈现在文字上。

       注意:若值为 text ,那么 backgroun-clip 要加上 -webkit- 前缀

3. background-size

作用:设置背景图的尺寸。

语法:

       1. 用长度值指定背景图片大小,不允许负值。

       2. 用百分比指定背景图片大小,不允许负值。

       3. auto : 背景图片的真实大小。 —— 默认值

       4. contain : 将背景图片等比缩放,使背景图片的宽或高,与容器的宽或高相等,再将完整 背景图片包含在容器内,但要注意:可能会造成容器里部分区域没有背景图片。

       5. cover :将背景图片等比缩放,直到完全覆盖容器,图片会尽可能全的显示在元素上,但要

       注意:背景图片有可能显示不完整。—— 相对比较好的选择

4. backgorund 复合属性

语法:

       background: color url repeat position / size origin clip

注意:

       1. origin 和 clip 的值如果一样,如果只写一个值,则 origin 和 clip 都设置;如 果设置了两个值,前面的是 origin ,后面的 clip 。

       2. size 的值必须写在 position 值的后面,并且用 / 分开。

5. 多背景图

CSS3 允许元素设置多个背景图片

/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,
            url(../images/bg-rt.png) no-repeat right top,
            url(../images/bg-lb.png) no-repeat left bottom,
            url(../images/bg-rb.png) no-repeat right bottom;

边框圆角

同时设置四个角的圆角:

       border-radius:10px;

分开设置每个角的圆角,综合写法(几乎不用):

       border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

边框外轮廓

outline-width:宽度

          -color:颜色

          -style:风格

复合属性:outline:50px solid blue;

outline-offset 设置外轮廓与边框的距离,正负值都可以设置

文本

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

换行:white-space:

                                

溢出:text-overflow:

修饰

渐变

线性渐变

默认从上到下渐变:

background-image: linear-gradient(red,yellow,green);

使用关键词设置线性渐变的方向:

background-image: linear-gradient(to top,red,yellow,green);

background-image: linear-gradient(to right top,red,yellow,green);

使用角度设置线性渐变的方向:

background-image: linear-gradient(30deg,red,yellow,green);

调整开始渐变的位置:

background-image: linear-gradient(red 50px,yellow 100px ,green 150px);

径向渐变

多个颜色之间的渐变, 默认从圆心四散。(注意:不一定是正圆,要看容器本身宽高比)

background-image: radial-gradient(red,yellow,green);

使用关键词调整渐变圆的圆心位置;

background-image: radial-gradient(at right top,red,yellow,green);

使用像素值调整渐变圆的圆心位置:

background-image: radial-gradient(at 100px 50px,red,yellow,green);

调整渐变形状为正圆 :

background-image: radial-gradient(circle,red,yellow,green);

调整形状的半径 :

background-image: radial-gradient(100px,red,yellow,green);

background-image: radial-gradient(50px 100px,red,yellow,green);

调整开始渐变的位置:

background-image: radial-gradient(red 50px,yellow 100px,green 150px);

重复渐变

无论线性渐变,还是径向渐变,在没有发生渐变的位置,继续进行渐变,就为重复渐变。

web字体

可以通过 @font-face 指定字体的具体地址,浏览器会自动下载该字体

定制字体

中文的字体文件很大,使用完整的字体文件不现实,通常针对某几个文字进行单独定制。

可使用阿里 Web 字体定制工具:https://www.iconfont.cn/webfont

字体图标

阿里图标官网地址:https://www.iconfont.cn/

2D变换

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

3D变换

过渡

在线制作贝赛尔曲线:https://cubic-bezier.com

动画

多列布局

伸缩盒模型

响应式布局

完整列表请参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

BFC

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5586.html
标签
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!