CSS 2&3 知识点整理

CSS

层叠样式表(Cascading Style Sheets)

行内样式

写在标签的 style 属性中,又称内联样式

<h1 style="color:red">h1>

内部样式

写在 html 页面内部,将所有的 CSS 代码提取出来,单独放在 style 标签里

<style>

h1{
   font-size:28px;
   color:red
}
style>

外部样式

写在单独的 .css 文件中,随后在 HTML 中引入使用

  1. 新建一个扩展名为 .css 的样式文件

  2. 在 HTML 中引入 .css文件

    <link rel="stylesheet" href="./xxx.css">
    

样式表优先级

优先级规则:行内样式 > 内部样式 = 外部样式

CSS 语法规范

CSS 语法由两部分构成:

  • 选择器:找到要添加样式的元素
  • 声明块:设置具体的样式

注释:/* … */

CSS 代码风格

  • 展开风格:开发时推荐
  • 紧凑风格:项目上线时推荐

CSS 选择器

基本选择器

  • 通配选择器
  • 元素选择器
  • 类选择器
  • id选择器
通配选择器

可以选中所有的 HTML 元素

* {
  margin:0;
  padding:0
}
元素选择器

为页面中某种元素统一设置样式

h1{
   font-size:28px;
   color:blue;
}
类选择器

根据元素的 class 值,来选中某些元素

<div class="container">
    <h1>xxxh1>
div>
.contaner{
    width:400px;
    height:300px;
    color:blue;
}
id选择器

根据元素的 id 属性值,来精准的选中某个元素

<div id="root">
    <h1>xxxh1>
div>

复合选择器

  • 交集选择器
  • 并集选择器
交集选择器

选中同时符合多个条件的元素

语法:选择器1选择器2…选择器n{ }

<div>
    <p>段落一p>
    <p>段落二p>
    <p class="beauty">段落三p>
div>
p.beauty{
    color:green
}

注意:有标签名,标签名必须写在前面

并集选择器

选中多个选择器对应的元素,又称分组选择器

语法:选择器1,选择器2,选择器3,…选择器n{ }

<div>
      <p class="a">段落一p>
      <p class="b">段落二p>
      <p class="c">段落三p>
div>
.a,
.b,
.c {
    font-size: 28px;
    color: blue;
}
后代选择器

选中指定元素中,符合要求的后代元素

语法:选择器1 选择器2 选择器3 … 选择器n { }

ul li{
    color:blue
}
子代选择器

选中指定元素中,符合要求的子元素

语法:选择器1>选择器2>…选择器n{ }

div>h1{
    color:blue;
}
兄弟选择器

相邻兄弟选择器:选中指定元素后,符合条件的相邻兄弟元素

语法:选择器1+选择器2{ }

通用兄弟选择器:选中指定元素后,符合条件的所有兄弟元素

语法:选择器1~选择器2{ }

div+p{
    color:blue;
}

div~p{
    color:green;
}
属性选择器

选中属性值符合一定要求的元素

语法:

  1. [属性名] 选中具有某个属性的元素
  2. [属性名=“值”] 选中包含某个属性且指定属性值的元素
  3. [属性名^=“值”] 指定属性值的开头
  4. [属性名$=“值”] 指定属性值的结尾
  5. [属性名*=“值”] 指定属性值包含指定值
[title]{
    color:blue;
}

[title="title1"]{
    color:green;
}

[title^="a"]{
    color:red
}

[title$="a"]{
    color:yellow
}

[title*="a"]{
    color:#333
}
伪类选择器

选中特殊状态的元素

动态伪类

a:link{
    color:orange
}

a:visited{
    color:gray
}

a:hover{
    ...
}

a:active{
    ...
}

input:focus{
    ...
}

结构伪类

p:first-child{
    ...
}

p:last-child{
    ...
}

p:nth-child(n){
    ...
}

div>p:first-of-type{
    ...
}

div>p:last-of-type{
    ...
}

div>p:nth-of-type(n){
    ...
}

否定伪类

div>p:not(xxx){
    ...
}

UI伪类

input:checked{
    ...
}

input:disabled{
    ...
}

目标伪类

<a href="#one">目标伪类a>

<div id="one">div>
div:target{
    ...
}

语言伪类

<div lang="en">xxxdiv>
div:lang(en){
    ...
}
伪元素选择器

选中元素中的一些特殊位置

p::first-letter{
    ...
}

