CSS学习笔记
CSS属性
以下是开发中经常会用到的前缀。
- -webkit：webkit核心浏览器，包括Chrome、Safari等。
- -moz：火狐（Firefox）浏览器
- -ms：IE浏览器。
- -o：Opera浏览器。
背景属性
| 属性 | 描述 | 属性值 |
|---|---|---|
| background | 简化写法，可以在同一个声明中设置全部属性 | |
| background-attachment | 背景图像是否固定 | fixed（固定） scroll（默认值） |
| background-color | 单独设置背景颜色 | |
| background-image | 单独设置背景图像 | url（地址） |
| background-position | 设置背景图像位置 | top center bottom right left |
| background-repeat | 设置背景图像是否重复 | repeat-x、y no-repeat |
文本属性
| 属性 | 描述 | 属性值 |
|---|---|---|
| color | 设置文本颜色 | |
| line-height | 设置行高。 | |
| letter-spacing | 设置字符间距。letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。 | |
| text-align | 对齐元素中的文本。 | left right center justify(实现两端对齐文本效果。) |
| text-decoration | 向文本添加修饰。 | none underline overline line-through blink |
| text-indent | 缩进元素中文本的首行。 | |
| word-spacing | 设置字间距。 | |
| text-transform | 处理文本的大小写 | capitalize（文本中的每个单词以大写字母开头。） uppercase (定义仅有大写字母。) lowercase |
字体属性
| 属性 | 描述 | 属性值 |
|---|---|---|
| font | 把所有针对字体的属性设置在一个声明中。 | |
| font-family | 设置字体系列。 | |
| font-size | 设置字体的尺寸。 | |
| font-style | 设置字体风格。 | italic（斜体）oblique（倾斜） |
| font-weight | 设置字体的粗细。 | bold bolder |
链接属性
| 属性 | 描述 |
|---|---|
| a:link | 普通的、未被访问的链接 |
| a:visited | 用户已访问的链接 |
| a:hover | 鼠标指针位于链接的上方 |
| a:active | 链接被点击的时刻 |
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
列表属性
| 属性 | 描述 | 属性值 |
|---|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 | |
| list-style-image | 将图象设置为列表项标志。 | url |
| list-style-position | 设置列表中列表项标志的位置。 | inside（列表项目标记放置在文本以内）outside（列表项目标记放置在文本以外） |
| list-style-type | 设置列表项标志的类型。 | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | |
CSS Table 属性
| 属性 | 描述 | 属性值 |
|---|---|---|
| border-collapse | 设置是否把表格边框合并为单一的边框。 | separate（边框会被分开）collapse（边框会合并为一个单一的边框） |
| border-spacing | 设置分隔单元格边框的距离。 | |
| caption-side | 设置表格标题的位置。 | bottom（把表格标题定位在表格之下。）top（默认值。把表格标题定位在表格之上。） |
| empty-cells | 设置是否显示表格中的空单元格。 | hide（不在空单元格周围绘制边框。） |
| table-layout | 设置显示单元、行和列的算法。 | fixed（列宽由表格宽度和列宽度设定。） automatic（默认） |
text-align 和 vertical-align 属性设置表格中文本的对齐方式
CSS边框属性
一切皆为框
CSS 内边距
| 属性 | 描述 |
|---|---|
| padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
| padding-bottom | 设置元素的下内边距。 |
| padding-left | 设置元素的左内边距。 |
| padding-right | 设置元素的右内边距。 |
| padding-top | 设置元素的上内边距。 |
CSS 外边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
CSS 边框属性
| 属性 | 描述 | 属性值 |
|---|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 | |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 | none hidden （对于表，hidden 用于解决边框冲突。） dashed虚线 solid实线 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 | |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 | transparent默认值透明 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 | |
| border-bottom-color | 设置元素的下边框的颜色。 | |
| border-bottom-style | 设置元素的下边框的样式。 | |
| border-bottom-width | 设置元素的下边框的宽度。 | |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 | |
| border-image | 设置所有 border-image属性的简写属性。 | |
| border-radius | 设置所有四个 border-radius 属性的简写属性 | |
| box-shadow | 向方框添加一个或多个阴影 | h-shadow（水平） v-shadow（垂直） |
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
外边距实现盒子居中
可以让一个盒子实现水平居中，需要满足一下两个条件：
- 必须是块级元素。
- 盒子必须指定了宽度（width）
然后就给左右的外边距都设置为auto，就可使块级元素水平居中。
文字盒子居中图片和背景区别
- 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改为 auto
text-align: center; /* 文字居中水平 */
margin: 10px auto; /* 盒子水平居中 左右margin 改为 auto 就阔以了 */
CSS 定位 (Positioning)
CSS 定位属性
| 属性 | 描述 | 属性值 |
|---|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 | static relative absolute fixed（生成绝对定位的元素，相对于浏览器窗口进行定位。） |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 | visible hidden scroll(会显示滚动条) auto（会显示滚动条） |
| clip | 设置元素的形状。元素被剪入这个形状之中，然后显示出来。 | shape（设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)） auto（默认值） |
| vertical-align | 设置元素的垂直对齐方式。 | sub super top middle bottom |
| z-index | 设置元素的堆叠顺序。 |
CSS浮动
| 属性 | 描述 | |
|---|---|---|
| clear | 清除浮动 | left right both |
| cursor | 设置指针类型 | |
| display | 如何显示元素 | inline block |
| float | 设置元素浮动 | left right |
个性化的字体定义
@font-face的基本语法如下：
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
权重
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞ 无穷大 |
版心和布局流程
“版心”(可视区) 是指网页中主体内容所在的区域。一般在浏览器窗口中水平居中显示，常见的宽度值为960px、980px、1000px、1200px等。
布局流程
为了提高网页制作的效率，布局时通常需要遵守一定的布局流程，具体如下：
1、确定页面的版心（可视区）。
2、分析页面中的行模块，以及每个行模块中的列模块。
3、制作HTML结构 。
4、CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
过渡(CSS3)
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
如果想要所有的属性都变化过渡， 写一个all 就可以
transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
缩放 scale(x, y)
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
注意单位是 deg 度数
rotateX()
就是沿着 x 立体旋转.
rotateY()
沿着y轴进行旋转
rotateZ()
沿着z轴进行旋转
倾斜 skew(deg, deg)
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
- 透视原理： 近大远小 。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
注：并非任何情况下需要透视效果，根据开发需要进行设置。
perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r
@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"
伸缩布局(CSS3)
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2、各属性详解
1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
min-width 最小值 min- 280px 最小宽度 不能小于 280
max- 1280px 最大宽度 不能大于 1280
2.flex-direction调整主轴方向（默认为水平方向）
flex-direction: column 垂直排列
flex-direction: row 水平排列
3、justify-content调整主轴对齐（水平对齐）
子盒子如何在父盒子里面水平对齐
| 值 | 描述 | 白话文 |
|---|---|---|
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子，中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
4、align-items调整侧轴对齐（垂直对齐）
子盒子如何在父盒子里面垂直对齐（单行）
| 值 | 描述 | 白话文 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器（子元素不给高度的前提下) |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
5、flex-wrap控制是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。 |
6、flex-flow是flex-direction、flex-wrap的简写形式
flex-flow: flex-direction flex-wrap;
7、align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
| 值 | 描述 | 测试 |
|---|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 | |
| center | 项目位于容器的中心。 | |
| flex-start | 项目位于容器的开头。 | |
| flex-end | 项目位于容器的结尾。 | |
| space-between | 项目位于各行之间留有空白的容器内。 | |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
8、order控制子项目的排列顺序，正序方式排序，从小到大
用css 来控制盒子的前后顺序。 用order 就可以
用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0