CSS3开发文档

时间 2019-11-09

标签 css3 css 开发文档栏目 CSS 繁體版

原文原文链接

站点：前端开发文档
原文： CSS选择器
原文： CSS继承属性
原文： CSS3核心模块
原文： CSS盒子模型
原文： CSS背景图像
原文： CSS清除浮动
原文： CSS定位

CSS选择器

并集：对选择器进行分组，被分组的选择器能够分享相同的声明。用逗号将须要分组的选择器开分。html
- h1,h2,h3,h4,h5,h6{}
交集：两种属性同属一个元素前端
- p.name{}、p#id{}、.name1.name2{}
后代（派生）：根据元素在位置上的关系定义样式，使用空格隔开，后代选择器尽可能不要超过3个，没必要把每一个层级都列出，只须要写关键点便可node
- li strong {}
子代：只能选择做为某元素的子元素，只选择子代，日后孙子一代不选择git
- h1 > strong {}
兄弟和相邻兄弟：选择紧接在另外一元素后的，而且两者有相同父元素github
- h1 + p {}
属性：对带有指定属性的HTML元素设置样式，权重为10web
- 属性选择器：为带有title属性的全部元素设置样式，[title] {}
- 属性和值选择器：为title="name"的全部元素设置样式，[title=name] {}
- 设置表单的样式：input[type="text"] {}
伪类：面试
- :active：被激活的元素
- :focus：有键盘输入焦点的元素
- :hover：鼠标悬停
- :link：未被访问的连接
- :visited：已被访问的连接
- :first-child：元素的第一个子元素
- :lang：带有指定lang属性的元素
权重：windows
- div（1）
- class/类选择器（10）
- id（100）
结构选择器（新增伪类（面试题））浏览器
- :not：排除
- :nth-child(n)：第几个元素从1开始设置
- :nth-child(2n)：偶数元素从0开始设置
- :nth-child(2n+1)：奇数元素
- :nth-of-type(n)：某个元素下同类型的第几个元素
- :nth-last-child：倒数第几个元素
- :first-child->:nth-child(1)：
- :fisrt-of-type：第一个同级兄弟元素
- :last-of-type：最后一个同级兄弟元素
- :nth-of-type(n)：第几个同级兄弟元素
- :last-child：最后一个子元素
- :only-child：仅有一个子元素
- :only-of-type：只有一个同类型的子元素
- :empty：空内容
- :checked：被选中主要用在input表单元素
属性选择器frontend
- E[attr=val]：
- E[attr|=val]：只能等于val 或只能以val-开头
- E[attr*=val]：包含val字符串
- E[attr~=val]：属性值有多个，其中一个是val
- E[attr^=val]：以val开头
- E[attr$=val]：以val结尾
目标伪类选择器
- :target()：用来匹配URL指向的目标元素（存在URL指向该匹配元素时，样式效果才会生效）
伪元素：
- :first-line：匹配首行文本，只能用于块级元素
- :first-letter：匹配首字符
- :before/:after：DOM元素先后插入额外的内容
  - 遇到伪元素before/after就要加上content=''
  - display: block;：独占一行
  - display: inline-block;：不独占一行

CSS继承属性

无继承性的属性
1. display：规定元素应该生成的框的类型
2. 文本属性：
  - vertical-align：垂直文本对齐
  - text-decoration：添加文本装饰
  - text-shadow：文本阴影效果
  - white-space：空白符的处理
  - unicode-bidi：设置文本的方向
3. 盒子模型的属性：
  - width、height
  - margin、margin-top/right/bottom/left
  - border、border-top/right/bottom/left
  - border-style、border-top/right/bottom/left-style
  - border-width、border-top/right/bottom/left-width
  - border-color、border-top/right/bottom/left-color
  - padding、padding-top/right/bottom/left
4. 背景属性：
  - background
  - background-color
  - background-image
  - background-repeat
  - background-position
  - background-attachment