div::first-line{
    ...
}

div::selection{
    ...
}

input::placeholder{
    ...
}

p::before{
    content:"xxx"
    ...
}

p::after{
    content:"xxx";
    ...
}

选择器优先级

!important > 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式

CSS 三大特性

  • 层叠性
  • 继承性
  • 优先级

CSS 颜色

  • 颜色名
  • rgb、rgba
  • hex、hexa:#fff、#aaa
  • hsl、hsla

CSS 相关属性

CSS 常用字体属性
  • 字体大小:font-size
  • 字体族:font-family
  • 字体风格:font-style
    • nomal:正常
    • italic:斜体
    • oblique:斜体
  • 字体粗细:font-weight
    • light
    • normal
    • bold
    • bolder
  • 字体复合属性:font:weight style size family
CSS 常用文本属性
  • 文本颜色:color
  • 文本字母间距:letter-spacing
  • 文本单词间距:word-spacing
  • 文本修饰:text-decoration
    • overline dotted green
    • underline wavy red
    • line-through
    • none
  • 文本缩进:text-indent
  • 文本水平对齐:text-align
    • left
    • center
    • right
  • 行高:line-hight
    • normal
    • 像素
    • 数字
    • 百分比
  • 同一行元素间或表格单元格内文字的垂直对齐:vertical-align
    • baseline
    • top
    • middle
    • bottom
CSS 列表相关属性
  • 列表符号:list-style-type
    • none
    • square
    • disc
    • decimal
    • lower-roman
    • upper-roman
    • lower-alpha
    • upper-alpha
  • 列表符号的位置:list-style-position
    • inside
    • outside
  • 自定义列表符号:list-style-image
  • 列表复合属性:list-style
CSS 边框相关属性
  • 边框宽度:border-width
  • 边框颜色:border-color
  • 边框风格:border-style
  • 边框复合属性:border
CSS 表格相关属性
  • 表格列宽:table-layout
    • auto
    • fixed
  • 单元格间距:border-spacing
  • 合并相邻单元格的边框:border-collapse
    • collapse:合并
    • separate:不合并
  • 隐藏没有内容的单元格:empty-cells
    • show
    • hide
  • 设置表格标题的位置:caption-size
    • top
    • bottom
CSS 背景相关属性
  • 背景颜色:background-color
  • 背景图片:background-image:ul(…/image)
  • 背景重复方式:background-repeat
    • repeat
    • repeat-x
    • repeat-y
    • no-repeat
  • 背景图片的位置:background-position
  • 背景复合属性:background
CSS 鼠标相关属性
  • 鼠标光标:cursor
    • pointer
    • move
    • text
    • crosshair
    • wait
    • help
    • 自定义:url(…/image), pointer

CSS 常用长度单位

  • 像素:px
  • 相对元素font-size的倍数:em
  • 相对html根字体大小:rem
  • 相对父元素计算:%

CSS 元素的显示模式

  • 块元素(block)
    • 页面中独占一行,从上到下排列
    • 默认宽度:撑满父元素
    • 默认高度:由内容撑开
    • 可通过CSS设置宽高
    • 相关标签:
      • 主体结构:html、body
      • 排版标签:h1~h6、hr、p、pre、div
      • 列表标签:ul、ol、li、dl、dt、dd
      • 表格标签:table、tbody、thead、tfoot、tr、caption
      • form、option
  • 行内元素(inline)
    • 页面中不独占一行,从左到右排列
    • 默认宽度:由内容撑开
    • 默认高度:由内容撑开
    • 无法通过CSS设置宽高
    • 相关标签:
      • 文本标签:br、em、strong、sup、sub、span
      • a、label
  • 行内块元素(inline-block)
    • 在页面中不独占一行,从左至右排列
    • 默认宽度:由内容撑开
    • 默认高度:由内容撑开
    • 可以通过CSS设置宽高
    • 相关标签:
      • img、td、th、input、textarea、select、button、iframe
修改元素的显示模式
  • display
    • none
    • block
    • inline
    • inline-block

CSS 盒子模型

盒子模型的组成
  • 外边距:margin
  • 边框:border
  • 内边距:padding
  • 内容:content

盒子的大小 = content + 2 * padding + 2 * border

盒子内容区(content)
  • 宽度:width
  • 最大宽度:max-width
  • 最小宽度:min-width
  • 高度:height
  • 最大高度:max-height
  • 最小高度:min-height
关于默认宽度

