CSS3 单位 BFC h5新增圆角阴影背景图片设置渐变过渡

最新推荐文章于 2022-09-02 09:42:25 发布

e神还是心头好

最新推荐文章于 2022-09-02 09:42:25 发布

阅读量287

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_43606967/article/details/117571980

版权

html css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

css 单位

%：百分比单位，相对于父元素（宽度，高度）的百分

px：像素单位，表示屏幕上的一个点

in：英寸单位，像素与英寸的转化与分辨率有关，分辨率是96,一英寸单位下，包含96个像素点

cm：厘米单位

1米等于100cm，

1英寸等于2.54cm

1厘米约包含37.78个像素点 96 / 2.54

mm：毫米单位， 1cm = 10mm

pt：磅单位 1磅等于1/72英寸 1磅包含 1.33个像素点 96 / 72

pc: 包含12个点活字

em：相对于字体的大小容器宽度多大，要看容器的字体多大

rem：相对于根元素字体的大小容器多宽，与父元素和自身元素字体大小无关，与根元素字体大小有关

ex：表示相当于x-height的高度，

x-height指的是x字母的高度

vw : 1vw 等于视口宽度的1%

vh : 1vh 等于视口高度的1%

vmin : 选取 vw 和 vh 中最小的那个

vmax : 选取 vw 和 vh 中最大的那个

格式化上下文

BFC 块级格式化上下文

布局规则：

内部的盒子会在垂直方向，一个个地放置；

盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；

每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；

BFC的区域不会与float重叠；

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；

计算BFC的高度时，浮动元素也参与计算。

会产生BFC的情况（根 float position display overflow）

根元素；

float的属性不为none；

position为absolute或fixed；

display为inline-block，table-cell，table-caption，flex；

overflow不为visible

IFC 内联格式化上下文

布局规则：
在一个IFC里，盒是一个接一个从顶部水平放置。

它们水平方向的margin,padding,border所占空间会被计算在内。

行盒的高度由行盒内最高的inline boxes决定。

垂直方向，可通过vertical-align设置文本基线，取值可以是具体像素值，也可以是middle等方向词。

当内部的容器盒子太多了一个line box装不下来，他们折行之后会变成两个或者多个line box， line box们垂直方向无间隔地堆叠，但不能重叠

浮动后IFC内部的浮动元素宽高参与IFC的line-box宽高计算并且从换行后的行开始排列

html5 语义化标签

<section>, <article>, <nav>, <header>,<footer>, <aside>

figure和figcaption：文档中插入图像

time：时间语义化标签，是行内元素

mark：有强调的语义

details和summary：总结含义的标签

html5 表单类型

search：搜索框

tel：电话

url：统一资源定位符

number：数字

email：电子邮箱

range：拖拽条

date：日期

week：周

color: 颜色

表单元素属性

placeholder：输入框提示的文案

autofocus：自动获取焦点

required：表单必填项

智能感应：使用datalist标签和要产生感应的表单元素产生绑定。

input 设置 list 属性，指向 datalist 的 id 属性。

 <!-- 智能感应 -->
    <input type="text" name="color" list="color">
    <datalist id="color">
        <!-- 候补选项 -->
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
    </datalist>

视频

src：路径

controls：控制条

autoplay：自动播放

loop：循环播放

poster: 预览的图片

muted：静音

source元素：引入视频

格式：

MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

音频

src：音频路径

controls:控制条

autoplay：自动播放

loop：循环播放

CSS3 样式兼容

-ms- 兼容IE浏览器

-moz- 兼容firefox

-o- 兼容opera

-webkit- 兼容chrome 和 safari

颜色表示法

rgba()表示法：a 表示 alpha 透明度，1 表示不透明，0 表示全透明。rgba不会影响子元素，opacity会影响子元素

hsl()表示法：h 色相、s 饱和度、l 明度

hsla()表示法：h 色相、s 饱和度、l 明度、a 透明度

盒模型拓展

box-sizing： border-box;内减盒模型 content-box;外拓盒模型

圆角 border-radius

为每个角单独设置两个临界边的半径

border-top-left-radius: top边半径 left边半径;

border-top-right-radius: top边半径 right边半径;

border-bottom-left-radius: bottom边半径 left边半径;

border-bottom-right-radius: bottom边半径 right边半径;

border-radius：上左上右右下左下；

border-radius：10px 20px; 上左右下为10px, 上右左下为20px；

border-radius：10px / 20px; top边10px, left边为20px；

border-radius：1px 2px 3px 4px / 5px 6px 7px 8px; top / left

盒子阴影

box-shadow:(水平偏移量 , 垂直偏移量 , 模糊半径(选), 投影尺寸(选), 阴影颜色 , 投影方式(选))

字体阴影

text-shadow: (h-shadow v-shadow blur color) 水平偏移量, 垂直偏移量 , 模糊半径(选), 阴影颜色

背景设置

background-origin ：背景起源，第一张图片绘制位置（背景图片）

padding-box：相对于内边距框来定位（默认值）

border-box：相对于边框盒来定位

content-box：相对于内容框来定位

background-clip ：背景裁切（背景色与背景图片）

border-box：裁剪到边框盒（默认值）

padding-box：裁剪到内边距框

content-box：裁剪到内容区

background-size ：背景尺寸（对背景图片放大缩小）

像素表示法：背景图的宽度背景图的高度

百分数表示：背景图的宽度是整个大背景宽度的比背景图的高度是整个大背景高度的比

单词表示法：cover 表示覆盖，尽可能大，contain 表示容纳，显示全部

线性渐变

渐变使用的是 background-image 而不是 background-color 。

linear-gradient(top left,red,yellow,orange) 起始方向结束方向(选) 渐变颜色

linear-gradient(left,red 20%,green 60%,blue 80%);颜色后面书写百分数，表示该颜色在整体渐变中出现的位置。

径向渐变

radial-gradient(red,yellow,blue)

circle 圆形 如：radial-gradient(circle,red,yellow,blue)

ellipse 椭圆 如：radial-gradient(ellipse,red,yellow,blue)

渐变位置，特殊变量设置：radial-gradient(circle at left top,red,yellow,blue)

定点位置：radial-gradient(circle at 800px 400px,red,yellow,blue)

过渡

transition: all 2s linear 0s； 参与过渡的属性完成时间缓冲描述延迟时间 (只要是数值型的属性以及颜色都可以参与过渡。 )

transition-property（参与过渡属性），

transition-duration（过渡时间）

transition-timing-function（缓存描述）（linear匀速 ease两头慢,中间块）

transition-delay（延迟时间）ms / s

变换

transform: rotate(30deg); 旋转：顺时针为正

transform: scale(2); 缩放：大于1放大， 0到1是缩小

transform: skew(30deg, 20deg); 斜切：水平斜切垂直斜切

transform: translate(100px, 100px); 移动：水平移动垂直移动

transform: translateX(100px) translateY(100px);

transform: rotate(30deg) scale(0.5) skew(10deg) translate(200px, 200px); 复合写法（旋转缩放斜切移动）