5. 定位属性：
  - float
  - clear
  - position
  - top/right/bottom/left
  - min-width/min-height、max-width/max-height
  - overflow
  - clip
  - z-index
6. 生成内容属性：
  - content
  - counter-reset
  - counter-increment
7. 轮廓样式属性：
  - outline-style
  - outline-width
  - counter-color
  - outline
有继承性的属性
1. 字体系列属性
  - font：组合字体
  - font-family：字体系列
  - font-weight：字体粗细
  - font-size：字体尺寸
  - font-style：字体风格
  - font-variant：小写字母转换为大写，字体尺寸更小
  - font-stretch：对当前font-family进行伸缩变形。全部主流浏览器不支持。
  - font-size-adjust：为某个元素规定一个aspect值，保持首选字体的x-height
2. 文本系列属性
  - text-indent：文本缩进
  - text-align：文本水平对齐
  - line-height：行高
  - word-spacing：字间距
  - letter-spacing：字符间距
  - text-transform：控制文本大小写
  - direction：文本书写方向
  - color：文本颜色
3. 元素可见性：visibility
4. 表格布局属性
  - caption-side
  - border-collapse
  - border-spacing
  - empty-cells
  - table-layout
5. 列表布局属性
  - list-style-type
  - list-style-image
  - list-style-position
  - list-style
6. 生成内容属性：quotes
7. 光标属性：cursor
8. 页面样式属性
  - page
  - page-break-inside
  - windows
  - orphans

CSS3核心模块

过渡动画

transition：过渡动画
- transition-property：过渡属性 all[attr]
- transition-duration：过渡时间
- transition-delay：延迟时间
- transition-timing-function：运行类型
  - ease：（逐渐变慢）默认值
  - linear：匀速
  - ease-in：加速
  - ease-out：减速
  - cubic-bezier：贝塞尔曲线

过渡动画效果思考步骤：

找到过渡属性
找到过渡属性起始值和结束值
在合适的位置上增长transition属性

2D变换

transform：变形属性
- rotate()：旋转函数
  - deg：度数
  - transform-origin：旋转的基点
- skew()：倾斜函数
  - skewX()
  - skewY()
- scale()：缩放函数默认值是1
  - scaleX()
  - scaleY()
- translate()：位移函数
  - translateX()
  - translateY()

animation-声明关键帧

关键帧——@keyframes
- 相似于flash
  - 定义动画在每一个阶段的样式，即帧动画
- 关键帧的时间单位
  - 数字：0%、25%、100%等（设置某个时间段内任意时间点的样式）
  - 字符：from(0%)、to(100%)：
- 格式
  - @keyframes：动画名称
  - {动画状态}

animation-调用动画

必要属性
- animation-name：动画名称（关键帧名称）
- animation-duration：动画执行时间
可选属性：
- animation-timing-function
  - linear：匀速
  - ease：缓冲
  - ease-in：由慢到快
  - ease-out：由快到慢
  - ease-in-out：由慢到快再到慢
  - ease-bezier(num,num,num,num)：特定的贝塞尔曲线类型，4个数值需在[0,1]区间内
- animation-delay：动画延迟
- animation-iteration-count：重复次数
- animation-direction：动画运行的方向 normal|reverse|alternate|alternate-reverse
- animation-play-state：动画状态 running|paused
- animation-fill-mode：动画结束后的状态 none|forwards|backwards|both

3D变换

transform-style: flat|preserve-3d：3D空间展现
perspective：景深效果
transform: persective(800px)：直接做用在子元素上
transform：新增函数
- translate3d(tx, ty, tz)：translateX() translateY() translateZ()
- rotate3d(rx, ry, rz, a)：rotateX() rotateY() rotateZ()
- scale3d(sx, sy, sz)：sacleX() sacleY() sacleZ()

圆角 border-radius