指不设置width属性时,元素所呈现的宽度

总宽度 = 父的content - 自身左右margin

内容区的宽度 = 父的content - 自身左右margin - 自身左右border - 自身左右padding

盒子内边距(padding)
  • 上内边距:padding-top
  • 右内边距:padding-right
  • 下内边距:padding-bottom
  • 左内边距:padding-left
  • 复合属性:padding

注意:

  1. padding不能为负数
  2. 行内元素左右内边距可以设置,上下内边距不能设置
  3. 块级元素、行内块元素四周内边距都可以设置
盒子的边框(border)
  • 边框线风格:border-style
    • none
    • solid
    • dashed
    • dotted
    • double
  • 边框线宽度:border-width
  • 边框线颜色:border-color
  • 复合属性:border
  • 各个方向的边框:border-left/right/top/bottom
盒子的外边距(margin)
  • 左外边距:margin-left
  • 右外边距:margin-right
  • 上外边距:margin-top
  • 下外边距:margin-bottom
  • 复合属性:margin

注意:

  1. 子元素margin根据父元素content计算
  2. 上左margin影响自身位置,下右margin影响兄弟元素位置
  3. 块级元素、行内块元素可设置四方向margin;行内元素左右margin有效,上下margin无效
  4. margin可以是负值
margin塌陷问题

margin塌陷:第一个子元素的上margin和最后一个子元素的下margin会作用在父元素上(历史遗留问题)

解决方法:

  1. 父元素设置padding
  2. 父元素设置border
  3. 父元素设置overflow:hidden
margin合并问题

margin合并:上兄弟元素的下外边距和下兄弟元素的上外边距会合并,取最大值

处理内容溢出
  • 处理溢出内容:overflow
    • visible
    • hidden
    • scroll
    • auto
  • 水平方向溢出:overflow-x
  • 垂直方向溢出:overflow-y
隐藏元素的方式
  • visibility:hidden(占位)
  • display:none(不占位)
样式的继承

会继承的css属性

字体属性、文本属性等

不会继承的css属性

边框、背景、内边距、外边距、宽高、溢出方式等

规律:不影响布局的属性可继承,和盒子模型有关的属性无法继承

元素的默认样式

元素一般都有些默认的样式,如:

  1. a元素:下划线、字体颜色、鼠标小手…
  2. h1~h6:文字加粗、大小,上下外边距

优先级:元素的默认样式 > 继承的样式

元素间空白问题

行内元素、行内块元素,彼此间的换行会被浏览器解析为一个空白字符

解决方案:给父元素设置font-size:0,再给需要显示文字的元素单独设置字体大小。

行内块的幽灵空白问题

行内块与文本的基线对其,而文本的基线与文本最底端之间有一定距离的

解决方案:

  1. 行内块设置vertical
  2. 父元素设置font-size:0,行内块中文本单独设置
  3. 若父元素中只有一张图片,设图片为display:block

CSS 浮动

最初,浮动是用来实现文字环绕图片效果的,现在是主流的页面布局方式之一。

浮动后的特点
  1. 脱离文档流
  2. 默认宽高浮动后都是被内容撑开
  3. 不会独占一行,可以与其他元素共用一行
  4. 不会margin合并,也不会margin塌陷
  5. 不会像行内块一样被当做文本处理
浮动后的影响
  • 对兄弟元素的影响:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面;对前面的兄弟无影响
  • 对父元素的影响:不能撑起父元素的高度,导致父元素高度塌陷;但父元素的宽度依然束缚浮动的元素

解决浮动产生的影响(清除浮动):

  1. 给父元素指定高度
  2. 给父元素也设置浮动,带来其他影响
  3. 给父元素设置 overflow:hidden
  4. 在所有浮动元素的最后面,添加一个块级元素,并给该块级元素设置 clear:both
  5. 给浮动元素的父元素,设置伪元素,通过伪元素清除浮动
    .parent::after{
        content:'';
        display:block;
        clear:both;
    }
    

CSS 定位

相对定位

设置定位:

  • position:relative
  • 调整位置:top、bottom、left、right

参考点:

  • 相对自己原来的位置

特点:

  1. 不会脱离文档流,不会对其他元素产生影响
  2. 显示层级比普通元素高
    • 定位的元素会盖在普通元素之上
    • 都发生定位的两个元素,后写的会盖在先写的元素上
  3. left和right不能一起设置,top和bottom不能一起设置
  4. 能通过margin调整位置,但不推荐

