CSS简介

Cascading Style Sheets是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 属性

CSS3 动画属性 （Animation）

  • @keyframes 规定动画。
  • animation 所有动画属性的简写属性，除了 * animation-play-state 属性。
  • animation-name 规定 @keyframes 动画的名称。
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。
  • animation-timing-function 规定动画的速度曲线。
  • animation-delay 规定动画何时开始。
  • animation-iteration-count 规定动画被播放的次数。
  • animation-direction 规定动画是否在下一周期逆向地播放。
  • animation-play-state 规定动画是否正在运行或暂停。
  • animation-fill-mode 规定对象动画时间之外的状态。

    CSS 背景属性（Background）

  • background 在一个声明中设置所有的背景属性。
  • background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
  • background-color 设置元素的背景颜色。
  • background-image 设置元素的背景图像。
  • background-position 设置背景图像的开始位置。
  • background-repeat 设置是否及如何重复背景图像。
  • background-clip 规定背景的绘制区域。
    • padding-box
    • border-box(默认)
    • content-box
  • background-origin 规定背景图片的定位区域。
    • padding-box(默认)
    • border-box
    • content-box
  • background-size 规定背景图片的尺寸。
    • cover:覆盖
    • contain:包含

      background复合写法

      在background复合样式中第一个是oringin第二个是clip

      CSS 边框属性（Border 和 Outline）

  • border 在一个声明中设置所有的边框属性。
  • border-bottom 在一个声明中设置所有的下边框属性。
  • border-bottom-color 设置下边框的颜色。
  • border-bottom-style 设置下边框的样式。
  • border-bottom-width 设置下边框的宽度。
  • border-color 设置四条边框的颜色。
  • border-left 在一个声明中设置所有的左边框属性。
  • border-left-color 设置左边框的颜色。
  • border-left-style 设置左边框的样式。
  • border-left-width 设置左边框的宽度。
  • border-right 在一个声明中设置所有的右边框属性。
  • border-right-color 设置右边框的颜色。
  • border-right-style 设置右边框的样式。
  • border-right-width 设置右边框的宽度。
  • border-style 设置四条边框的样式。
  • border-top 在一个声明中设置所有的上边框属性。
  • border-top-color 设置上边框的颜色。
  • border-top-style 设置上边框的样式。
  • border-top-width 设置上边框的宽度。
  • border-width 设置四条边框的宽度。
  • outline 在一个声明中设置所有的轮廓属性。
  • outline-color 设置轮廓的颜色。
  • outline-style 设置轮廓的样式。
  • outline-width 设置轮廓的宽度。
  • border-bottom-left-radius 定义边框左下角的形状。
  • border-bottom-right-radius 定义边框右下角的形状。
  • border-image 简写属性，设置所有 border-image-* 属性。3
  • border-image-outset 规定边框图像区域超出边框的量。
  • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
  • border-image-slice 规定图像边框的向内偏移。
  • border-image-source 规定用作边框的图片。
  • border-image-width 规定图片边框的宽度。
  • border-radius 简写属性，设置所有四个 border-*-radius 属性。
  • border-top-left-radius 定义边框左上角的形状。
  • border-top-right-radius 定义边框右下角的形状。
  • box-decoration-break
  • box-shadow 向方框添加一个或多个阴影。

    Box 属性

  • overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
  • overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
  • overflow-style 规定溢出元素的首选滚动方法。
  • rotation 围绕由 rotation-point 属性定义的点对元素进行旋转。
  • rotation-point 定义距离上左边框边缘的偏移点。

    Color 属性

  • color-profile 允许使用源的颜色配置文件的默认以外的规范。
  • opacity 规定元素的不透明级别。
  • rendering-intent 允许使用颜色配置文件渲染意图的默认以外的规范。

    CSS 尺寸属性（Dimension）

  • height 设置元素高度。
  • max-height 设置元素的最大高度。
  • max-width 设置元素的最大宽度。
  • min-height 设置元素的最小高度。
  • min-width 设置元素的最小宽度。
  • width 设置元素的宽度。

    可伸缩框属性（Flexible Box）

  • box-align 规定如何对齐框的子元素。
  • box-direction 规定框的子元素的显示方向。
  • box-flex 规定框的子元素是否可伸缩。
  • box-flex-group 将可伸缩元素分配到柔性分组。
  • box-lines 规定当超出父元素框的空间时，是否换行显示。
  • box-ordinal-group 规定框的子元素的显示次序。
  • box-orient 规定框的子元素是否应水平或垂直排列。
  • box-pack 规定水平框中的水平位置或者垂直框中的垂直位置。

    CSS 字体属性（Font）

  • font 在一个声明中设置所有字体属性。
  • font-family 规定文本的字体系列。
  • font-size 规定文本的字体尺寸。
  • font-size-adjust 为元素规定 aspect 值。
  • font-stretch 收缩或拉伸当前的字体系列。
  • font-style 规定文本的字体样式。
  • font-variant 规定是否以小型大写字母的字体显示文本。
  • font-weight 规定字体的粗细。

    CSS 列表属性（List）

  • list-style 在一个声明中设置所有的列表属性。
  • list-style-image 将图象设置为列表项标记。
  • list-style-position 设置列表项标记的放置位置。
  • list-style-type 设置列表项标记的类型。

    CSS 文字属性

  • text-indent:设置首行缩进
  • text-align：设置文字水平对齐方式，垂直对其可以设置行高，line-height

    CSS3 渐变

    线性渐变

    linear-gradient() 是值，需要加到background-image属性上
    第一个参数可以指定方向或角度例如to top,red 25%,blue 75%

    径向渐变

    radial、-gradient()

    其他属性

  • text-shadow:文字阴影
    x y blur color
    注：阴影的默认颜色跟文字颜色相同，通过逗号设置多个阴影
  • box-shadow:盒子阴影

    x y blur spread(传播范围) color inset
    注：盒子阴影的默认颜色是黑色
  • mask 遮罩

    url repeat x y w h 多遮罩
    注：mask现在还没有标准化，需要加浏览器前缀，默认是x,y都平铺
  • box-reflect:倒影

    above below left right 距离 遮罩|渐变
    注：渐变linear-gradient只支持透明度，使用rgba scale(-1)也能实现倒影效果
  • blur模糊：
    filter:blur()
  • calc()计算(calculate)：

    必须用空格隔开四则运算符