border-radius：1-4个数字/1-4个数字
- 水平半径/垂直半径
- 四个数字方向分别是左上右上右下左下
- 没有/则水平半径和垂直半径同样
  - border-radius: 10px/5px;
  - border-radius: 60px 40px 30px 30px/30px 20px 10px 5px
  - 例子：圆椭圆半圆扇形

线性渐变 linear-gradient

linear-gradient：（[<起点>||<角度>,]?<点>,<点>...）
只能用在背景上
颜色是沿着一条直线轴变化
参数
- 起点：开始渐变方向
- 角度：开始渐变角度
- 点：渐变点的颜色和位置
重复线性渐变

径向渐变 radial-gradient

radial-gradient
从“一点”向多个方向颜色渐变
shape形状：ellipse、circle或设置水平半径，垂直半径
size：渐变的大小，即渐变中止位置：
- closet-side：最左边
- farthest-side：最远边
- closet-corner：最近角
- farthest-corner：最远角（默认值）
position：关键词|数值|百分比
重复的径向渐变

背景

background-origin
- padding-box：从padding区域显示
- border-box：从border区域显示
- content-box：从content区域显示
background-clip
- padding-box：从padding区域向外裁剪
- border- box：从border区域向外裁剪
- content-box：从content区域向外裁剪
- text：文本裁剪
background-size
- 100% 100%：百分比
- 10px 10px：数值
- contain：按原始比例收缩，背景图显示完整，但不必定铺满整个容器
- cover：按原比例收缩，背景图可能显示不完整，但铺满整个容器
background-attachment
- 背景图片是滚动/固定 fixed(固定的) 默认是滚动的

盒子阴影

box-shadow：h v blur spread color inset;
- h：水平方向偏移
- v：垂直方向偏移
- blur：模糊半径
- spread：扩展半径
- color：颜色
- inset：内阴影，默认是外阴影

文本阴影

text-shadow：x y blur color
- x轴偏移 y轴偏移模糊度颜色
- 多层阴影制做文字立体效果，设置多种颜色，中间以逗号隔开
文字添加边框
- text-stroke：2px blue
  - 经过设定1px的透明边框，可让文字变得平滑
  - 颜色设成透明可以建立镂空字体

滤镜

-webkit-filter:normal;：正常
-webkit-filter:grayscale(1);：灰度，取值范围0-1
-webkit-filter:brightness(0);：亮度，取值范围0-1
-webkit-filter:invert(1);：反色，取值范围0-1，0为原图，1为完全反色
-webkit-filter:sepia(0.5);：叠加褐色，取值范围0-1
-webkit-filter:hue-rotate(30deg);：色相（按照色相环旋转，顺时针方向）（红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红）此处为叠加黄色滤镜
-webkit-filter:saturate(4);：饱和度，取值范围0-*，0为无饱和度，1为原图，值越高，饱和度越大
-webkit-filter:contrast(2);：对比度，取值范围0-*，0为无对比度（灰色），1为原图，值越高对比度越大
-webkit-filter:opacity(0.8);：透明度，取值范围0-1，0为全透明，1为原图

遮罩

mask-image：
mask-position：
mask-repeat：

CSS盒子模型

border边框

三角形箭头：
- 正方形的任意相邻两条边，而后旋转必定的角度，获得咱们须要的任意方向的箭头
- border、border-width、border-style、border-color
三角形：
- border的3个属性：border-width/border-style/border-color，宽度和高度都为0，三角形箭头方向设定颜色，其他方向颜色设为透明transparent

margin边距

margin边距重叠：取大值，不是二者相加之和。
margin-top的传递：大盒嵌套小盒，小盒加margin-top值，传递到大盒，致使总体下移。
- 解决margin的兼容性问题：
  1. float: left;
  2. overflow: hidden;
  3. padding-top: 0/1px;
  4. border-top: 1px solid transparent;

CSS背景图像

background背景

主要属性：

