有些字体是不支持斜体italic的，而oblique可以强制显示

font-variant 字母大写变小

small-caps 字母大写变小

line-height 行高

一行文字所占的高度

也是两行文字基线占据的高度（基线：字母x底部）

文字上下居中：

text-decoration 装饰线

letter-spacing 字母间距

单位可以是像素px，可以是负数

word-spacing 单词间距

单位可以是像素px，可以是负数

text-transform 大小写转换

text-indent 第一行缩进

单位可以是像素px，可以是负数
浏览器默认一个字是16px

也可以用于隐藏文本，设置一个很大的值如-999px

text-align 文本对齐方式

justify：内容平均分配

text-overflow 文字省略

text-decoration 划线

/* 上划线 */
h1 {text-decoration: overline}
/* 中划线 */
h2 {text-decoration: line-through}
/* 下划线 */
h3 {text-decoration: underline}
/* 闪烁的文本 */
h4 {text-decoration:blink}
/* 无 */
a {text-decoration: none}

display 元素类型

元素类型可以参考html元素类型。

none：隐藏元素，不会占位置不会占空间

inline-block

visibility 可见性

隐藏后是占位置的

overflow 内容溢出

text-shadow 文字阴影

?可以有表示0或1个这个属性
表示这里填写具体的长度
表示这里写具体的颜色
inset 直接写这个就会变
&& 和，顺序没有要求
用逗号隔开2组属性，可以叠加2组属性

=====================

盒子模型

width 宽度 / height 高度

默认都是auto，还有其他单位如px像素，%百分比，vh屏幕高度宽度（100vh就是100%的屏幕）

padding 内边距

margining 外边距

margin 传递

推荐触发BFC（block format content），或者建议

margin 上下折叠

两个元素的上下外边距，会重叠。例如都设置成20px，结果不是40px

border 边框

制作小箭头

outline 外轮廓

和边框的区别就是，不占位置。边框是占位置的。
外轮廓更方便调试，因为边框可能会导致页面乱

border-radius 圆角

box-shadow 盒子阴影

?可以有表示0或1个这个属性
表示这里填写具体的长度
表示这里写具体的颜色
inset 直接写这个就会变
&& 和，顺序没有要求
用逗号隔开2组属性，可以叠加2组属性

box-size 内容盒子

background-image 背景图片

background-image:url() ;可以设置多个url，同时显示多个图片，第一个设置的图片会在最上层
图片会平铺

background-repeat 背景平铺效果

默认是平铺repeat
no-repeat：不重复平铺

background-size 背景图片大小

background-position 背景图片位置

center可以用于居中

background-attachment 背景图片附加属性

用得比较少，就是设置图片是浏览器、内容滚动

background 简写

sprite 图形合成技术

导入图片后，只要设置背景图片、背景图片大小、背景图片位置，就可以取到图片中某个特定位置的图标，达到只显示那一部分的目的

特殊

img和background的选择

=====================

列表

查看HTML列表。

=====================

表格

查看HTML表格。

=====================

光标

cursor 设置光标样式

=====================

布局

width 宽度

行内元素无效

height 高度

行内元素无效

position 定位

应用场景

static 静态/标准流

默认是标准流，就是从上往下排列元素，放不下就放下一行，兄弟元素不存在元素层叠。
可以通过margin和padding设置，但是会影响其他元素
脱离标准流的元素，全部当做块级元素

relative 相对定位

相对自己原来的位置移动，会占据原来位置的空间

fixed 固定定位

直接相对于浏览器窗口来定位，如浮动广告，脱离标准流。

absolute 绝对定位

子元素居中：

float 浮动

开启浮动：

float:left;

层叠：


文字环绕

应用

问题

clear 清除

z-index 层叠

默认是auto，相当于0。其他是正的，就叠在0 上面。

text-align 元素内容在元素中水平对齐方式

justify：左右两端对齐，水平等分，最后一行是无效的

块级元素不会居中，因为默认是占整行的，因此要改变块级元素的display属性为inline-block才能居中

去除行内元素间的空格

1、父元素设置font-size：0，但是苹果浏览器不支持
2、给元素加float浮动

包含、嵌套

元素水平居中

text-align: center;

margin: 0 auto;

vertical-align 行内垂直对齐

flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

开启flex布局

目标元素的父元素开启，目标元素和兄弟就会按flex进行排列

main axis 主轴
cross axis 交叉轴

————-

flex-direction 子元素排列方向

默认是横向从左到右row，
也可以是纵向从上到下column。
也可以是横向从右到左row-reverse，
也可以是纵向从下到上column-reverse。

justify-content 子元素对齐方式

flex：1 子元素平分空间

align-items 子元素在交叉轴上的对齐方式

flex-wrap 子元素单行、多行排列

单行会压缩子元素的宽度

align-content 子元素多行时交叉轴对齐方式

—————-

order 子元素排布的顺序

用得比较少

align-self 某个子元素对齐方式

flex-grow 某个子元素按比例扩展宽度

flex-shrink 某个子元素按比例收缩宽度

flex-basis 子元素宽度

用得较少

====================

动画

transform 旋转、缩放、倾斜、平移

要放在变形前的css里面，如.box{ }里面
同一个transform可以有多个动画，用空格隔开

transition 过渡动画

要放在变形后的css里面，如.box:hover{ } 里面

@keyframes 关键帧动画

可以一直完成多个变形

<style type="text/css">
      .box{
          width: 100px;height: 100px;
          background-color: blue;
          color: white;
      }
      .box:hover{
        /*4、应用自定义的动画，每个阶段要1秒完成，速度为线性无加速度的*/
        /*动画会从0%运动到50%，再运动到75%，最后到100%完成动画*/
        /*animation 后面多个动画用逗号分隔开，但注意多个的transform会层叠掉只剩1个效果*/
        animation:movedown 1s linear ;
      }
            /*1、定义关键帧动画，名字为movedown*/
      @keyframes movedown{
        /*2、定义初始时的动画*/
        0% {
          transform: translate(0px,0px);
        }
        /*3、定义运动50%动画时关键帧的状态*/
        50% {
          transform: translate(100px,0px) scale(2,2);
        }
        75%{
          transform: translate(100px,50px);
        }
        /*4、定义运动完成动画时关键帧的状态*/
        100% {
          transform: translate(0px,0px);
        }
      }
    </style>

3D动画

css用得少，因为兼容性问题。多用js库

css实现，由父元素开启3d（加一个transform-style: preserve-3d;），然后设置视距（perspective: 1000px;），子元素都可以应用3d相关的动画

====================

继承

可以通过mdn查

调试可以查看是否继承过来了

继承的是计算值，如祖父辈是30px，父辈是1em，子辈继承的是1em计算后的结果30px

强制继承

方法1：设置为父元素的百分比
width: 100%

方法2：强制继承属性
width: inherit;

====================

层叠

层叠和替换，同样的选择器，后面出现的优先；不同的选择器，看权重。

如果属性值后面加 !important，则这条属性强制最优先

其他优先级，离标签越近的优先级越高

要善于利用浏览器查看网页结构的功能查错

写css样式时，先整体后局部

filter 滤镜

opacity 可见度

opacity : 0 可用于隐藏元素
支持动画

====================

查看网页结构

按F12，点击+号，给div添加外轮廓属性
div{
outline: 2px red solid !important
}

外轮廓更方便调试，因为边框可能会导致页面乱