blur模糊：

浮动和定位

浮动

说明

当元素设置float后，会从流中脱离，排在下面的元素会往上浮动，和设置浮动的元素排成一列
浮动元素会脱离网页文档，与其他元素重叠，但是，不会与文字元素重叠

浮动元素不占据空间，其父元素如果不设置大小并不会被浮动元素撑开，或者使用overflow:auto使父元素自动调整大小（只有高度会自动适应子元素，宽度会与网页宽度一致）

浮动元素在排列时，只参考前一个元素的位置即可（如果有多个浮动元素，大小超过父元素需要换行，此时只需参考浮空元素的前一元素）。

浮动元素的width不跟父元素相同 而是根据自身的内容决定

浮动元素在父元素放不下时会自动换行排列

可以将想要横向排列的元素设置到div里，这样最后一个元素就不会和div的下一个元素产生浮动影响。
浮动只影响后面的元素

清除浮动

clear:left/right/both可以清除当前元素不受浮动元素的影响

clear只会操作块元素

:after和:before是css3中的伪类元素。用法是像元素的前或者后(是在元素中的内容之后)插入元素
content里面是内容，下面接属性，和css写法一样，可以用于清除嵌套浮动的影响,
原理是浮动元素不会撑开父元素，而在浮动元素后面添加一个新元素并clear后父元素就可以被撑开了，使用伪类可以避免添加一个空元素
css3为了区分伪类和伪元素，伪元素采用双冒号写法。

after伪类是内联的，只有block元素才能清除浮动，而此方法只能消除子元素对父元素的浮动影响，
两个同级元素可以使用BFC规范使其消除浮动影响

定位

position

绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，例如，将div设置为relative，此时它的子元素的absolute定位的参照对象是此div， 相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方，但是它原来占的地方也不会让出来的

css中background-position是元素的左上起始位置位与盒子模型的坐标

内联元素不会识别宽高，但是设置绝对定位后可以设置

布局

分栏布局

  • column-count:分栏的个数
  • column-width:分栏的宽度
  • column-gap:分栏的间距
  • column-rule:分栏的边线
  • column-span:合并分栏 对标题使用可以合并

    等高布局

    利用margin-bottom负值与padding-bottom配合实现

    三列布局，左右固定，中间自适应

  • BFC方式
  • 定位
  • 浮动(双飞翼布局，圣杯布局)
  • margin负值实现
  • flex弹性

    flex弹性盒模型（flex布局）

    flex布局，可以简便完整，响应式地实现各种页面布局，垂直居中很方便