background-color：背景颜色，简写background
- 不能继承，默认是transparent
- inherit 指定背景颜色，从父元素继承
background-image：背景图片
- url：图片URL地址
- node：默认值背景上未放置图片
- inherit：指定背景图片从父元素继承
- 一个元素能够引入多张背景图片；
  - 指定要使用的一个或多个背景图片，默认状况下，background-image放置在元素的左上角，并重复垂直和水平方向
- 属性不能继承
background-repeat：背景重复
- 默认重复background-image的垂直和水平方向
- repeat 默认
- repeat-x 只有水平位置重复
- repear-y 只有垂直位置重复
- no-repeat 不重复
- inherit 从父元素继承
background-position：背景定位
- 设置背景图片的起始位置
- x、y 水平位置，垂直位置。左上角是0。单位（px，关键字，百分数）
- 关键字成对出现left right top bottom center，仅指定一个关键字，其余值将会是center
- 只设定x轴方向，默认y轴为center
- inherit 从父元素继承
background-attachment：背景关联
- 设置背景图片固定或随页面的其他部分滚动
- scroll 默认
- fixed 固定
- inherit 从父元素继承
background-size：背景图像的尺寸大小
- <length> 长度值指定图像大小。不容许负值
- <percentage> 百分比指定图像大小。不容许负值
- auto 图像的真实大小
- cover 将背景图像等比例缩放到彻底覆盖容器，有可能超出容器
- contain 等比例所放到宽/高与容器的宽/高相等，背景图像始终被包含在容器内
background-origin：设置背景图像的参考原点（位置）
- padding-box：从padding区域（含padding）开始显示背景
- border-box：从border区域（含border）开始显示背景
- content-box：从content区域开始显示背景
background-clip：设置对象的背景图像向外裁剪的区域
- padding-box：从padding区域（不含padding）开始向外裁剪背景
- border-box：从border区域（不含border）开始向外裁剪背景
- content-box：从content区域开始向外裁剪背景
- text：从前景内容的形状（好比文字）做为裁剪区向外裁剪，实现使用背景做为填充色之类的遮罩效果。
雪碧图：background-position: x y

CSS清除浮动

overflow: hidden

overflow溢出隐藏
清除浮动
解决margin-top的传递问题

（面试题）：

单行文本出现省略号（4个必备条件，缺一不可）
- width 宽度（不写宽度，默认继承父元素宽度）
- overflow: hidden;（溢出隐藏）
- white-space: nowrap;
- text-overflow: ellipsis;文字隐藏的方式，以省略号的方式隐藏
多行文本出现省略号（必备条件，主要应用在移动端）
- display: -webkit-box; 弹性盒模型
- -webkit-box-orient: vertical;规定元素的排列方式：垂直排列
- -webkit-line-clamp: 2;：文字的行数（自定义）
- overflow: hidden;溢出隐藏
多个元素在一行显示的方法
- display: inline;
- display: inline-block;
- float: left/right;

display: inline-block;元素的特色

盒子横向排列
verticle-align属性会影响inline-block元素，值可能会设为top
须要设置每一列的宽度
若是HTML源码中元素间有空格，列与列之间会产生空隙
- 解决方法：
  - 若是元素添加了dispay: inline-block;，父元素增长一个属性font-size: 0;，同时在元素自己增长font-size属性进行覆盖
display:inline-block;在IE6/7下不兼容的解决方法
- 增长display: inline; zoom: 1;属性

IE7下块元素兼容display: inline-block;写法？

直接让块元素设置为内联对象（设置属性 display: inline;），而后触发块元素的layout（如：zoom: 1;等）。
兼容各浏览器的代码以下：div {display: inline-block; *display: inline; *zoom: 1;}

`float`浮动

float元素的特色

在一行显示
设置属性值为left时，浮动元素依次从父级盒子的左侧向右排列
自动具备块级元素的属性，不须要添加display: block;
脱离文档流
子元素不会继承浮动属性
浮动元素下面的元素不能识别浮动元素的高度和位置，占据浮动元素的位置
全部的元素均可以使用浮动属性

文档流和脱离文档流

