css基础大纲

[wqhui]

本文仅略讲一下css的相关知识，作为大纲性的提炼。

三大特性

覆盖性

浏览器的渲染机制是从上到下的，样式冲突采取就进原则，后者覆盖前者。

继承性

可被继承的属性

CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承

spaceing系列	letter-spacing、word-spacing、white-spacing
font系列	family / size / style / weight
text系列	align/decoration/shadow
list-style系列	type / postion / image
常用	color / visibility / cursor / box-shadow

控制继承

可以在css控制继承，如 color:initial

• inherit: 被应用属性继承父级的该属性（默认就是该值）
• initial: 初始化，把应用属性初始为它默认的样式，并且排除继承和浏览器默认样式表的干扰（默认会继承的属性也不在默认继承，而是表现出没有任何设置时候的默认样式）
• unset：意思是恢复其原本的继承方式。对color属性而言，就相当于inherit；而对于诸如border这样默认不继承的属性，就相当于initial。

继承性的传递

继承性是从自己开始，直到最小的元素，继承的权重是0，也就是说只要有权重，继承属性就会被覆盖。可以查看 **优先级 **部分。

优先级

定义CSS样式时，经常出现两个或更多选择器应用在同一元素上，此时，

• 选择器相同，则执行层叠性（后者覆盖前者)
• 选择器不同，就会出现优先级的问题。

权重计算

当选择器，选择上了某个元素的时候，那么要这么统计权重：
id的数量 ， 类的数量 ， 标签的数量 。

1. 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。
2. 如果没有选中，那么权重是0。如果大家都是0，就近原则。

常用的选择器记法：

注意：

1. 值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
2. important权重仅适用于设置的级别，不会使后代的样式权重上升

• 行内内联: 1,0,0,0
• #id: 0,1,0,0
• .class | :hover | :nth-child() | 属性选择器[type="number"] : 0,0,1,0 (:hover这种一个冒号叫结构伪类)
• 标签 | ::after | ::before | ::first-line: 0,0,0,1 (这种两冒号的叫伪元素，在书写的时候虽然你可以写一个冒号但是浏览器还是给你补上去了，本质上就是两冒号)
• important : ∞，注意只是设置的那一层级上权重无限大

选择器

基础一点的选择器

tag、id和class选择器

div{//设置所有div元素的字体颜色
	color:blue
}

#test{//设置id为test的元素字体颜色
	color:green
}

.name{//设置calss为name的元素字体颜色
  color:red
}

组合选择器

也就是层级选择器

#test .name{//设置id为test下的calss为name的子孙元素字体颜色
  color:red
}

伪类

:after | ::before | ::first-line: 0,0,0,1 (这种两冒号的叫伪元素，在书写的时候虽然你可以写一个冒号但是浏览器还是给你补上去了，本质上就是两冒号)

.name:before{//calss为name的元素增加内容：1
   content: '1';
}

高级一点的选择器

not()

非选择器

.name:not(p){//设置calss为name 非 <p> 的元素字体颜色
  color:red;
}

nth-child()

伪类选择器，第几个子元素，索引从1开始，超出了元素的个数会被忽略。

• ntd-child(2n) 偶数
• ntd-child(2n+1) 奇数

nt-of-type()

伪类选择器，第几个指定类型的子元素，索引从1开始。

A + B

相邻的兄弟选择器，A之后相邻同层级兄弟，满足B的都会被选上

.root + div {//靠近.root的第一个兄弟div字体颜色
 	color:red
}

A ~ B

通用的兄弟选择器，A之后所有同层级的兄弟，满足B的都会被选上

.root ~ div {//.root之后的所有兄弟div字体颜色
 	color:red
}

常见属性

FFC(弹性布局)

简写

flex:0 1 auto ,也就是 flex-grow、flex-shrink 、flex-basis。

space-between space-around space-evenly

• space-betweem：子元素与容器两端对齐，间距子元素平分。
• space-around：子元素与容器有间距，是子元素之间间距的一半。
• space-evenly：子元素与容器有间距，所有间距都一致。

transform

用于元素空间位置的变换。

2D变换