注意:多数情况下,相对定位会与绝对定位配合使用

绝对定位

设置定位:

  • position:absolute
  • 调整位置:left、right、top、bottom

参考点:

  • 相对它的包含块
    • 没有脱离文档流 —— 父元素
    • 脱离文档流 —— 第一个有定位属性的祖先元素

特点:

  1. 脱离文档流,会对后面的兄弟元素、父元素有影响
  2. left和right不能一起设置,top和bottom不能一起设置
  3. 绝对定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主
  4. 任何元素绝对定位后,都变成了定位元素(默认宽高被内容撑开,且能自由设置宽高)
  5. 能通过margin调整位置,但不推荐
固定定位

设置定位:

  • position:fixed
  • 调整位置:left、right、top、bottom

参考点:

  • 相对它的视口

特点:

  1. 脱离文档流,会对后面的兄弟元素、父元素有影响
  2. left和right不能一起设置,top和bottom不能一起设置
  3. 固定定位、浮动不能同时设置,如果同时设置,浮动失效,以定位为主
  4. 任何元素固定定位后,都变成了定位元素(默认宽高被内容撑开,且能自由设置宽高)
  5. 能通过margin调整位置,但不推荐
粘性定位

设置定位:

  • position:sticky
  • 调整位置:left、right、top、bottom

参考点:

  • 离它最近的一个拥有滚动机制的组件元素

特点:

  1. 不会脱离文档流,是一种专门用于窗口滚动时的新的定位方式
  2. 最常用的值是top值
  3. 可以和浮动一起设置,但不推荐
  4. 能通过margin调整位置,但不推荐

粘性定位与相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定

定位的层级
  1. 定位元素的显示层级比普通元素高
  2. 如果位置发生重叠,默认情况是后面的元素会显示在前面元素之上
  3. 可以通过 z-index 调整元素的显示层级
  4. z-index 的属性值是数字,没有单位,值越大显示层级越高
  5. 只有定位的元素设置 z-index 才有效
定位的特殊应用
让定位元素的宽高充满包含块

left、right、top、bottom设为0

让定位元素在包含块中居中

方案一

left:0

right:0

top:0

bottom:0

margin:auto

方案二

left:50%

top:50%

margin-left:-50%

margin-top:-50%

注意:该定位的元素必须设置宽高

CSS 布局

版心
  • 在 PC 端网页中,一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容,这是网页的版心
  • 版心的宽度一般是 960~1200像素之间
  • 版心可以是一个也可以是多个
常用布局类名
  • 顶部导航条:topbar
  • 页头:header、page-header
  • 导航:nav、navigator、navbar
  • 搜索框:search、search-box
  • 横幅、广告:banner
  • 主要内容:content、main
  • 侧边栏:aside、sidebar
  • 页脚:footer、page-footer
重置默认样式

方案一:使用全局选择器

方案二:reset.css

方案三:normalize.css

CSS3

简介

  • CSS3 是 CSS2 的升级版本,新增了很多强大的新功能
  • CSS3 在未来会按照模块化的方式去发展
  • CSS3 的新特性:
    • 新增了更加使用的选择器
    • 新增了更好的视觉效果
    • 新增了丰富的背景效果
    • 新增了全新的布局方法 – 弹性盒子
    • 新增了Web字体
    • 增强了颜色
    • 增加了 2D 和 3D 变换
    • 增加了动画与过渡效果

CSS3私有前缀

  • -webkit-
  • -moz-

CSS3新增

CSS3 新增长度单位
  1. rem:根元素字体大小的倍数
  2. vw:视口宽度的百分之多少
  3. vh:视口高度的百分之多少
  4. vmax:视口宽高中大的那个百分之多少
  5. vmin:视口宽高中小的那个百分之多少
CSS3 新增颜色设置方式
  • rgba
  • hsl
  • hsla
CSS3 新增选择器
  • 动态伪类
  • 目标伪类
  • 语言伪类
  • UI伪类
  • 结构伪类
  • 否定伪类
  • 伪元素
CSS3 新增盒子属性
  • box-sizing:怪异盒模型,可以设置盒模型的两种类型
    • 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;
      
    • h-shadow:水平阴影位置,必填

    • v-shadow:垂直阴影位置,必填

    • blur:模糊距离,可选

    • spread:阴影外延值,可选

    • color:阴影颜色,可选

    • inset:将外部阴影改为内部阴影,可选

  • opactity:不透明度,为整个元素添加透明效果