作用在flex容器上 作用在flex子项上
flex-direction order

取值： row、row-reverse、column、column-reverse

flex-wrap flex-grow

取值：nowrap(默认值，单行显示不换行)、wrap(宽度不足换行显示)、wrap-reverse(宽度不足换行显示，但是从下往上开始)

flex-flow flex-shrink
direction和wrap的复合写法
justify-content flex-basis

决定主轴方向上子项的对其和分布方式,对单行不起作用
取值：

  • flex-start:默认值，表现为起始位置对齐。
  • flex-end:表现为结束位置对齐
  • cneter:表现为居中对齐
  • space-between：表现为两端对齐，between是中间的意思，意思是多余的空白间距只在元素中间区域分配
  • space-around:around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，
    最终视觉上边缘两侧的空白只有中间空白宽度一半。
  • space-evenly:evenly是匀称、平等的意思，也就是视觉上，每个flex子项两侧空白间距完全相等
align-items flex

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在”侧轴”方向上的对齐方式
取值：

  • stretch:默认值，flex子项拉伸
  • flex-start:表现在容器顶部对齐
  • flex-end:表现为容器底部对齐
  • center:表现在垂直居中对齐
align-content align-self

可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的
取值：

  • stretch:默认值，每一行flex子元素都等比拉伸
  • flex-start:表现为起始位置对齐
  • flex-end:表现为结束位置对齐
  • cneter:表现为居中对齐
  • space-between:表现为两端对齐
  • space-around:每一行元素上下都享有独立不重叠的空白空间
  • space-evenly:每一行元素都完全上下等分

    作用在flex子项上的CSS属性

  • order:改变某一个flex子项的排序位置，所有flex子项默认order属性值为0
  • flex-grow:扩展flex子项所占据的宽度，扩展所侵占的空间就是出去元素外的剩余的空白间隙，默认为0,1为全部空间
  • flex-shrink:属性中的shrink是收缩* flex-shrink主要处理当flex容器空间不足时，每个元素的收缩比例，默认为1
          为0时不收缩
  • flex-basis:定义了在分配剩余空间之前元素的默认大小
  • flex: flex属性是flex-grow，flex-shrink flex-basis的缩写(复合写法),默认为flex:0 1 auto;
  • align-self:只控制单独某一个flex子项的垂直对齐方式,align-items是所有子项

网格布局

grid布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上

  • grid-template-columns
  • grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素、百分比、自适应以及fr单位(网格剩余空间比例fraction)
有时候，我们网格的划分是很有规律的，如果需要添加多个横纵网格时，可以使用repeat()简化操作 repeat(3 1fr)
需要几行(列)就写几个参数

  • grid-template-areas

  • grid-template

    grid-template-areas给网格划分区域，此时grid子项只使用grid-area属性指定起隶属区域
    区域划分时一行用一个字符串,只能划分矩形
    grid-template是grid-template-rows/grid-template-columns/grid-template-areas的复合写法

  • column-gap

  • row-gap

  • gap

    用来定义网格中网格间隙的尺寸，gap是column-gap和row-gap的复合写法，第一个参数是row-gap

  • justify-items
  • align-items

    取值：
    • stretch(默认值，拉伸，表现为水平或垂直填充)
    • start 容器左侧或顶部对齐
    • end 容器右侧或底部对齐
    • center 水平或垂直居中对齐

不拉伸的情况下根据内容撑开

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示还是左中右对齐，
align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示还是上中下对齐

  • place-items

    place-items是justify-items和align-items的复合写法

  • justify-content

  • align-content

    取值：

    • stretch 默认值，拉伸
    • start 容器左侧或顶部对齐
    • end 容器右侧或底部对齐
    • center 水平或垂直居中对齐
    • space-between 两端对齐
    • space-around 享有独立不重叠的空白空间
    • space-evenly 平均分配空间

      指定了网格元素的水平和垂直分布方式， 和xx-items的区别是content是针对所有网格，
      而items针对网格内元素对网格的对其方式

  • place-content

    justify-content和align-content的复合写法