双参数加上后缀实现单个方向指定，如translateX() 或者 translateY() 

• translate(x,y) : xy平移
• rotate(45deg) : 旋转,顺时针（正数）或逆时针（负数）旋转的角度
• scale(x,y) : 缩放，接受width 的倍数、height 的倍数
• skew(xdeg,ydeg): 翻转，先x轴翻转再y轴
• matrix(a,b,c,d,e,f)：

其中，x 和 y 表示变换前矩阵偏移元素中心点的坐标；x‘ = ax + cy + e 和 y‘ = bx + dy + f 分别表示变换后的坐标。Matrix 中 e, f 主要用于设置元素在 X轴和 Y轴上的平移。a, d 主要用于设置元素在 X轴和 Y轴上的缩放。a,b,c,d 用于设置元素在 XY 平面上的旋转。

3D变换（少用）

CSS3三维世界坐标系如下图所示，采用的是左手坐标系，Y轴方向沿着屏幕向下

1. perspective

写在被视察元素的父盒子上面，用来设定一个初始视距，后面的z轴可以在范围内调整。

2. 3D呈现

正常我们界面只有2D效果，打开即可以有3d效果

• transform-style: flat 代表子元素不开启 3D 立体空间，默认的
• transform-style: preserve-3d 子元素开启立体空间

3. translate3d

• 近大远小
• 物体和面遮挡不可见

.parent{
  perspective:200px;//初始大小是200px的距离
  .child{
    transform:translate3d(100px,10px;100px);//3d种的z越大，看到的就越大
    width:100px;
    height:100px;
    background:red;
  }
}

4. rotate3d(x, y, z)

.parent2{
  position:relative;
  transition: all 2s;
  transform-style:preserve-3d;
  width:300px;
  &:hover {
    transform: rotateY(60deg);
  }
  .child2-1{
    width:100px;
    height:100px;
    background:red;
  }
  .child2-2{
    position:absolute;
    width:100px;
    height:100px;
    background:blue;
    top:25%;
    transform: rotateX(60deg);
  }
}

transition

css过渡效果，提高界面变化的流畅性。
如 transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)

animation

用于元素的动画效果。

• 在** @keyframs **中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
• 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
• 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

简写

一般前四个使用较多。

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态
animation: name duration timing-function delay iteration-count direction fill-mode

常见问题

BFC（块级布局）

是块级元素一种布局规则，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

Box（盒子） 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染:

• block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context(BFC)；
• inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context(IFC)；

BFC的布局规则

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 在BFC中，盒子从顶端开始垂直地一个接一个地排列
• 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
• 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
• BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
• 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度

BFC触发

• float的值不是none。
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-caption、flex或者inline-flex
• overflow的值不是visible

BFC用途

1. 清除浮动
2. 解决外边距合并
3. 制作右侧自适应的盒子问题

IFC（内联布局）

也是一种布局规则，其内部元素会内联。

IFC布局规则

• 内部的盒子会在水平方向，一个个地放置(默认就是IFC)；
• IFC的高度，由里面最高盒子的高度决定(里面的内容会撑开父盒子）；
• 当一行不够放置的时候会自动切换到下一行；

IFC触发

• 行内元素比如：input a img span 
• display 属性为 inline, inline-block, inline-table 的元素

硬件加速

详情可看： 链接地址 浏览器渲染中的复合图层说明

盒子模型

注意 box-sizing 

• 当设置为 content-box 时，属于标准盒模型，在设置宽度和高度时，只包含 content，不包含 padding 和 border；
• 而设为 border-box 时，属于 IE 盒模型，设置宽度和高度时，包含 content、padding 和 border。

CSS解析规则

从关键选择器开始，从右到左查找，因为dom结构是树形结构？

li 跟 li 横排之间为什么有空隙

浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们代码的

换行后会产生换行字符。
解决方案：

• 写在同一行
• margin 负值

如何画三角形？（边框等分原理）

如盒子模型上图所示，其实盒子模型的边框均等分了边角，当content和padding无限小的时候，我们会得到下图

那三角形就很容易画出来了

.triangle {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-color: red transparent red transparent;
}