CSS3 新增背景属性
  • background-origin
    • 设置背景图的原点
    • 语法:
      1. padding-box:从padding区域开始显示
      2. border-box:从border区域开始显示
      3. content-box:从content区域开始显示
  • background-clip
    • 设置背景图的向外裁剪的区域
    • 语法:
      1. border-box:从border区域开始向外裁剪
      2. padding-box:从padding区域开始向外裁剪
      3. content-box:从content区域开始向外裁剪
      4. text:背景图只呈现在文字上
  • background-size
    • 设置背景图的尺寸
    • 语法:
      1. 用长度值指定背景图大小,不允许负值
      2. 用百分比指定背景图大小,不允许负值
      3. auto:背景图真实大小
      4. contain:等比缩放,使背景图片宽或高与容器的宽或高相等
      5. cover:等比缩放,直到完全覆盖容器
  • background复合属性
    • 语法:

      background: color url repeat position / size origin clip
      
    • size 值必须写在position后且要加 / 分开

  • 多背景图:CSS3允许设置多个背景图片
    background:url(../image/xxx) no-repeat,
               url(../image/xxx) no-repeat right top,
               url(../image/xxx) no-repeat left bottom,
               url(../image/xxx) no-repeat right bottom;
    
CSS3 新增边框属性
  • 边框圆角:border-radius
    border-radius:10px;
    
  • 边框外轮廓(了解)
    • outline-width:外轮廓的宽度
    • outline-color:外轮廓的颜色
    • outline-style:外轮廓的风格
      • none:无轮廓
      • dotted:点状轮廓
      • dashed:虚线轮廓
      • solid:实线轮廓
      • double:双线轮廓
    • outline-offset:设置外轮廓与边框的距离
    • outline 复合属性
      outline:50px solid blue
      
CSS3 新增文本属性
  • 文本阴影:text-shadow

    text-shadow:h-shadow v-shadow blur color;
    
    • h-shadow:水平阴影位置,必填
    • v-shadow:垂直阴影位置,必填
    • blur:模糊距离,可选
    • color:阴影颜色,可选
  • 文本换行:white-space

    • normal:超出边界自动换行
    • pre:原样输出
    • pre-wrap:在pre基础上,超出元素边界自动换行
    • pre-line:在pre基础上,超出元素边界自动换行,且识别文本中的换行,空格会忽略
    • nowrap:强制不换行
  • 文本溢出:text-overflow

    • clip:当内敛内容溢出时,将溢出部分裁切掉
    • ellipsis:当内联内容溢出时,将溢出部分替换为 …
    • 注意,要使text-overflow生效:
      • 快容器必须显示定义 overflow 为非visible
      • white-space 为 nowrap
  • 文本修饰:text-decoration,CSS3中为复合属性

    text-decoration: text-decoration-line || text-decoration-style || text-decoration-color
    
  • 文本描边:-webkit-text-stroke ,仅 webkit 内核浏览器支持(了解)

CSS3 新增渐变

线性渐变

  • 多个颜色之间的渐变,默认从上到下渐变

    background-image:liner-gradient(red,yellow,blue);
    
  • 使用关键词设置渐变方向

    background-image:liner-gradient(to top,red,yellow,blue);
    
  • 使用角度设置渐变方向

    background-image:liner-gradient(45deg,red,yellow,blue);
    
  • 调整开始渐变的位置

    background-image:liner-gradient(red 50px,yellow 100px,blue 150px);
    