作用在grid子项上

  • grid-column-start

    水平方向上占据的起始位置

  • grid-column-end

    水平方向上占据的结束位置

  • grid-row-start

    垂直方向上占据的起始位置

  • grid-row-end

    垂直方向上占据的结束位置(span属性)
    只有end具备span属性,grid-row-end:span 1表示网格元素所占大小

  • rid-column

    grid-column-start和grid-column-end的复合写法 /分隔

  • grid-row

    同上

  • grid-area

    表示当前网格所占用的区域，名字和位置两种表示方法

  • justify-self

    单个网格元素的水平对齐方式

  • align-self

    单个网格元素的垂直对齐方式

  • place-self

    align-self和justify-self的复合写法

CSSHack（浏览器兼容）

CSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果

  1. CSS属性前缀法

    前缀标识 兼容浏览器
    _ IE6
    +、* IE6 IE7
    \9(加到值的后面) IE6 IE7 IE8 IE9
    \0(加到值的后面) IE8 IE9 IE10 IE11 
    1
    elem{background:red\0;}

  2. 选择器前缀法

    前缀标识 兼容浏览器
    *html IE6
    *+html IE7
    :root IE9及现代浏览器 
    1
    *html elem{background:red;}

  3. IE条件注释法(在html中)

    前缀标识 兼容浏览器
    <!--[if\ IE]>...<![endif]--> IE
    <!--[if IE 7]>...<![endif]--> IE7
    <!--[if lte IE 7]>...<![endif]--> IE7 以下
    lte表示less than or equal 也可以gte(greater than or equal)
    <!--[if ! IE 7]>...<![endif]--> 非IE

    盒模型

    box-sizing:border-box可以设置盒子模型的宽高
    line-block可以使元素同时具有block和inline的特征，inline是不支持宽高的 可以使li拥有块的特性又按inline排列，就不需要浮动了

    CSS 动画

    transition

  • transition-property:规定设置过度效果的CSS属性的名称。
  • transition-duration:规定完成过度效果需要多少秒或毫秒。
  • transition-delay:定义过渡效果何时开始。
  • transition-timing-function:规定速度效果的速度曲线。
    (ease默认值，linear匀速，ease-in加速，ease-out减速，ease-in-out先加速后减速)

在复合写法中第一个时间代表duration,第二个代表delay，其他顺序不影响

transform

transform是css3属性，以下是值

  • translate:位移
  • scale:缩放
  • rotate:旋转(单位是deg(degree)) 等价于rotateZ X和Y作用与3d
  • skew:斜切 单位也是角度，正值向左倾斜
  • transform注意事项：
  1. 变形元素不会影响其他元素(但skew会影响子元素)
  2. 变形元素不能添加给内联元素
  3. 复合写法，可以同时添加多个变形操作，执行是有顺序的，先执行后面的操作,translate会受到scale rotate skew的影响
    (property)trnasform-origin:设置中心基准点

    animation动画

    属性

  • animation-name:设置动画的名字(自定义的)

  • animation-duration:动画的持续时间

  • animation-delay:动画的延迟时间

  • animation-iteration-count:动画的重复次数，默认值就是1,infinite无限次数

  • animation-timing-function:动画的运动形式:

  • linear：动画从头到尾的速度是相同的

  • ease ：动画以低速开始，然后加快，在结束前变慢。默认值

  • ease-in：动画以低速开始

  • ease-out：动画以低速结束

  • ease-in-out：动画以低速开始和结束;

  • animation-full-mode:规定动画播放之前或之后，其动画效果是否可见。

    • 取值：
    1. none(默认值):在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效。
    2. backwards:在延迟的情况下，让0%在延迟前生效。
    3. forwards:在运动结束之后，停到结束位置。
    4. both:backwards和forwards同时生效

  • animation-direction:属性定义是否应该轮流方向播放动画。

  • alternate:一次正向(0%~100%),一次反向(100%-0%)

  • reverse:永远都是反向,100%~0%

  • normal(默认值):永远都是正向,0%~100%*

    在js中动态使用animation

    如果想动态使用可以用dom的document.styleSheets[0]获取css对象，然后使用insertRule方法

    transform3D

    属性

  • rotataX():正值向上翻转

  • rotataY():正值向右翻转

  • translateZ():正值向前，负值向后 Z轴移动 需要先设置 perspective

  • scaleZ():立体元素的厚度 参数是倍数

  • perspective:定义景深

  • transform-style:3D空间 外层加景深，内层加3D空间 flat(2D) preserve-3d(3D空间)

  • transform-origin:center center -50px;(Z轴只能写数值)

  • backface-visibility:隐藏被旋转的 div 元素的背面

    复合写法

  • rotate3d():四个值 0|1(x轴是否添加旋转角度) 0|1（y轴是否添加旋转角度） 0|1(z轴是否添加旋转角度) degree

  • translate3d():三个值 x y z

  • scale3d():三个值 x y z