文档流：元素排版布局过程当中，元素自动从左往右，从上往下的流式排列。
每一个非浮动元素块级元素独占一行，浮动元素按规则浮在行的一端。当前行容量满则另起一行浮动。
内联元素不会独占一行
几乎全部元素（包括块级、内敛和列表元素）都可生成子行，用于摆放子元素
标准文档流等级：分为两个等级，块级元素和行内元素
脱离文档流：文档流内的正常元素识别不到这个元素（脱离文档流的元素至关于平行漂浮于文档流之上）

float元素产生的影响

父元素设置背景颜色background-color不起做用
父元素设置内边距属性padding不会被撑开
父元素设置边框属性border不会被撑开

清除浮动`float`

清除浮动的方法

给浮动元素的父级元素添加固定的高度height（不推荐）
给浮动元素的父级元素添加溢出隐藏属性overflow: hidden;；
给最后一个浮动元素后面添加一个块级元素，这个块级元素带有clear: both;属性
- clear清除浮动元素对文档流内元素的影响（可让文档流内的元素识别到浮动元素的高度）
- left清除float为left的影响
- right清除float为right的影响
- both清除float全部的影响
- inherit从父级元素上继承该属性值
clearfix清除浮动（固定代码）
- 利用伪元素:after清除浮动必备条件，缺一不可
- display: block;确保元素是一个块级元素
- clear: both;不容许左右两边有浮动对象
- content: '';伪元素:brfore/:after自带的属性，若是不写，伪元素不起做用
- 写全的样式属性；不是必备条件
- height: 0; 防止在低版本浏览器中默认height: 1px;的状况，用height: 0;去覆盖
- font-size: 0; 字体大小
- overflow: hidden; 溢出隐藏
- visibility: hidden; 让全部可见性的元素隐藏

overflow: hidden;和visibility: hidden;有什么区别？

（面试题）：如何让一个元素消失？

opacity: 0;[0-1] 透明度
display: none; 隐藏
widht/height/line-height + overflow：宽/高/行高 + 溢出隐藏
visibility: hidden;让全部可见性的元素隐藏

clear: both;的特色

元素须要是块级元素
元素不能带有浮动属性
元素必须放在最后一个浮动元素的后面

CSS定位

相对定位-position: relative;
- 没有脱离文档流
- 参照物是元素自己位置
- 当top和bottom同时有值的状况下，top值生效，支持负值
- 当left和right同时有值的状况下，left值生效，支持负值
- 任何元素均可以设置相对定位属性
- 相对定位元素位移发生改变，但元素原来的位置还会被占用，其余元素仍是正常识别这个元素原来的位置
绝对定位-position: absolute;
- 脱离文档流
- 能够设置参照物，参照物必须是其父级元素（直系父级），若是没有直接父级会一直往上查找直到找到最外层的根元素为止；
- 有宽度和高度的状况下，top和bottom同时有值，top生效；left和right同时有值，left生效。
- 没有宽度和高度的状况下，top和bottom同时设置值的状况下，会将这个盒子拉大，上下值都起做用，左右同理。
- 能够设置层级关系z-index属性，必需要和定位元素（绝对，相对，固定）同时使用，才会起做用。
- 一个元素定位在另外一个元素上或者两个元素叠加的状况，均可以使用定位（绝对定位）
- 绝对定位必定要设置相对参照物
固定定位-position: fixed;
- 脱离文档流
- 参照物是浏览器的可视窗口
- 任何元素均可以设置固定定位
- 可设置top/bottom/left/right四个方位
- 可经过z-index改变层级
z-index属性的特色
- 默认是书写顺序在后的定位元素覆盖顺序在前的定位元素
- 可使用z-index属性修改定位元素的层级关系
- 全部定位元素的z-index默认值都同样
- z-index值是数字没有单位，支持负数
- 通常都是同级元素进行层级的比较
- 当参照物是相对定位或绝对定位的时候，父级元素之间没有z-index值，子元素的z-index值进行比较