径向渐变

  • 多个颜色之间的渐变,默认从圆心四散

    background-image:radial-gradient(red,yellow,green);
    
  • 使用关键词调整渐变圆的圆心位置

    background-image:radial-gradient(to 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(red 50px,yellow 100px,green 150px);
    

重复渐变

repeating-linear-gradient

CSS3 web字体及字体图标

web字体

通过 @font-face 指定字体的具体位置

  • 语法
    @font-face{
        font-family:'xxx';
        src:url('./xxx')
    }
    
字体图标
  • 相比图片更加清晰
  • 灵活性高,更方便改变大小、颜色、风格等
  • 兼容性好,IE也能支持

CSS3 变化

转换属性:transform

2D变换
位移
  • translateX:水平位移
  • translateY:垂直位移
  • translate:水平和垂直位移
  • 若值为百分比,则参考自身宽高的百分比
缩放
  • scaleX:水平缩放
  • scaleY:垂直缩放
  • scale:垂直水平缩放
  • 1值为不缩放
旋转
  • rotate:设置旋转角度
扭曲(了解)
  • skewX:水平方向扭曲
  • skewY:垂直方向扭曲
  • skew:双方向扭曲
多重变换

可以同时使用一个transform来编写

transform: translate(100px,100px) scale(0.7) rotate(45deg);

多重变换时,建议最后旋转

变换原点
  • 元素变换时,默认的原点是元素的中心
  • 使用 transform-origin 可以设置变换的原点
3D变换
开启3D空间

元素进行3D变换的首要操作:父元素必须开启3D空间

  • transform-style
    • flat:2D空间
    • preserve-3d:3D空间
设置景深

景深 —— 观察者与 z=0 平面距离

  • prespective
    • none:不指定透明
    • 长度值:指定观察者与 z=0 平面的距离,不允许负值
透视点位置

即观察者位置,默认的透视点在元素的中心

  • prespective-origin:设置观察者(透视点)的位置

转换属性:transform

位移

3D位移是在2D位移的基础上,让元素沿z轴位移

  • translateZ:z轴位移,不能写百分比,正值向屏幕外,负值向屏幕内
  • translate3d:三个参数分别为x轴,y轴,z轴,均不能省略
旋转

3D旋转是在2D旋转的基础上,让元素沿 x 轴和 y 轴旋转

  • rotateX:x轴旋转
  • rotateY:y轴旋转
  • rotate3d:四个参数—— x ,y , z ,旋转角度,均不能省略
缩放

3D缩放是在2D缩放的基础上,让元素沿 z 轴缩放

  • scaleZ:设置 z 轴方向缩放比例,1为不缩放
  • scale3d:三个参数 —— x , y , z,不允许省略
多重变换

可以同时使用一个transform来编写

背部不可见
backface-visibility:hidden

CSS3 过渡

可以在不使用 flash 动画,不使用 JavaScript 的情况下,让元素从一种样式,平滑过渡为另一种样式

transiton-property
  • 作用:定义哪个属性需要过渡
  • 常用值:
    • none
    • all
    • 具体摸个属性名,如 width、height等
transition-duration
  • 作用:设置过渡的持续时间
  • 常用值:
    • 0:没有任何过渡时间
    • s 或 ms:秒或毫秒
transiton-delay
  • 作用:指定开始过渡的延迟时间,单位:s 或 ms
transition-timing-function
  • 作用:设置过渡的类型
  • 常用值:
    1. ease:平滑过渡
    2. linear:线性过渡
    3. ease-in:慢 → 快
    4. ease-out:快 → 慢
    5. ease-in-out:慢 → 快 → 慢
    6. step-start:等同于 steps(1,start)
    7. step-end:等同于steps(1, end)
    8. steps(integer)
    9. cubic-bizie():贝塞尔曲线
transition 复合属性
transition:1s 1s linear all;

CSS3 动画

动画基本使用
  • 定义关键帧

    /* 简单方式 */
    @keyframes 动画名{
        from{}
        to{}
    }
    
    /* 完整方式 */
    @keyframes 动画名{
        0%{}
        20%{}
        40%{}
        60%{}
        80%{}
        100%{}
    }
    
  • 给元素应用动画

    1. animation-name:给元素指定具体的动画
    2. animation-duration:设置动画所需时间
    3. animation-delay:设置动画延迟
动画其他属性
  • animation-timing-function:设置动画的类型

  • animation-iteration-count:指定动画的播放次数

    • number
    • infinite
  • animation-direction:指定动画方向

    • normal
    • reverse
    • alternate
  • animation-fill-mode:设置动画之外的状态

    • forward
    • backwards
  • animation-play-state:设置动画的播放状态

    • running
    • paused
  • animation:动画复合属性

    animation:animationName 3s 0.5s linear 2 alternate forwads
    

    animation-play-state 一般单独使用

CSS3 多列布局

作用:专门用于实现类似于报纸的布局

  • column-count:指定列数
  • column-width:指定列宽
  • column:同时指定列宽和列数,复合属性
  • column-gap:设置列边距
  • column-rule-style:设置列与列之间边框的风格
  • column-rule-width:设置列与列之间边框的宽度
  • column-rule-color:设置列与列之间边框的颜色
  • column-rule:设置列边框,复合属性
  • column-span:指定是否跨列

CSS3 伸缩盒模型(弹性盒)

简介
  • 2009年,w3c 提出了一种新的盒子模型 —— flexible box(伸缩盒,又称弹性盒)
  • 可以轻松控制:元素分布方式、元素对齐方式、元素视觉顺序
伸缩容器、伸缩项目
  • 伸缩容器:开启 flex 的元素
  • 伸缩容器所有子元素自动成为伸缩项目
    • 仅子元素成为了伸缩项目
    • 任何元素成为伸缩项目都会“块状化”
主轴与侧轴
  • 主轴:伸缩项目沿着主轴排列,默认是水平的,默认方向是从左到右
  • 侧轴:与主轴垂直的就是侧轴,默认是垂直的,默认方向是从上到下
主轴方向
  • 属性名:flex-direction
  • 常用值:
    • row
    • row-reverse
    • column
    • column-reverse
主轴换行方式
  • 属性名:flex-wrap
  • 常用值:
    • nowrap:默认值,不换行
    • wrap:自动换行
    • wrap-reverse:反向换行
flex-flow

是一个复合属性,复合了 flex-direction 和 flex-wrap 两个属性

主轴对齐方式
  • 属性名:justify-content
  • 常用值:
    • flex-start:主轴起点对齐
    • flex-end:主轴终点对齐
    • center:居中对齐
    • space-between:均匀分布,两端对齐(最常用)
    • space-around:均匀分布,两端距离是中间的一半
    • spance-evenly:均匀分布,两端距离与中间距离一致
侧轴对齐
  • 属性名:align-content
  • 常用值:
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • space-evenly
    • stretch:占满整个侧轴 —— 默认值
flex-basis
  • 设置主轴方向的基准长度,会让宽度或高度失效
flex-grow
  • 定义伸缩项目的放大比例,默认为 0
flex-shrink
  • 定义项目的压缩比例,默认为 1
flex 复合属性

复合了:flex-grow、flex-shrink、flex-basis三个属性,默认值:0 1 auto。

  • flex:1 1 auto —— auto 可拉伸,可压缩,不设置基准长度
  • flex:1 1 0 —— 1 可拉伸,可压缩,基准长度为 0
  • flex:0 0 auto —— none 不可拉伸,不可压缩,不设置基准长度
  • flex:0 1 auto —— 0 auto – 即 flex 初始值
项目排序
  • order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
单独对齐
  • align-self 属性可以单独调整某个伸缩项目的对齐方式
  • 默认值为 auto,继承父元素的 align-items 属性

CSS3 响应式布局

媒体查询

@media xxx { }

媒体类型
  • all:检测所有设备
  • screen:检测电子屏幕
  • print:检测打印机
媒体特性
  • width:检测视口宽度
  • max-width:检测视口最大宽度
  • min-width:检测视口最小宽度
  • height:检测视口高度
  • max-height:检测视口最大高度
  • min-height:检测视口最小高度
  • device-width:检测设备屏幕宽度
  • max-device-width:检测设备屏幕最大宽度
  • min-device-width:检测设备屏幕最小宽度
  • orientation:检测视口的旋转方向(是否横屏)
    • portrait:视口纵向,高度大于等于宽度
    • landscape:视口横向,宽度大于高度
媒体运算符
  • and:并且
  • , 或 or:或
  • not:否定
  • only:肯定
常用阈值
  • 超小屏幕(< 768px)
  • 中等屏幕(> 768px & < 992px)
  • 大屏幕(> 992px & < 1200px)
  • 超大屏幕(> 1200px)
@media screen and (max-width:768px){
    ...
}

BFC

  • Block Formatting Context(块级格式上下文),可以理解成元素的一个特异功能
  • 默认情况下 BFC 处于关闭状态,当元素满足了某些条件后会被激活
  • 即 元素开启了BFC
开启BFC能解决什么问题?
  1. 子元素不会再产生 margin 塌陷问题
  2. 自己不会被其他浮动元素所覆盖
  3. 即便子元素浮动,元素自身高度也不会塌陷
如何开启BFC
  • 根元素 —— html
  • 浮动元素
  • 绝对定位、固定定位
  • 行内块元素
  • 表格单元格
  • overflow 值不为 visible 的块元素
  • 伸缩项目(弹性盒子)
  • 多列容器
  • column-span 为 all 的元素
  • display值为 flow-root

你可能感兴趣的:(CSS,css,html,css3)