CSS 伪类

伪类

  • :hover
  • :focus
  • :empty
    hover改变兄弟元素的样式：（需要在hover之后添加“+”）,子元素直接选择，暂时无法选择父元素
    伪类有一个冒号开始，伪元素由两个冒号开始

    伪元素

  • ::selection 选中个元素，可以使用此伪元素改变选中文字的颜色
  • ::first-line/first-letter
  • ::before/after

    选择器

    样式表优先级

    行内样式>ID选择器>类选择器>标签选择器>通用选择器(*{})

    选择器权重

    通用选择器*：0

    标签选择器：1

    类选择器：10

    ID选择器：100

    行内选择器：1000

    计算权重值直接相加（大部分情况选择器选择的范围越小越精确，权重就越高）

nth-child

指定的是父元素中的指定类型的第n个元素，例如p:nth-child(2)指定拥有p子元素的第n个p元素

选择器列表

  • > css中>可以选择子元素

    BFC规范

    BFC

    BFC block formatting context 规范可以使元素独立化，解决布局问题，例如margin的叠加和margin传递问题

    触发BFC

    float

    除none以外的值；绝对定位元素position(absolute,fixed)

    display

    display为inline-block,table-cells

    overflow

    overflow:hidden;

    自定义字体

    font-face 字体图标

    使用语法

    1
    2
    3
    4
    @font-face {
                font-family: ;
                src: url();
            }
    阿里的矢量库的Font class使用iconfont类设置样式

    CSS3浏览器前缀

    CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀
    浏览器 内核 前缀
    IE Trident -ms-
    Firefox Gecko -moz-
    Opera Presto -o-
    Chrome Webkit -webkit-
    Safari Webkit -webkit-
    Opera、Chrome Blink

    CSS 变量

    变量的作用域就近查找

    定义：

    1
    :root{--color : red;}

    使用：

    1
    background:var(--color);

CSS 模块化

通过sass或less引入文件实现css模块化

文件夹和含义

  • base:一些初始的通用CSS,如重置默认样式，动画，工具，打印等。
  • components:用于勾践页面的所有组件，如按钮，表单，表格，弹窗等。
  • layout:用于布局页面的不同部分，如页眉，页脚，弹性布局，网格布局等。
  • pages:防止页面之间不同的样式，如首页特殊样式，列表页特殊样式等。
  • themes:应用不同的主题样式时，如管理员，买家，卖家等。
  • abstracts:放置一些如:变量，函数，响应式等辅助开发的部分。
  • vendors:防止一些第三方独立的CSS文件，如bootstrap,iconfont等。

    实现

    css不规则文字环绕

    shape-outside，默认为none

    取值：

    margin-box,padding-box,content-box

clip-path可以限制当前元素的形状

利用clip-path取值和shape-outside一样可以自定义范围

shape-margin 环绕间距

css自定义滚动条

为元素自定义滚动条，伪类实现

1
2
::-webkit-scrollbar
::-webkit-scrollbar-thumb

CSS 注意事项

1
<link rel="stylesheet" href="cascading.css" type="text/css" media="screen and (min-width:800px)"/>

控制浏览器大小的css，min-divice-width控制设备大小的样式

padding是控件的内容相对控件的边缘的边距，padding会改变元素的大小．margin是控件边缘的边距．

ul自带margin。

background-position 2个参数时顺序为水平-垂直 而margin是垂直-水平 margin 4个参数顺序为上右下左

body默认宽度是100%(相对于html html是body的父元素)
将html和body的高度同时设置为100%可以使页面和浏览器大小相同
background-position:2个参数 1水平位置 2垂直位置
img有时默认是inline的，可以使用display:block设置成块级元素，或者使用div的background
div中的background会覆盖css文件中的background-xxx，其他的属性也类似，如果要同时在行内选择器和css文件中同时使用最好不要直接用background
margin:auto只在水平方向有效

margin-top的传递问题

子元素的margin-top会把父元素一起带下来 解决： 给父元素加overflow:hidden

seo搜索引擎优化

隐藏a标签的文字 text-indent: -9999px； overflow: hidden;