CSS3开发文档

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

CSS选择器

  • 并集:对选择器进行分组,被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器开分。

    • h1,h2,h3,h4,h5,h6{}
  • 交集:两种属性同属一个元素

    • p.name{}p#id{}.name1.name2{}
  • 后代(派生):根据元素在位置上的关系定义样式,使用空格隔开,后代选择器尽量不要超过3个,不必把每个层级都列出,只需要写关键点即可

    • li strong {}
  • 子代:只能选择作为某元素的子元素,只选择子代,往后孙子一代不选择

    • h1 > strong {}
  • 兄弟和相邻兄弟:选择紧接在另一元素后的,并且二者有相同父元素

    • h1 + p {}
  • 属性:对带有指定属性的HTML元素设置样式,权重为10

    • 属性选择器:为带有title属性的所有元素设置样式,[title] {}
    • 属性和值选择器:为title="name"的所有元素设置样式,[title=name] {}
    • 设置表单的样式input[type="text"] {}
  • 伪类:

    • :active:被激活的元素
    • :focus:有键盘输入焦点的元素
    • :hover:鼠标悬停
    • :link:未被访问的链接
    • :visited:已被访问的链接
    • :first-child:元素的第一个子元素
    • :lang:带有指定lang属性的元素
  • 权重:

    • 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表单元素
  • 属性选择器

    • 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. 盒子模型的属性:

      • widthheight
      • marginmargin-top/right/bottom/left
      • borderborder-top/right/bottom/left
      • border-styleborder-top/right/bottom/left-style
      • border-widthborder-top/right/bottom/left-width
      • border-colorborder-top/right/bottom/left-color
      • paddingpadding-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-heightmax-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:贝塞尔曲线

过渡动画效果思考步骤:

  1. 找到过渡属性
  2. 找到过渡属性起始值和结束值
  3. 在合适的位置上增加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形状:ellipsecircle或设置水平半径,垂直半径
  • 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边框

  • 三角形箭头:

    • 正方形的任意相邻两条边,然后旋转一定的角度,得到我们需要的任意方向的箭头
    • borderborder-widthborder-styleborder-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:背景定位

    • 设置背景图片的起始位置
    • xy 水平位置,垂直位置。左上角是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

  1. overflow溢出隐藏
  2. 清除浮动
  3. 解决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元素的特点

  1. 在一行显示
  2. 设置属性值为left时,浮动元素依次从父级盒子的左侧向右排列
  3. 自动具有块级元素的属性,不需要添加display: block;
  4. 脱离文档流
  5. 子元素不会继承浮动属性
  6. 浮动元素下面的元素不能识别浮动元素的高度和位置,占据浮动元素的位置
  7. 所有的元素都可以使用浮动属性

文档流和脱离文档流

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

float元素产生的影响

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

清除浮动float

清除浮动的方法

  1. 给浮动元素的父级元素添加固定的高度height(不推荐)
  2. 给浮动元素的父级元素添加溢出隐藏属性overflow: hidden;
  3. 给最后一个浮动元素后面添加一个块级元素,这个块级元素带有clear: both;属性

    • clear清除浮动元素对文档流内元素的影响(可以让文档流内的元素识别到浮动元素的高度)
    • left清除floatleft的影响
    • right清除floatright的影响
    • both清除float所有的影响
    • inherit从父级元素上继承该属性值
  4. 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;有什么区别?

(面试题):如何让一个元素消失?

  1. opacity: 0;[0-1] 透明度
  2. display: none; 隐藏
  3. widht/height/line-height + overflow:宽/高/行高 + 溢出隐藏
  4. visibility: hidden;让所有可见性的元素隐藏

clear: both;的特点

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

CSS定位

  • 相对定位-position: relative;

    • 没有脱离文档流
    • 参照物是元素本身位置
    • topbottom同时有值的情况下,top值生效,支持负值
    • leftright同时有值的情况下,left值生效,支持负值
    • 任何元素都可以设置相对定位属性
    • 相对定位元素位移发生改变,但元素原来的位置还会被占用,其他元素还是正常识别这个元素原来的位置
  • 绝对定位-position: absolute;

    • 脱离文档流
    • 可以设置参照物,参照物必须是其父级元素(直系父级),如果没有直接父级会一直往上查找直到找到最外层的根元素为止;
    • 有宽度和高度的情况下,topbottom同时有值,top生效;leftright同时有值,left生效。
    • 没有宽度和高度的情况下,topbottom同时设置值的情况下,会将这个盒子拉大,上下值都起作用,左右同理。
    • 可以设置层级关系z-index属性,必须要和定位元素(绝对,相对,固定)同时使用,才会起作用。
    • 一个元素定位在另一个元素上或者两个元素叠加的情况,都可以使用定位(绝对定位)
    • 绝对定位一定要设置相对参照物
  • 固定定位-position: fixed;

    • 脱离文档流
    • 参照物是浏览器的可视窗口
    • 任何元素都可以设置固定定位
    • 可设置top/bottom/left/right四个方位
    • 可通过z-index改变层级
  • z-index属性的特点

    • 默认是书写顺序在后的定位元素覆盖顺序在前的定位元素
    • 可以使用z-index属性修改定位元素的层级关系
    • 所有定位元素的z-index默认值都一样
    • z-index值是数字没有单位,支持负数
    • 一般都是同级元素进行层级的比较
    • 当参照物是相对定位或绝对定位的时候,父级元素之间没有z-index值,子元素的z-index值进行比较
阅读 2.6k

寒青
前端工程师

前端开发文档

10.2k 声望
3.7k 粉丝
0 条评论

前端开发文档

10.2k 声望
3.7k 粉丝
文章目录
宣传栏