第一章
F12:
element.style 内联样式（可以直接在上面写代码进行简单调试）
user agent stylesheet 用户代理样式
Inherited from** 从**继承
代码有个删除线表示没有应用，有个黄色三角叹号表示写错了
Unknown property name 不认识的属性名称（属性名写错了）
Invalid property value 未验证的属性值（属性值写错了 || 忘加分号 || 分号写成中文）
Computed(计算后) display: online 行内元素
block 块级元素
margin 示意图若边距上的数字为 - ，表示没有
Network 网络请求和响应 利用浏览器缓存的技术减少请求的次数
inherit属于CSS关键字，所有的属性都可以接受该值，该值使得属性能够继承祖先设置
normal也是关键字，可将元素的属性恢复为设置前的值，如：line-height：normal;
display:initial; 不论父元素如何设定，恢复到浏览器最初始时的display属性
display: unset; 改值混合了inherit和initial，如果父元素设置了就用父元素的设定,否则用浏览器的缺省设定
CSS的七层层叠顺序:
background/border < 负z-index < block块级元素 < float浮动 < inline/inline-block
< z-index:auto或z-index:0 < 正z-index
注意：若设置opacity，则会形成一个新的层叠上下文，如opacity:0.99，则会位于正z-index的下面
CSS应遵循关注分离、松耦合的原则，同时需要注重理解，即使更改了 HTML 标签，也不需要修改 CSS 选择符，所以，给相应元素添加 class 是一个可选方案
_______________________________________________________________________________________
css的渲染的过程:
① 根据HTML的结构生成DOM树(DOM树包含了display:none的节点)
② 在DOM树的基础上，根据节点的几何属性(margin/padding/width/height/left等)生成render树
③ 在render树的基础上继续渲染color、font、transform、opacity等属性
如果①和②发生变化，会发生回流(reflow)，而如果仅仅③中的属性发生改变，仅会触发重绘(repaint)，即回流必然伴随着重绘，回流会影响浏览器css的渲染速度
reflow(回流): 当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流
repaint(重绘): 当元素的一部分属性发生变化，如外观背景色，不会引起布局变化而需要重新渲染的过程叫做重绘
在浏览器中用css开启硬件加速，使用GPU(Graphics Processing Unit)可以提升页面性能
常用3d变化(translate3d属性)来开启硬件加速(会增加内存使用)，如:
.css{ -webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0); }
_______________________________________________________________________________________
CSS（Cascading Style Sheets）层叠样式表、级联样式表、简称：样式表
实现了内容（HTML）与表现（CSS）的分离
CSS与HTML之间的关系
HTML：主要用于构建网页结构与内容
CSS： 用于构建HTML元素的样式
CSS的作用：1、以统一的方式实现样式的定义
2、提高页面代码的可重用性和可维护性
HTML属性与CSS样式的使用原则
W3C：建议尽量使用CSS样式取代HTML属性
HTML特有的属性只能使用HTML属性
例：colspan(在CSS中没有方式能够取代，所以针对跨行跨列来讲，只能使用HTML元素属性，不能使用CSS属性)，rowspan也一样
CSS语法
一、css样式表的使用方式
①内联方式：也叫行内样式，将css样式声明在单个HTML元素中的style属性中
语法：<ANY style="样式声明；样式声明"></ANY>
样式声明：表示一个具体显示效果，多个样式声明之间，用;隔开
每个样式声明都由两部分组成：样式属性：属性值；
例：设置某元素的文本颜色为红色，文字大小为24px；背景颜色为绿色
<ANY style="color:red;font-size:24px;background-color:green;"></ANY> 用分号分隔
②内部样式表：将"样式表"定义在页面<head></head>的 style 属性中
步骤：1. 在<head>中添加<style></style>元素
2. 在 style 中添加若干"样式规则"
样式规则：
选择器{
样式声明；
样式声明；
...
}
选择器：规范了页面中哪些元素能够使用定义好的样式
③外部样式表：将 "样式表" 定义在外部 css 文件中(**.css)
步骤：1. 创建一个单独的样式表文件保存样式规则：**.css
只能编写遵循css规范的内容
2. 在需要的页面上使用 <link> 标记链接引入样式表文件
<head>
<link rel="stylesheet" type="text/css" href="样式表文件路径">
</head>
二、css样式表特征
1. 继承性：子级元素可以直接使用父级元素声明好的样式(可减少代码量)
大部分的css样式属性是可以被继承的
2.层叠性：可以为一个元素声明多个样式规则
如果样式不冲突的话，多个样式规则中的样式可以层叠为一个
3. 优先级：样式定义冲突时，按照不同样式规则的"优先级"来应用样式
就近原则：就近优先---谁离元素近，就用谁，后定义者优先
浏览器缺省设置（user agent stylesheet，UA样式） 最低
外部样式表或内部样式表 中
内联样式 最高
相同样式，以最后一次为主
4. ! important规则(仅对前面的一个属性生效)
作用：显示调整优先级，永远都以!inportant的为准
语法：属性名：值 !important;
将 !important 添加到样式属性值的后面，中间用空格隔开
注意：尽量少用
弊端：① IE6及以下浏览器不支持
② 会打破默认的优先级规则
三、注释：/*注释语句*/
____________________________________________________________________________________
CSS基础选择器
作用：规范了页面中哪些元素能够使用定义好的样式
目的：将定义好的样式匹配给页面中的元素
1、通用选择器
作用：匹配页面中所有的元素
语法：*{样式声明；}
缺点：效率较低，尽量不用
大部分属性可以通过继承来取代*
2、元素选择器
别名：标签选择器、标签样式、元素样式、标记选择器
作用：定义或重写页面某一类标签元素的默认样式
语法：元素名称{样式声明；}
3、类选择器
作用：用于定义一些元素的通用样式，定义好样式后，可以被任意元素的class属性值进行引用的选择器
语法：.类名{样式声明；}
使用：<ANY class="类名"></ANY>
注意：① 由英文，数字，下划线（_）连字符（-）组成
② 类名不能以数字开头
③ 除 _ - 以外不能有其他特殊符号
1、多类选择器的引用
方式：让一个元素同时引用多个类选择器
语法：<ANY class="类名1 类名2 类名3"></ANY>
使用：.类选择器1.类选择器2.类选择器3 ... {样式声明;}
2、分类选择器的定义
方式：将元素选择器和类选择器结合起来使用，从而实现对某种元素不同样式的细分控制
语法：元素选择器.类选择器 {样式声明;}
例：div.redBack{} 定义class为redBack的div元素的样式
4、ID选择器
作用：用于匹配页面中指定ID值的元素（专属，唯一的id值，只能使用一次）
语法：#id值{样式声明;}
ID值一定要对应页面某个元素的ID值
5、群组选择器
作用：选择器声明是以 , 隔开的选择器列表
场合：将一些相同的规则用于多个元素时
语法：选择器1，选择器2，选择器3...{ }
6、后代选择器
后代：出现在某元素的任意层级的子元素，都可以称之为后代元素
语法：选择器1 选择器2{样式声明;}
例：div span{匹配div中所有的span}
7、子代选择器
子代：出现在某元素中，只具备一级层级关系的元素，被嵌套的称之为子代元素
语法：选择器1>选择器2{样式声明}
例：#d1>div>p{匹配ID中的下一级div元素中的p元素}
8、伪类选择器
作用：匹配页面元素中的不同状态的选择器
语法：由 : 作为结合符 选择器:伪类选择器{ }
分类：1、链接伪类
:link 定义未被访问的超链接状态
:visited 定义访问过的超链接状态
2、动态伪类
:hover 定义鼠标悬停在元素上时的状态
:active 定义元素被激活时的状态（一瞬间的状态，点击瞬间），常用于移动端
:focus 定义元素获取焦点时的状态（长时间的状态，光标闪动时，使用Tab键切换a标签时）
text/password/textarea(多数使用在文本框上)
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
复杂选择器（非继承的）冲突时，把权值加到一起，权值大的优先，如果权值一样则后面的会覆盖前面的
继承的权值最低
选择器类型权值
元素选择器0、0、0、1
类选择器0、0、1、0
伪类选择器0、0、1、0
ID选择器0、1、0、0
内联样式(最高)1、0、0、0
____________________________________________________________________________________
尺寸
尺寸单位
1、% 百分比（相对单位，响应式时使用）
2、in 英寸（1in=2.54cm，对角线）
3、cm 厘米
4、mm 毫米
5、pt 磅（点，Point）（1pt等于1/72英寸）（多数用于文字大小）
6、px 像素（Pixel，计算机显示器上的一个点）（默认）
7、em 倍数，父元素文字大小的倍数，1em：父元素的字体尺寸；2em：父元素字体尺寸的两倍
8、rem 倍数，相对于根元素（html）设置的字体大小，css3新属性，IE8及以下不支持
9、ex 是一个距离单位，表示一个小写字母x(x、y、z的x)的高度，是相对单位，和父元素的字号有关系
浏览器的默认字体大小都为16px，所有未经调整的浏览器都符合: 1rem=16px
颜色单位
1、rgb（ , , ,）
R：red 红色
G：green 绿色
B：blue 蓝色
每个值的范围：0-255
例：rgb(0,0,0) 黑色
rgb(255,255,255) 白色
rgb(255,0,0) 红色
2、rgb(r%,g%,b%)
3、rgba（r，g，b，alpha）
alpha：透明度，0-1之间的数字
4、#rrggbb
由6位十六进制数字表示一个颜色：0-9 A-F（A-11,B-12,C-13...F-15）
例：#000000 黑色
#ffffff 白色
#ff0000 红色
5、#rgb（#rrggbb的缩写）每种颜色的两位数字相同时，才可以缩写
#000 表示 #000000
#abc 表示 #aabbcc
6、颜色的英文单词
尺寸属性
1、作用：用于设置元素的宽度和高度
单位：百分比(%,相对于父元素)和像素(px)
2、宽度
width 设置元素的宽度
max-width 设置元素的最大宽度
min-width 设置元素的最小宽度
3、高度
height 设置元素的高度
max-height 设置元素的最大高度
min-height 设置元素的最小高度
注意：块级元素宽度默认为父元素宽度的100%，高度自适应
行内元素宽度默认宽度以内容为准，高度自适应
注意:
1、max-系列的权重非常的高，超越了!important
2、当min-width与max-width大小有冲突的时候会采用最大原则，即谁大取谁的值
注意：允许修改尺寸属性的元素
1、块级元素（p,div,hn,ul,ol,dl,dt,dd）都允许修改尺寸
2、大部分的行内块元素
行内块：文本框、密码框... 能修改尺寸
单选按钮(radio)、复选框(checkbox)... 无法修改尺寸
3、大部分的行内元素(span,a,b,i)无法修改尺寸
本身就存在width和height属性的html元素允许被修改尺寸（img，table）
4、溢出处理：
使用尺寸属性控制元素大小时，如果内容所需要的空间的大于元素本身，则会导致内容"溢出"
属性：overflow
overflow-x 横向溢出处理方式
overflow-y 纵向溢出处理方式
取值：visible 溢出可见，不处理（默认值）
hidden 溢出隐藏（把溢出的内容隐藏）
① 当子元素为"文档流定位"定位时，会剪掉外面的
② 当子元素为"脱离文档流"定位时，会撑开显示
scroll 让元素显示滚动条，当内容溢出时，滚动条可用
auto 自动，不溢出不显示滚动条，溢出的话则显示滚动条
第二章*******************************************************************************
边框属性
边框：围绕在元素内容和内边距外的线条
通过一个属性控制四个方向边框的效果
2、简写方式：border：width style color;
width：宽度，边框粗细，以px为单位
style： 样式，边框样式，实线，虚线
取值：solid 实线
dotted 虚线（点）
dashed 虚线（线条）
double 两条实线
groove 定义3D凹槽边框，其效果取决于border-color的值
ridge 定义3D垄状边框，其效果取决于border-color的值
inset 定义3D inset边框，其效果取决于border-color的值
outset 定义3D outset边框，其效果取决于border-color的值
color：颜色，边框颜色 transparent 透明色（有边框,通过设置透明,防止在添加边框时出现抖动）
取值：合法颜色值（#fff，#000）
默认为当前的文字颜色（也可写为currentColor关键字，为color的计算后属性值）
注意：border：none；或者border：0；(不加px可以提高效率,不会渲染)可以取消元素边框（无边框）
2、单边定义：border-方向：width style color;
方向：top/right/bottom/left （上右下左）
例：border-left：1px dotted red
3、单属性定义：定义四个边框的某一个属性值
属性：border-属性：值
例：border-style：solid
4、单边单属性定义：定义某一方向的具体某一属性值
属性：border-方向-属性：值
例：border-left-color：red
____________________________________________________________________________________
边框倒角
将元素的四个方向的角倒成圆角
属性：border-radius
取值：绝对数值（px,圆的半径）或 百分比（%,根据宽度和高度的占比来作为倒角圆的半径）
单独定义：border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
例：border-redius：5px
border-redius：50% 如果当前元素宽和高相等的时候，将得到一个圆
边框阴影，元素阴影
属性：box-shadow
取值：h-shadow v-shadow blur spread color inset;
h-shadow 必须设置，阴影的水平偏移距离，+向右偏移；-向左偏移，0向两边偏移
v-shadow 必须设置，阴影的垂直偏移距离，+向下偏移；-向上偏移，0向上下偏移
blur 模糊距离，向水平/垂直方向模糊的距离
spread 阴影的尺寸长度（向周围扩散的距离）
color 颜色 transparent 透明色
inset 值，默认的外阴影更改为内阴影(有凸起感)
例：下阴影：box-shadow：0 2px 3px #BDBDBD;
padding会加上阴影，margin不会加
注意：spread为blur的负值(数字相等)时，生成的阴影会被包含在原来的元素之下，可实现单侧投影
如：下侧投影 box-shadow: 0 7px 5px -5px #DDD
轮廓
作用：绘制于元素周围的一条线，位于边框之外
属性：outline：width style color;
outline-width 轮廓的宽度
outline-style 轮廓的样式
outline-color 轮廓的颜色 transparent 透明色
注意：outline不占用任何空间，可与clip搭配来填充空间
如：outline:9999px solid #F00; clip:rect(0, 9999px, 9999px, 0)
outline：none 或 outline：0；取消轮廓(常用)
例：<input type="text" style="outline: none ;"> 取消文本框输入时的默认轮廓
a:active,a:hover{ outline：0 } 取消点击a链接时的轮廓(:focus使用键盘操作时不要取消效果)
剪裁
clip 用于剪裁已设置绝对定位(position:absolute)的元素
作用：用于定义一个剪裁矩形，对于一个绝对定位元素，在这个矩形的内容才可见，出了这个剪裁区域的内容会剪裁掉，剪裁区域可能比元素的内容区大，也可能小
语法：clip: rect(top, right, bottom, left); 设置元素的形状
clip: auto; 默认值，不应用任何剪裁
clip: inherit; 从父元素继承clip属性的值
____________________________________________________________________________________
框模型
框：页面的一切元素皆为框
框模型：Box-Model又称盒子模型，定义了元素框处理元素内容、内边距、外边距的方式
对象实际宽度 = 左右外边距+左右边框+左右内边距+width
对象实际高度 = 上下外边距+上下边框+上下内边距+height
注：增加边框的内边距和外边距，元素内容区域大小不会改变，但元素的总体占地尺寸会发生变化
元素的可视化尺寸，在边框内：边框内宽度 = 左右边框+左右内边距+width
边框内高度 = 上下边框+上下内边距+height
一、外边距：围绕在元素边框周围的空白区域就是外边距(元素与元素之间的间距)
正常情况下，外边距是不允许被其他元素所占据的
语法：四个方向外边距：margin：value;/* px相对于自己,%相对于父元素 */
单边设置：margin-top 上外边距
margin-bottom 下外边距
margin-left 左外边距
margin-right 右外边距
取值：① 单位可以为px（可以为负）
② 单位可以为%（以父元素为参考）
③ 取值为auto
默认情况下，可以自动计算左右外边距，实现块级元素水平居中对齐
注意：必须为元素设置宽度
④取值为负值（向相反的方向移动元素）
移动元素：margin-top：上外边距取值为负，元素向上移动
margin-left：左外边距取值为负，元素向左移动
外边距的简洁写法：margin：value （四个方向的外边距）
margin：v1，v2 （上下，左右）
margin：v1，v2，v3 （上，左右，下）
margin：v1，v2，v3，v4 （上，右，下，左）
注意：
① 有些元素存在默认外边距
例： body h1-h6 p ul ol pre dl dd dt
编写网页时一般会进行CSS Reset（CSS重写），将默认的外边距全部都清除
选择器1，选择器2...{margin：0;}
② 外边距不可以被继承
③ 外边距的特殊处理
1、外边距的合并
当两个垂直外边距相遇时，他们将形成一个外边距，称为外边距合并
合并后的外边距的高度定于两个外边距中高度较大者
2、外边距溢出
在某些特殊情况下，为子元素设置上下外边距时，有可能作用在父元素上
两个条件：① 父元素没有上或下边框
② 必须为第一个子元素或者最后一个子元素设置外边距
解决方案(4种)：① 为父元素增加边框（弊端：父元素高度会变化）
② 为父元素中增加一个空的<table>（弊端：多一个空元素）
③ 通过给父元素的上内边距取代子元素的上外边距(弊端:父元素高度会变化)
④ 使用内容生成，为父元素生成一个空元素，把空元素变成表格元素
3、为行内元素和行内块元素设置外边距
① 为 "行内元素" 设置上下外边距是无效的（比如：img）
② 为 "行内块元素" 设置上下外边距，则整行元素都跟着变
二、内边距：元素的边框（边缘）到 内容 之间的距离
特点：会扩大元素边框所占用的区域
语法：padding：value;
单边设置：padding-top / right / bottom / left：value;
取值：① 单位为px（没有负值）
② 单位可以为%(相对于父元素)
简洁写法：padding：value（四个方向的内边距）
padding：v1，v2（上下，左右）
padding：v1，v2，v3（上，左右，下）
padding：v1，v2，v3，v4（上，右，下，左）
特殊处理：
对行内元素和行内块元素设置内边距（上下）时，只会影响自己，并不会影响到其他元素
padding-bottom：50%; 指当前父元素width的100%，可以设置height为0，width:50%生成一个正方形
三、box-sizing
作用：重新指定框模型的计算模式
边框内宽度width =左右边框+左右内边距+width;
边框内高度height =上下边框+上下内边距+height;
属性：box-sizing：
取值：①content-box：默认值，采用默认计算模式，即元素的width属性值，不包含padding和border
②border-box： 元素的尺寸会包含该元素的padding（内边距）和border（边框）,不包含margin
常用: .li{width:100%; box-sizing:border-box;} //占满屏幕的宽
____________________________________________________________________________________
背景属性：背景颜色，背景图像
注：设置的背景颜色/图像，会填充到内容区域、内边距、边框
1、背景颜色：以单一颜色填充
属性：background-color
取值：任意合法颜色 或 transparent 透明色
注意：背景颜色会填充到边框、内边距、内容区域
2、背景图片（一般会显示在背景颜色上面）
作用：以图像作为元素的背景
属性：background-image
取值：url（"图片url"）或 url（图片url）
注意：<img>是独立的元素
而背景图不是元素，是某元素背景的衬托
3、背景图片重复
属性：background-repeat
取值：① repeat 默认值，水平垂直方向都平铺
② repeat-x 仅在水平方向平铺
③ repeat-y 仅在垂直方向平铺
④no-repeat 不平铺
注：IE8及更早浏览器、Firefox4.0-8.0 不支持为background-repeat定义2个参数值，要写在一起
如：background-repeat: repeat no-repeat;
4、背景图片尺寸（定位图片时，若改变图片尺寸则改变整个图片的尺寸）
属性：background-size
取值：① value1 valie2 指定背景图像的宽度和高度，单位为px
② value1% value2% 采用当前元素的宽和高的百分比作为背景图像大小，不能写成一个
③ cover(覆盖) 将背景图像等比放大，直到背景图完全覆盖到元素的所有区域为止
④contain(包含) 将背景图像等比放大，直到背景图像的下边或右边有一个边缘碰到元素区域为止
5、背景图片的固定
属性：background-attachment
取值：① scroll 滚动，背景图会随着元素本身而滚动（默认值）
② fixed 固定，背景图不会随着滚动条而发生滚动，一直保持在可视化区域中
移动的只是视口，背景图一直固定(当滚动到下一个背景图时会被覆盖掉)
③ local 背景相对于元素的内容而滚动
注意：尽量为 body 设置背景
6、背景图片的定位（在同一个标签中，和尺寸分成两个类，可以将图片应用于多个场合）
作用：改变背景图像在元素中的默认位置
属性：background-position
取值：① x y
x：背景图水平方向移动距离，+背景图向右偏移，-向左
y：背景图垂直方向移动距离，+背景图向下偏移，-向上
②x% y%
0% 0%： 显示在元素的左上方
100% 100%：显示在元素的右下方
50% 50%： 居中
③ 关键字：x：left左 / center中 / right右
y：top上 / center中 / bottm下
例：background-position：left top; 左上方
background-position：top left; 左上方
background-position：center; 水平垂直都居中
背景属性的简写
属性：background：
取值：color(颜色) url(图像路径) repeat(重复) attachment(固定方式) position(定位);
注意：如果不设置其中的某个值，将采用默认值，不能加background-size(图片尺寸)，要单独写
例如：
div{
background-image: url("../img/red.png");
background-repeat: no-repeat;
background-position: center;
/*以上可简写为: background: url("../img/red.png") no-repeat center center; */
background-size: contain;
}
CSS Sprites 雪碧图，精灵图（图像拼合技术）
作用：将若干幅小图像封装到一幅大图像中，以减少http的请求次数
步骤：
① 在页面中，根据要显示的图像的尺寸，创建一个一模一样大小的元素
② 为该元素设置背景图，并且通过背景图像定位，实现位置偏移，将要显示的图像，显示在元素中
③ 可使用 transform：scale（value）对图片进行缩放
第三章*******************************************************************************
渐变：两种或多种颜色间平滑过渡的效果
1、分类：① 线性渐变
② 径向渐变
③ 重复渐变
2、渐变的组成（元素）
色标：决定了渐变的每种颜色及其出现的位置
每一种渐变效果都是由多个 色标 组成（两个及以上）
3、渐变的语法
① 语法
属性：background-image
取值：linear-gradient（） 线性渐变
radial-gradient（） 径向渐变
repeating-linear-gradient（） 重复线性渐变
repeating-radial-gradient（） 重复径向渐变
②线性渐变
语法：background-image：linear-gradient（angle，color-point，color-point，…）
1、angle：方向或角度，即渐变的填充方向
取值：关键字：to top 从下向上填充
to right 从左向右填充
to bottom 从上向下填充
to left 从右向左填充
角度：0deg~360deg
例：0deg to top
90deg to right
180deg to bottom
270deg to left
2、color-point：色标，表示每个颜色值，及其出现的位置，多个色标之间用，分隔
例：red 0% 开始的时候是红色
bule 50px 填充到第50像素时变为蓝色
注意：色标的位置可以省略，省略位置后，会将每个色标平均分配到元素区域
③径向渐变
语法：background-image：radial-gradient（[size at position]，color-point，color-point，…）
size at position：径向渐变的半径 以及 圆心位置（可以不设置，默认在元素正中央）
size 圆的半径，px为单位
position 圆心位置
例：0px 0px 将圆心设置在元素的左上角
50% 50% 将圆心设置在元素的中间位置
right bottom 关键字：top / right / bottom / left
4、浏览器的兼容性
各主流浏览器的主流版本，均支持渐变效果
对于不支持渐变的浏览器，可以尝试增加浏览器前缀，去实现渐变的显示
浏览器的前缀：Firefox -moz-
Chrome和Safari -webkit-
Opera -o-
IE -ms-
浏览器添加前缀的位置：① 如果浏览器不支持属性的话，则将前缀加到属性前
例：animation：scroll 5s
-moz-animation：scroll 5s
-webkit-animation：scroll 5s
-o-animation：scroll 5s
② 如果浏览器支持属性，但不支持值的话，则将前缀加载到属性值的前边
____________________________________________________________________________________
字体属性
1、指定字体系列
属性：font-family
取值：value1，value2…
除了各种特定的字体系列外，CSS 定义了5种通用字体系列：
Serif、Sans-serif、Monospace、Cursive、Fantasy
注意：字体取值包含 '中文或特殊符号' 时，使用 "" 引起来
常用字体：font-family："Microsoft YaHei", "微软雅黑", "sans-serif",Helvetica;
2、字体大小(字体系列也会影响字体大小)
属性：font-size
取值：rem / em / px / % / pt
3、字体加粗
属性：font-weight
取值：① normal 正常体
② bold 粗体(h1~h6)
③ bolder 更粗
④ lighter 更细
③400~900 整百倍数字，取值越大越粗(PC端不太明显，移动端明显)
400 normal
700 bold
4、字体样式
属性：font-style
取值：① normal 正常体
② italic 斜体
5、小型大写字母
作用：针对英文字符，将小写字符变成大写字符，但是大小与小写一样
属性：font-variant
取值：① normal
② small-caps
字体属性的简写方式
属性：font
取值：style(样式) variant(小型大写) weight(加粗) size(大小)/line-height family(字体，必给)
注意：使用简写属性时，必须要设置family的值，否则无效
font-size和line-height之间要加'/'
____________________________________________________________________________________
文本属性
1、文本颜色
属性：color
取值：任意合法颜色
2、文本排列方式
作用：指定当前元素中的文本、行内元素、行内块元素的水平对齐方式
属性：text-align
取值：left(左对齐) / center(居中) / right(右对齐) / justify(两端对齐)
3、文字修饰（线条样式）
作用：指定文本的线条样式
属性：text-decoration
取值：①none 没有线条显示(常用于去除超链接的默认样式)
② underline 下划线
③ overline 上划线
④ line-through 删除线
4、行高（可用于单行文本，使其line-height为文本的高，用于文字垂直居中）
作用：调整一行文本的高度
如果行高的高度高于文字高度本身，那么该行文本将在指定的行高内呈现出垂直居中的显示效果
场合：① 控制一行文本垂直居中对齐
② 设置行间距
line-height与font-size的计算值之差叫做'行间距',会分为2份，分别加到文本内容的顶部和底部
属性：line-height
取值：① 以px为单位的数值，固定的行间距
② 设置为数字，此数字会与当前的字体尺寸相乘来设置行间距
设置不同的字体大小，相同的行高数字，会出现不同的行高效果
③ 设置为%，基于当前字体尺寸的百分比行间距
注意：在行内元素中，有一个"幽灵空白节点"，不占宽度，无法用js获取，但确实存在，其行高大于1，当子元素的行高与字体大小相同时(父元素未设置行高)，"幽灵空白节点"会撑开父元素
解决：设置父元素line-height: 1，防止幽灵空白节点撑开父元素，设置行内元素子元素为行内块元素，有多个不同字体大小的子元素时，设置子元素vertical-align: middle
5、首行文本缩进（距离）
属性：text-indent
取值：缩进的距离，以px为单位的数值
允许使用负值，首行会被缩进到左边
若设置为%，则参照的是父元素的width
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
7、修改input元素提示文字(placeholder)的样式(如：颜色)，(必须分开写)
input::-webkit-input-placeholder{WebKit browsers
color: red;
}
input:-moz-placeholder{Mozilla Firefox 4 to 18
color: red;
}
input::-moz-placeholder{Mozilla Firefox 19+
color: red;
}
input:-ms-input-placeholder{Internet Explorer 10+
color: red;
}
input::placeholder{
color: red;
}
8、修改input、textarea输入框的光标颜色(光标的粗细与缩放有关，与字体无关)
input, textarea{
color:red; 设置光标颜色
-webkit-text-fill-color:blue; 设置字体颜色
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
-webkit-text-fill-color: initial;修改placeholder颜色
}
9、letter-spacing: 50px; 中文、字母间距(可取负值)
word-spacing: 50px; 英文单词间距
____________________________________________________________________________________
表格table（bug较多，用ul代替）(在手机端，改变宽、高，可能会使边框合并之后加的border断开)
1、表格的常用属性
① 边距属性：padding
② 尺寸属性：width，height
③ 文本格式化属性：font-**
text-align，color，text-indent…
④ 背景属性：背景色，背景图，渐变
⑤ border属性
⑥vertical-align
作用：在单元格中，设置文本的垂直对齐方式
取值：top / middle / bottom
注意：在父元素上设置此样式时，对inline-block类型的子元素都有效
2、表格的特有属性
① 边框合并：将 table 和 td 的边框合并到一起，以单线框的模式进行显示
属性：border-collapse
取值：1、separate 默认值，分离边框
2、collapse 边框合并效果(chrome中：左边的覆盖右边的、上面的覆盖下面的)
注意：仅限于边框分离状态时使用，即border-collapse：collapse
若想改变个别边框的颜色，可使用内容生成，生成一个点或线，并绝对定位
② 边框边距
作用：单元格之间的距离
属性：border-spacing
取值：1、指定一个值：表示单元格间水平和垂直间距是相同
2、指定两个值：第一个值：单元格间的水平间距
第二个值：单元格间的垂直间距
3、标题位置
属性：caption-side
取值：① top 默认值，标题显示在表格之上
② bottom 标题显示在表格之下
4、显示规则
作用：指定的表格布局方式
默认布局方式为自动表格布局，即单元格的宽度实际上是由内容来决定的，与设定的值无关
属性：table-layout
取值：①auto 列宽度由内容决定，默认值，自动表格布局
②fixed 列宽度由设置的值来决定，而不取决于内容，固定表格布局
自动表格 vs 固定表格布局
① 自动表格布局—————td里的元素决定td的宽高
1、单元格大小会适应内容大小
2、缺点：表格复杂时，加载速度慢
3、适用于不确定每列大小的情况下使用
4、虽然算法较慢，但是能体现出传统表格的特点
② 固定表格布局
1、单元格大小取决于td中设置的值
2、优点：加载速度较快
3、确定每列大小时，可以使用固定表格布局
4、算法较快，缺点是不够灵活
网友评论