-
css（层叠样式表）
-
美化
-
基本语法
-
选择器
-
定义
-
表示样式的作用对象
-
-
简单选择器
-
标签选择器
-
直接以html标签作为选择器来应用css样式
-
-
类选择器
-
定义类选择器
-
使用英文圆点+类选择器名称
-
命名规则
-
只能使用字母数字下滑线（_)连字符(-)
-
首字符必须以字母开头
-
区分大小写
-
-
-
-
使用类选择器
-
class=“类选择器的名称”
-
-
-
id选择器
-
定义id选择器
-
#+id选择器的名称（可以是除中文外任意字符，但建议语义化）
-
-
使用id选择器
-
id=“id选择器名称”
-
-
在同一个网页中，标签的id应该是全局唯一的（不重复），id的命名应该语义化
-
-
-
复合选择器
-
子选择器
-
使用">"符号，修饰指定选择器的儿子元素
-
-
后代选择器
-
使用空格，修饰指定选择器的后代元素
-
-
相邻选择器
-
使用”+“，修饰指定一个元素的下一个元素的样式
-
-
多层选择器嵌套
-
css允许嵌套更多的选择器或者跳级嵌套
-
-
属性选择器
-
利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。
-
元素【属性或属性值表达式】
-
分类
-
匹配属性名选择器
-
img【alt】
-
div【class】
-
div【id】【class】
-
可以同时设置多个属性选择器
-
-
-
匹配属性值选择器
-
div【id=”header“】
-
img【alt】【title】
-
两个属性值都有才用？？
-
-
-
模糊匹配属性值选择器
-
|=（连字符匹配）
-
以连字符为分隔符，匹配属性值中局部字符串
-
<div class="red-blue-green">
-
[class|="blue"]{}
-
-
-
~=（空白符匹配）
-
以空白符为分隔符，匹配属性值中局部字符串
-
<div class="red blue green">
-
[class~="red"]{}
-
-
-
^=（前缀匹配）
-
匹配属性值中起始字符
-
<div class="Red-blue-green">
-
[class^="Red"]
-
-
-
$=（后缀匹配）
-
匹配属性值中结束字符
-
<div class="red-blue-Green">
-
[class$="Green”]
-
-
-
*=（子字符串匹配）
-
匹配属性值存在的指定字符
-
<div class="red-blue-green">
-
[class*="gre"]
-
-
-
-
-
注意
-
兼容性
-
-
-
伪类选择器
-
给某些标签的某种状态或特殊区域（无法通过其他选择器进行精准控制的）设置样式
-
指定标签名：选择符{}
-
前缀符号（：）与前后名称之间不要有空格
-
-
应用
-
超链接（可定义任意元素鼠标的四种状态样式）
-
a:link{color:;}
-
正常链接状态下的样式
-
-
a：visited{}
-
被访问之后的样式
-
-
a：hover
-
鼠标经过时的样式
-
-
a：active
-
超链接被激活时的样式
-
-
-
-
-
标签绑定
-
指定类选择器（把标签和类捆绑在一起）
-
作用
-
定义类的使用范围
-
-
用法
-
在标签的后面紧跟一个类，组成一个指定类范围的复合选择器
-
-
-
指定id选择器（把标签和id捆绑在一起）
-
提高该样式的优先级
-
-
-
分组选择器
-
给多个标签设置相同的样式
-
元素，元素{}
-
-
-
通配选择器
-
html所有元素定义相同的样式
-
*{属性：属性值}
-
特殊地，border：1px solid black 给盒子加边框
-
-
css新增选择器
-
兄弟选择器
-
指定一个元素后面的同级元素的样式
-
~
-
-
目标伪类选择器/动态选择器
-
元素E：target{}
-
选择匹配E的所有元素，且匹配元素被相关URL指向
-
该选择器是动态选择器，只有当url指向该匹配元素时，样式效果才能够有效
-
-
结构伪类选择器
-
：first-child： 选择某个元素的第一个子元素
-
：last-child： 选择某个元素的最后一个子元素
-
：nth-child（）： 选择某个元素的一个或多个特定的子元素
-
nth-child（length）； 参数为具体数字
-
nth-child（n）； 参数为n，n从0开始计算
-
nth-child（n*length）； n的倍数选择，n从0开始计算
-
nth-child（n+length）； 选择大于length后面的元素
-
nth-child（-n+length）； 选择小于length前面的元素
-
nth-child（n*length+1）； 表示隔几（length）选一
-
-
：nth-last-child（）：选择某个元素的一个或多个特定的子元素
-
从最后一个元素开始计算
-
-
：nth-of-type（）： 选择指定的元素
-
：nth-last-of-type（）： 选择指定的元素，从元素的最后一个开始计算
-
：first-of-type： 选择一个上级元素下的第一个同类子元素
-
：last-of-type： 选择一个上级元素的最后一个同类子元素
-
：only-child： 选择的元素是他的父元素的唯一一个子元素
-
：only-of-type： 选择一个元素是他的上级元素的唯一一个相同类型的子元素
-
：empty：选择的元素里面没有任何内容
-
-
否定伪类选择器
-
排出或过滤掉特定元素
-
：not（）
-
-
状态伪类选择器
-
针对表单进行设计
-
用户界面状态一般包括
-
可用 不可用
-
选中 未选中
-
获取焦点 失去焦点
-
锁定
-
待机
-
-
选择器
-
enabled
-
匹配指定范围内所有可用ui（用户界面）元素
-
-
disabled
-
匹配指定范围内所有不可用ui（用户界面）元素
-
-
checked
-
匹配指定范围内所有可用ui（用户界面）元素
-
-
-
-
-
-
css继承性、层叠性和特殊性
-
继承性
-
包含在内部的标签将具有外部标签的某些样式
-
网页开发时可以先把网页或模块中相同、可以继承的样式提取出来，然后在总包含框中定义
-
为防止继承性对网页设计破坏性影响，强制规定部分属性不具有继承性
-
border
-
padding
-
margin
-
背景属性
-
定位属性
-
布局属性
-
元素宽高属性
-
-
-
层叠性
-
css可以对同一个元素或者同一个网页应用多个样式或多个样式表
-
但是可能会发生冲突，就会覆盖
-
优先级
-
css样式的优先级
-
行内>内部>外部
-
被附加！important命令会拥有最高的优先级
-
属性：属性值！important；
-
-
-
css样式表优先级
-
作者定义的样式>用户设置的样式
-
浏览器默认样式>html默认样式
-
-
特殊性
-
不同类型的选择器优先级权重比不同
-
标签：1
-
伪元素或伪对象选择器：1
-
类选择器：10
-
属性选择器：10
-
id选择器：100
-
其他选择器：0
-
被继承的样式的权重值为0
-
-
将以上权值数为起点计算每个样式中选择器的总权值数
-
最后把所有权重值相加，得到当前选择器的总权重值，最后根据权重值来决定哪个样式优先级大
-
若权重值相同，就近原则，靠近元素（即位于最后）的样式具有最大优先权
-
-
例子
-
body div#box=1+1（标签）+100（id）
-
#box=100（id）
-
div.red=1+10
-
-
-
-
-
-
-
-
声明（分为属性和属性值）
-
字体样式font
-
字体类型
-
font-family：name（字体名称）；
-
可指定多种字体，按优先顺序排列，以逗号隔开
-
浏览器根据字体列表检索用户系统中的字库，按从左到右的顺序进行选用；若未找到则选用浏览器默认字体进行显示
-
-
字体名称包含空格应使用引号括起来
-
-
font-family：（字体序列名称）ncursive|fantasy|monospace|serif|sans-serif
-
不同位置
-
标题
-
无衬线字体
-
艺术字
-
手写体
-
-
网页正文
-
衬线字体
-
-
-
不同语言
-
英文或其他西文字体
-
5类通用字体（备用机制，指定的所有字体不可用时，在用户系统中找到一个类似字体进行替代显示）（对中文无效）
-
serif（衬线字体）
-
变宽，较明显地显示粗与细的笔画，在字体头部和尾部显示附带一些装饰细线
-
-
sans-serif（无衬线字体）
-
没有突变、交叉笔画或其他修饰线，变宽，字体粗细笔画变化不明显
-
-
cursive（草体）
-
斜字型、联笔或其他草体特征
-
-
fantasy（奇异字体）
-
装饰性，艺术字，用画写字
-
-
monospace（等宽字体）
-
宽度高度相等
-
-
-
-
中文网页多定义宋体类型
-
标题或特殊提示信息需要特殊字体时建议采用图像形式间接实现
-
原因
-
中文字体类型比较少，通用字体类型更少，字体表现力弱
-
艺术字体应用范围窄，很少被作为网页字体使用
-
-
-
-
-
建议设置用户设备中常用的字体：微软雅黑、宋体、黑体
-
-
字体大小
-
font-size：像素
-
xx-small（最小）
-
x-small（较小）
-
small（小）
-
medium（正常）
-
large（大）
-
x-large（较大）
-
xx-large（最大）
-
larger
-
smaller
-
length
-
百分数或浮点数字和单位标识符组成的长度值
-
百分比取值基于父对象中字体的尺寸
-
不可为负值
-
-
-
应用
-
网页宽度固定或栏目宽度固定的布局
-
使用像素
-
-
不固定 也不固定
-
使用百分比或em
-
-
em/%较好
-
利于客户端浏览器调整字体大小
-
使字体适应版面宽度的变化
-
注意
-
使用em为单位设置字体大小的时候，不要嵌套使用em单位定义字体大小
-
-
-
-
-
字体颜色
-
字体颜色
-
color：；
-
-
-
字体字形
-
字体粗细
-
font-weight：；
-
normal（默认 400）
-
bold（相当于取值700）
-
bolder（相对normal来说的）
-
lighter（相对normal）
-
数值
-
-
-
斜体
-
font-style：normal/italic/oblique
-
-
下划线
-
text-decoration：underline（下划线）/none(消掉超链接的下划线）/overline（上划线）/line-through（贯穿线）/blink（闪烁效果）
-
-
-
字体大小写
-
font-variant
-
值
-
normal
-
small-caps（小型大写字母字体）
-
-
注意
-
仅支持西文字体
-
若设置，但字体没有找到原始小型大写字体，浏览器会模拟一个
-
-
-
font-transform
-
none（默认值 无转换发生）
-
capitalize（单词首字母大写）
-
uppercase（所有字母大写）
-
lowercase（所有字母小写）
-
-
-
font复合属性：节约代码
-
行高
-
font-height
-
-
-
caption
-
icon
-
menu
-
message-box
-
small-caption
-
status-bar
-
-
font：font-style font-weight font-size/line-height font-family 不能随意换顺序
-
font属性至少应设置字体大小和字体类型，且应放在后面，否则无效
-
-
-
-
文本样式
-
缩进
-
text-indent：
-
2em（段首缩进2格）/百分比（但是英文字母不等宽）
-
允许为负值
-
悬垂缩进效果
-
子主题 1
-
text-indent：-2em； padding-left：2em；
-
-
-
-
-
-
阴影（标题之类的
-
text-shadow：000为左上角 x、y、z方向（像素），颜色 在xy方向上的偏移量，模糊半径
-
-
行间距
-
段落文本行与文本行之间的距离
-
line-height：1.5em（1.5倍行间距）/百分比
-
normal（默认值 1.2em）
-
当属性值小于一个字大小时，会发生上下行文本重叠现象
-
遵循字体越大行高越小的原则
-
行高一般以中线为准，减去字体大小值之后，平分为上下空隙，若值为奇数，则把多出的一个像素分给上边空隙或下边空隙
-
-
-
字间距、词间距
-
字距
-
letter-spacing：像素
-
-
词距
-
word-spacing：像素
-
以空格为基准进行调节
-
多个单词被连在一起，则被word-spacing视为一个单词
-
汉字被空格分隔，则分隔的多个汉字就被视为不同的单词，word-spacing就有效
-
-
-
-
水平方向对齐
-
text-align：left（默认值）/right/center/justify（两端对齐）
-
-
小技巧使单行文字垂直居中
-
使文字的行高等于盒子的高度，使文字在盒子里面垂直居中
-
-
垂直方向对齐
-
vertical-align：middle/auto（根据layout-flow属性值对齐对象内容/baseline（默认值）/sub（下标）/super（上标）/top（把元素的顶端与行中最高元素的顶端对齐）/text-top（把元素的顶端与父元素字体的顶端对齐）/middle（把此元素放在父元素的中部）/bottom（把元素的顶端与行中最低元素的顶孤单对齐）/text-bottom（把元素的底端与父元素字体的底端对齐）/length（浮点数子和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量）
-
用来指定行内元素或表格单元格元素的垂直对齐方式
-
对块级元素不起作用
-
-
-
-
图像
-
定义图像大小
-
width： px；
-
img标签的宽高属性定义图像大小局限
-
不符合结果和表现的分离原则
-
只能使用像素单位，在设计图像大小随包含框宽度而变化时不好使
-
-
仅为图像定义宽度或高度浏览器能自动调整纵横比，避免图像变形；同时定义宽度和高度，浏览器能够根据显式定义的宽和高来解析图像
-
-
-
定义图像边框
-
默认无边框
-
border-style边框样式
-
none无轮廓
-
hidden隐藏边框
-
solid实线
-
dashed虚线
-
dotted点线
-
double双边线
-
外单线、内单线间有一定宽度的距离，内单线外单线与间距之和必须等于border-weight之和
-
若border-weight值为3的倍数，三者平分宽度
-
余数为1，1分给外单线
-
余数为2，分别分给内外单线
-
-
-
groove3D凹槽轮廓
-
ridge3D凸槽轮廓
-
inset3D凹边轮廓
-
outset3D凸边轮廓
-
单独定义某边边框样式
-
border-top/right/bottom/left-style
-
-
-
border-color边框颜色
-
单独定义某边边框颜色
-
-
border-width边框粗细
-
单独定义某边边框粗细
-
-
-
定义图像不透明度（也可以定义其他的不透明度）
-
opacity：；
-
取值为0-1（完全不透明）
-
数值越低透明度越高
-
-
filter：alpha（opacity=0-100）
-
兼容
-
-
-
定义背景颜色不透明度
-
background：rgba( , , ,0-1)
-
可以把不透明度的0省掉，变成.3的形式
-
-
-
定义圆角图像
-
border-radius：；
-
none
-
<length>{1，4}/<length>{1,4}
-
包含两个参数值
-
第一个值表示圆角的水平半径
-
第二个值表示圆角的垂直半径
-
两参数值通过斜线分隔
-
仅包含一个值则第二个值与第一个值相同
-
若参数值包含0，则这个角就是矩形
-
-
border-radius：20px 30px 40px 50px/20px 30px 40px 50px
-
-
百分比
-
相对自身宽高
-
正方形百分比大于50%即得圆
-
有重叠部分，浏览器计算其重叠部分保证其不超过原宽度
-
-
长方形百分比大于50%即得椭圆
-
半圆
-
50% 50% 50% 50%/100% 100% 0% 0%
-
设置宽度和长度要保证50%*宽度=100%*高度
-
-
扇形
-
100% 0 0 100%/100% 100% 0 0
-
-
-
-
定义元素四个顶角圆角
-
border-top-right-radius
-
border-bottom-right-radius
-
border-top-left-radius
-
border-bottom-left-radius
-
-
-
-
定义阴影图像
-
box-shadow：；
-
none
-
2px 2px 2px 1px rgba（0，0，0，0.2）inset内阴影；
-
x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩散半径 阴影颜色 位置
-
-
可设置叠加阴影特效
-
box-shadow：px px px px color, px px px px color, px px px px color, px px px px color;
-
注意其顺序，最先写的阴影将显示在最顶层
-
-
-
盒子阴影不占用空间，不影响其他盒子布局
-
鼠标经过添加阴影效果
-
div：hover{box-shadow：；}
-
-
-
-
图文混排
-
设置浮动，添加margin
-
-
背景图像
-
定义背景图像
-
background-image：url（相对路径）；
-
GIF
-
可设计动画、透明背景，图像小巧
-
-
JPG
-
丰富颜色数，图像品质好
-
-
PNG
-
综合了GIF和JPG优点，缺点占用空间大
-
-
-
渐变背景
-
linear-gradient（position/angle，step）使用线性渐变创建背景图像
-
radial-gradient使用径向（放射性）渐变创建背景图像
-
repeating-linear-gradient使用重复的线性渐变创建背景图像
-
repeating-radial-gradient使用重复的径向（放射性）渐变创建背景图像
-
-
-
定义显示方式
-
background-repeat
-
repeat-x：背景图像在横向上平铺
-
repeat-y：背景图像在纵向上平铺
-
repeat：背景图像在横向或纵向平铺
-
no-repeat：背景图像不平铺
-
round：背景图像自动缩放直到适应且填满整个容器
-
space：以相同间距平铺且填满整个盒子或某个方向
-
-
-
定义显示位置
-
background-position
-
包含两个属性值
-
百分比
-
定位点以背景图像左上顶点为参考点根据百分比的不断变化而变化
-
定位距离根据百分比与包含框的宽和高进行计算得到一个动态值
-
-
像素
-
相对于左上角
-
-
混合单位
-
第一个一定是x，第二个一定是y
-
-
关键字
-
前后顺序颠倒无碍
-
若指定一个方位名词，另一个省略，第二值默认为居中对齐
-
left right bottom top center
-
-
默认值 0%0% left top
-
-
-
-
定义固定背景
-
背景图像是否能跟随网页内容整体上下滚动
-
background-attachment
-
scroll随对象内容滚动
-
fixed背景图像固定
-
-
-
-
定义大小
-
background-size
-
contain保证宽高比例
-
cover无缝覆盖整个背景，但图像有裁切
-
自定义
-
宽高值
-
百分比
-
auto
-
-
-
-
复合性写法background
-
没有固定顺序
-
用空格分隔
-
-
-
超链接
-
子主题 1
-
定义链接样式
-
link啥也没干的样式
-
hover：悬停时的样式
-
active为点击时的样式
-
visited：被访问后的样式
-
有先后顺序：link visited hover active否则可能会覆盖
-
-
定义下划线样式
-
a{text-decoration：none}
-
此时，应增加某些东西使用户轻松找到所有链接
-
加粗显示
-
变色
-
缩放
-
背景点缀
-
-
-
border-bottom定义下划线各种样式
-
-
定义立体样式
-
借助边框样式的变化（主要是颜色的深浅变化）模拟一种凹凸变化的立体效果
-
默认状态下显示灰色右边框线、灰色底边框线；当鼠标悬停时，清除右、底边框线，定义左、顶边框线 边框线颜色变化 结合网页背景色、超链接背景色和前景色（字体颜色）使超链接样式更富立体效果 背景色设置为相对深色效果，营造凸起效果；鼠标移过时定义浅色背景营造凹下效果
-
-
-
定义动态样式
-
借助大小和位置来产生一种动态感
-
font-size
-
会破坏页面布局，让页面产生抖动变化，不建议使用
-
-
导航按钮
-
鼠标移过下垂菜单，按钮自动向下伸展，并加粗增亮字体效果，营造一种链接下沉的效果
-
-
-
-
定义图像交换样式
-
利用相同大小但不同效果的背景图进行轮换，模拟复杂的鼠标动态效果
-
-
定义鼠标样式
-
默认状态下，鼠标经过超链接时显示为手形，使用cursor改变这种默认
-
-
自定义光标类型的图标路径cursor：url（‘ ’）
-
-
cursor属性值可以是一个序列，当用户端无法处理第一个图标时，他会尝试第二个，第三个等，若用户端无法处理第一个图标时，必须使用列表最后一个通用光标
-
-
-
设计图形化按钮样式
-
使用background-image属性来定义超链接的背景图
-
完全使用背景图来设计一个超链接样式应防止背景图的重复平铺，background-repeat：no-repeat
-
定义<a>标签以块状或者行内块状显示，以便为超链接定义高和宽。定义超链接的显示大小时，其宽和高最好与背景图像保持一致，也可以使用padding属性撑开<a>标签，以代替width和height属性声明
-
应使用text-indent属性隐藏超链接中的文本
-
若超链接的区域比背景图大，应使用background-position属性定位背景图像在超链接中的显示位置
-
-
使用图像也能设计出富有动态的超链接按钮
-
-
设计滑动门样式
-
背景图的可层叠性，并允许在彼此之上进行滑动
-
-
-
-
设计列表样式
-
设计列表结构
-
无序列表ul
-
有序列表ol
-
定义列表dl
-
-
定义列表样式
-
默认：有序或无序的项目符号，缩进格式
-
定义列表类型
-
list-style-type定义列表项目符号的类型
-
list-style-position定义列表项目符号的显示位置
-
outside把项目符号显示在列表项的文本行以外
-
inside把项目符号显示在列表项文本行以内
-
-
自定义项目符号
-
list-style-image自定义项目符号：url（）
-
-
同时定义项目符号类型和自定义项目符号时，自定义项目符号将覆盖默认的符号类型，但当list-style-type属性值为none或指定外部的图标文件不存在时，list-style-type属性值有效
-
用背景图模拟项目符号
-
隐藏列表结构的默认项目符号 list-style-type：none
-
为列表项定义背景图像，指定要显示的项目符号，利用背景图精确定位技术控制其显示位置。同时增加列表项左侧空白，避免背景图被列表文本遮盖
-
-
-
列表布局
-
默认：堆叠样式，并以缩进版式进行显示
-
列表堆叠
-
垂直布局形式显示
-
垂直布局基本形式
-
清除列表结构的默认样式（列表项目符号、缩进显示格式等）
-
定义列表项目的宽度和高度，定义其包含的<a>标签以块状显示，设置对应的宽度和高度
-
使用背景色、字体颜色和边框颜色等要素设计视觉变化效果，营造鼠标移过的动态效果
-
-
列表结构一般会包含超链接，<a>是行内显示标签，不便直接定义宽度和高度，设计习惯上建议<a>以块状（block）或行内块状（inline-block）显示
-
块状元素默认显示为100%的宽度，因此一般都应该定义列表栏目的外宽宽度，则个宽度可以根据页面的具体布局来设置
-
-
水平布局（控制列表结构在有限的行内显示）
-
方法一
-
用行内显示设计水平布局
-
利用padding定义列表项目的宽度和高度（width和height对行内元素无效）
-
利用背景色、边框样式和字体颜色设计超链接的动态效果
-
-
方法二
-
用浮动显示设计水平布局 定义列表项目浮动显示
-
问题
-
定义列表项<li>浮动显示，则列表框<ul><ol>会自动收缩，导致不能有效包含所有列表项目 此时，若为列表框定义样式，效果不能影响整个列表栏目
-
定义列表框浮动显示，或者通过其他方式强制列表框展开以包含列表项
-
-
列表项目浮动显示时，影响相邻模块定位关系，以及内部包含的超链接显示
-
-
-
-
案例
-
水平滑动菜单
-
垂直滑动菜单
-
tab面板菜单：有限空间包含更多分类信息
-
利用css隐藏或显示栏目的部分内容，实际tab面板所包含的全部内容已经下载到客户端浏览器中。一般tab面板仅显示一个tab菜单项，当用户点选相应的菜单项之后显示对应的内容
-
-
子主题 4
-
-
-
-
定义表格样式
-
表格标准样式
-
表格标签属性（html）
-
css
-
设计细线表格
-
border
-
-
定义单元格空隙
-
border-spacing分离单元格间距
-
只有一个值，单元格行列间距都为该值
-
两个值，第一个值表示行间距，第二个值表示列间距
-
该属性值不可为负值
-
-
-
隐藏空单元格
-
empty-cells
-
show
-
hide
-
-
-
-
表格特殊样式
-
表格布局特性
-
表格结构模型：表格、标题、行、行组、列、列组、单元格
-
display表格对象显示模型
-
子主题 1
-
-
定义列组和行组样式
-
若控制单行样式，使用tr即可；控制多行样式，使用tbody、tfoot、thead或colgroup
-
在添加tbody标签时，应先添加thead标签，否则浏览器会把所有数据行都归为tbody行组中
-
-
定义表格标题样式
-
caption-side定义标题框中文本显示位置
-
top
-
bottom
-
left
-
right
-
水平对齐标题text-align
-
垂直对齐vertical-align
-
top/bottom/middle
-
-
-
-
合并单元格（标签属性）
-
colspan/rowspan
-
-
表格样式层叠顺序
-
同时为table tr td定义背景色、边框、字体属性等样式时，容易发生样式重叠问题
-
背景样式层叠顺序
-
td>tr>table
-
-
边框样式层叠顺序
-
若定义了border-style：hidden；其优先级高于任何其他相冲突的边框
-
若定义了border-style：none；其优先级最低
-
更宽的边框将覆盖相对较窄的边框。若border-width属性值相同，样式优先顺序根据边框样式类型排序：double、solid、dashed、dotted、ridge、outset、groove、inset
-
若边框样式只在颜色上又区别，样式优先顺序根据元素类型排序：td、tr、thead（tbody、tfoot）、col、colgroup、table
-
-
-
-
子主题 7
-
-
-
-
定义表单样式
-
文本框
-
获得焦点后使表单对象发生较大变化
-
边框、背景、补白、大小、输入字体样式、css特效（圆角、阴影等）
-
-
单选按钮和复选框
-
背景图代替默认单选按钮样式 设计个性化单选按钮效果
-
个性自定义的单选按钮首先需要两种图片状态：选中、未选中，对其添加不同的class类实现背景图像的改变
-
通过label标签的for属性和单选按钮id属性值实现内容与单选按钮的关联
-
子主题 3
-
-
-
下拉菜单和列表框
-
-
-
-
格式
-
选择器{属性名：属性值；}
-
-
注意
-
属性分行的写法可读性会更好
-
-
css的使用形式
-
内联样式
-
在标签的style中定义样式
-
-
内部样式表
-
直接在head标签内插入style
-
-
外部样式表
-
1.先建立外部样式表文件，然后再head内使用link标签链接 <link href=" " rel="stylesheet" type="text/css">
-
可以在link元素中添加title属性，通过title值来选择所要应用的样式表文件
-
2.@import url（）
-
好处：整个网站都可以使用
-
-
三种样式优先级
-
内联>内部>外部（范围越小的级别越高）
-
哪个设的更细谁好使（一个是通用的一个是专用的）
-
-
两者格式一样：后面设置的覆盖前面设的
-
-
取舍三种使用方式
-
用尽量少的样式控制尽量多的标签
-
尽可能使用外部样式表
-
尽量避免使用内部样式表
-
-
-
-
-
布局
-
html标签元素分类
-
块状元素
-
作用
-
嵌套其他块状、行内等不同类型的元素，负责网页结构的支撑与构建
-
-
常见属性
-
<div><p><h1>-<h6><ul><li><ol><dl dt dd><form fieldset legend><table><hr>
-
-
特点
-
每个块级元素都从新的一行开始，并且其后的元素也另起一行
-
元素的高度、宽度、行高以及上下空白边都可以设置
-
元素宽度在不设置的情况下，是它本身父容器的100%，除非设置一个宽度
-
-
适合构建文档框架
-
设置
-
display：block；
-
-
-
内联元素（行内元素）
-
常见属性
-
<a><span><br><i><em><strong><label>
-
-
特点
-
和其他元素都在一行上
-
元素的高度、宽度及上下空白边不可设置
-
元素的宽度是它包含的文字或图片的宽度，不可更改
-
-
适合包裹多个行内元素，为行内信息定制样式
-
设置
-
display：inline；
-
-
不建议在行内嵌套块状，破坏结构的逻辑关系
-
-
内联块状
-
常见属性
-
<img><input>
-
-
特点
-
同时具备内联元素和块级元素的特点
-
和其他元素都在一行上
-
元素的高度、宽度、行高及上下空白边都可设置
-
-
设置
-
display：inline-block；
-
-
-
display
-
（display 改变任意元素显示特性）
-
值
-
none
-
隐藏对象，不为被隐藏的对象保留物理空间
-
-
inline
-
block
-
list-item
-
指定对象为列表项目
-
-
table
-
inline-table
-
table-caption
-
table-cell
-
table-row
-
table-row-group
-
table-column
-
table-column-group
-
table-footer-group
-
table-header-group
-
run-in
-
根据上下文决定对象是内联对象还是块级对象
-
-
box
-
将对象作为弹性伸缩盒
-
老版
-
-
-
inline-box
-
将对象作为内联块级弹性伸缩盒显示
-
-
flexbox
-
过渡版
-
-
inline-flexbox
-
flex
-
弹性伸缩盒
-
新版
-
-
优劣
-
传统布局兼容性好
-
flex布局操作方便
-
-
原理
-
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
-
适用
-
任何容器
-
-
注意
-
设flex之后，子元素的float、clear、vertical-align都将失效
-
-
采用flex布局的元素（flex容器），他的所有子元素自动成为容器成员（flex项目）
-
子容器可横向可竖向
-
-
父项常见属性
-
主轴侧轴
-
默认主轴方向为x轴方向，水平向右；侧轴方向为y轴方向，水平向下
-
主轴侧轴会变化，就看flex-direction设置谁为主轴，剩下的就是侧轴，我们的子元素跟着主轴排列
-
-
flex-direction（设置主轴方向——项目排列方向）
-
row（默认值 从左到右）
-
row-reverse（从右到左）
-
column（从上到下）
-
column-reverse（从下到上）
-
-
justify-content（设置主轴上的子元素排列方式——项目在主轴上的对齐方式）确定好主轴
-
flex-start（默认值 从头部开始，若主轴是x轴，则从左到右）
-
flex-end（从尾部开始
-
center（在主轴居中对齐）
-
space-around（平分剩余空间）
-
space-between（先两边贴边，再平分剩余空间）
-
-
align-items（设置侧轴上的子元素排列方式 单行）
-
flex-start（默认值 从上到下）
-
flex-end（从下到上）
-
center（挤在一起居中——垂直居中）
-
stretch（拉伸）
-
子盒子不要给高度
-
拉伸的跟父盒子一样高
-
-
-
align-content（设置侧轴上的子元素的排列方式 只能用于子项中出现换行的情况）
-
flex-start（默认值 从头部开始，若侧轴是x轴，则从左到右）
-
flex-end（从尾部开始
-
center（在侧轴居中对齐）
-
space-around（平分剩余空间）
-
space-between（先两边贴边，再平分剩余空间）
-
stretch（设置子项元素高度平分父元素高度）
-
-
flex-wrap（设置子元素是否换行）
-
flex布局中默认的子元素是不换行的——nowrap，如果装不开，会缩小子元素的宽度
-
wrap（换行）
-
-
flex-flow（复合属性，相当于同时设置了flex-direction和flex-wrap）
-
flex-flow：column wrap；
-
-
-
子项常见属性
-
flex
-
flex定义子项目分配剩余空间，用flex来表示占多少份 默认值0，1吃一份
-
剩余空间看盒子是否有宽度
-
-
align-self
-
控制子项自己在侧轴的排列方式
-
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items，默认值为auto，表示继承父元素的align-items属性，若无父元素，则等同于stretch
-
-
order：数值
-
定义项目的排列顺序
-
数值越小，排列越靠前，默认值为0
-
注意
-
和z-index不一样 叠罗汉
-
-
-
-
-
inline-flex
-
-
-
-
盒模型
-
定义
-
html网页的每一个标签都可以当成一个盒子，占据一定的空间
-
css盒子具有弹性，里面的盒子大过盒子本身，最多能把盒子撑大，不会损坏盒子
-
-
构成
-
内容content
-
通常指文字、图片等信息或元素，也可以是小盒子
-
宽度高度用css属性width和height
-
背景：background
-
实际上背景可以延伸到padding区域，有些浏览器中背景可延伸到边框。
-
-
-
填充padding
-
定义
-
盒模型内容与边框之间所可以设置的距离
-
-
属性（与margin一样）
-
padding-left/right/top/bottom
-
可以分开写
-
也可以合并写
-
如果四个方向填充一样padding：10px
-
上下填充一样，左右填充一样padding：10px（上下） 20px（左右）
-
上下不相同，左右相同padding：10px 20px 30px（上 左右 下）
-
padding：5px 10px 15px 20px（上 右 下 左）若某个边没有定义大小可以使用auto替代
-
-
-
-
会撑开盒子（若未设置width height，不会撑开）
-
子元素要不超过父元素就可以不需要设置width height
-
-
padding不会重叠
-
没有定义边框的情况下，用padding代替margin来定义盒元素之间间距是个不错选择
-
-
行内元素定义高度宽度无效，可通过padding来定义行内元素的宽度高度，以便能够撑开行内元素
-
注意
-
四个方向都需要填充时，最好按顺时针方向书写-上右下左
-
功能上，padding不会影响元素大小，但是由于在布局中padding同样占据空间，所以在布局时应考虑padding对于布局的影响
-
没有明确定义盒元素的宽度和高度时使用padding来调整盒元素的显示位置比margin更加可靠安全
-
-
-
边框border
-
定义
-
包围内容及填充的线，边框就是盒子本身，划分不同盒元素的分割线
-
-
属性
-
边框样式
-
粗细
-
border-width
-
值
-
thin（1-2像素）
-
medium（2-3像素）默认值
-
thick（3-5像素）
-
px
-
-
-
-
样式
-
border-style
-
none无轮廓
-
hidden隐藏边框
-
solid实线
-
dashed虚线
-
dotted点线
-
double双边线
-
外单线、内单线间有一定宽度的距离，内单线外单线与间距之和必须等于border-weight之和
-
若border-weight值为3的倍数，三者平分宽度
-
余数为1，1分给外单线
-
余数为2，分别分给内外单线
-
-
-
groove3D凹槽轮廓
-
ridge3D凸槽轮廓
-
inset3D凹边轮廓
-
outset3D凸边轮廓
-
-
-
颜色
-
border-color
-
十六进制别忘加#
-
默认黑色
-
-
-
-
边框方向
-
border-left/right/top/bottom
-
-
-
注意
-
边框占据空间
-
流动布局中，如果为包含框定义100%的宽度，而又定义了两侧边框宽度，结果就会导致浏览器窗口在水平方向出现滚动条
-
-
-
空白边margin
-
定义
-
盒元素与其他元素之间的距离
-
-
属性
-
margin-left/right/top/bottom
-
可以分开写
-
也可以合并写
-
如果四个方向填充一样margin：10px
-
上下填充一样，左右填充一样margin：10px（上下） 20px（左右）
-
上下不相同，左右相同margin：10px 20px 30px（上 左右 下）
-
margin：5px 10px 15px 20px（上 右 下 左）若某个边没有定义大小可以使用auto替代
-
margin可以取负值，强迫元素偏移原来位置，实现相对定位功能
-
-
-
-
margin重叠
-
不同显示特性的盒元素重叠效果不同
-
默认情况下，流动的块状元素存在上下margin重叠现象，以最大margin代替最小margin作为上下两盒元素的距离；；
-
相邻元素的左右margin一般不会发生重叠，而对于行内元素上下margin是不会产生任何效果
-
对于浮动元素来说，一般相邻浮动盒元素的margin不会重叠
-
-
html,body{margin:0px}
-
块级盒子水平居中
-
有width
-
左右设置为auto
-
-
行内元素 行内块元素水平居中
-
给其父元素添加text-align：center
-
-
外边距合并
-
上下两个相邻块元素相遇，若上面的元素有外下边距，下面的元素有上外边距，则它们的垂直间距不是上下外边距之和，而是取两值中较大者的现象
-
解决：尽量只给一个盒子添加margin值
-
-
嵌套块元素垂直外边距塌陷
-
对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值（不是子元素在父元素内向下走，而是父元素带着子元素整体下移
-
解决
-
为父元素定义上边框
-
border：1px solid transparent（透明边框）
-
-
为父元素定义上内边距padding
-
为父元素添加overflow：hidden；
-
浮动、固定、绝对定位
-
-
-
清除内外边距
-
网页元素默认自带的内外边距，且不同浏览器还不一致
-
*{margin：0； padding：0；}
-
-
-
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以
-
-
-
盒子的实际宽/高度
-
对于一个盒模型来说，他的实际宽度或高度等于内容区域的宽和高加上二倍的padding+border+margin margin-left+border-left+padding-left+padding-right+border-right+margin-right
-
高度同理
-
-
网页布局就是大大小小盒子在页面中的定位
-
网页元素摆放的两种可能
-
元素相邻为伴，相互通过margin产生影响
-
元素之间相互包含，此时相互作用不仅包括margin还有padding
-
元素display值改变，相互间影响更加复杂
-
-
注意
-
设置块级元素的width可以防止它从左到右撑满整个容器，设置左右空白边为0 auto来使其水平居中，元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右空白边
-
父容器得有固定高度，子才能高度设置百分比
-
不同分辨率浏览器，使网页始终全面呈现？？
-
html，body{magin：0px；width：100%；height：100%}中间部分{height：calc（100%+空格+-+空格+定死的高度）}
-
-
-
-
文档流
-
定义
-
网页默认盒模型布局模式
-
-
特点
-
块级元素在所处的包含元素中竖直方向一个接一个的放置 因为在默认状态下，块级元素的宽度都是100%，实际上块级元素都会以行的形式占据位置
-
内联元素会在所处的包含元素中一个接一个水平放置
-
-
-
网页布局（盒模型在页面的定位）基本方法
-
float浮动布局（灵活）
-
作用
-
同行并列显示效果，可用于设计多栏布局效果
-
块级元素都是独占一行，如果想让两个块级元素并排显示，设置元素浮动（转换为行内块元素，他们之间会有很大的空白缝隙，难以控制
-
-
纵向用标准流，横向找浮动
-
-
值
-
none默认值
-
left设置对象浮在左边
-
right设置对象浮在右边
-
-
注意
-
当多个元素并列浮动时，浮动元素的位置是不固定的，会根据父元素的宽度灵活调整，为页面布局带来隐患
-
定义父元素的宽度为固定值，避免父元素的宽度随窗口大小而改变（所设置父元素的宽度要大于浮动元素宽度和，否则就换行）、
-
-
浮动规则
-
浮动元素位置
-
直到它的外边缘碰到包含块元素或另一个浮动原素的边缘为止
-
由于浮动元素脱离了文档流，原文档流中其他元素的布局就像浮动元素不存在一样，占据浮动元素位置 有时会产生覆盖消失的情况（只有浮动元素能覆盖文档流元素，文档流元素无法覆盖浮动元素）浮动元素只会影响其后面的标准流，不会影响其前面的（前面的文档流自己已经独占一行）一个子元素浮动，则与他同级元素浮动
-
此时可以对后面的元素用clear，使其临着浮动元素的一边消除浮动
-
-
浮动元素具有行内块元素的特性
-
浮动元素一行内显示，元素顶部对齐
-
父元素宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
-
-
-
-
浮动元素有自动收缩空间的功能
-
不定义浮动元素大小，每个盒子就是仅能包含对象的大小 若浮动元素内部没有包含内容，元素会收缩成一点或竖线
-
块状元素没有该功能，不设置，宽度即为100%
-
-
元素浮动显示之后，会改变显示顺序和位置，但不会脱离文档流，其前面对象的大小和位置发生变化，也会影响浮动元素的显示位置
-
浮动元素高度不同，当他们向下移动时可能被其他浮动元素卡住
-
注意
-
浮动元素必须尽量往高放
-
左/右浮动元素必须尽量往左/右放
-
更高的位置比更左/右的位置优先
-
-
-
浮动元素搭配标准流父级使用
-
为了约束浮动元素位置，一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置（使浮动元素以父元素为准浮动）
-
-
-
clear强迫浮动元素换行显示
-
定义了不允许有浮动的边
-
清除浮动元素的影响
-
若父元素本身有高度，不需要清除浮动
-
清除浮动后，父元素会根据浮动的子盒子自动检测高度，父元素有了高度，就不会影响下面的标准流了
-
-
清除浮动策略
-
闭合浮动，只让浮动在父盒子内部影响，不影响父元素外面的其他盒子
-
-
值
-
none两边都可以有
-
left左边不能有
-
right右边不能有
-
both两边都不能有
-
-
注意
-
定义后面盒子的clear对前面盒子有用，但是定义前面盒子的clear对后面盒子没用，因为前面盒子在解析时后面的盒子还没有出现，不会收到clear影响
-
clear不仅影响浮动元素，还对块元素有影响。
-
-
方法
-
额外标签法
-
浮动元素末尾添加一个空标签（必需块级元素，必需换行），然后设置空标签clear：both；
-
-
给父元素添加overflow属性
-
hidden、auto、scroll
-
缺点：无法显示溢出的部分（overflow溢出隐藏）
-
-
给父元素添加after伪类
-
.clearfix:after{ content:" "; display:block; height:0; clear:both; visibiblity:hidden;} .clearfix{ /*IE6、7专有*/ *zoom:1;}
-
-
给父元素添加双伪元素
-
.clearfix:before,.clearfix:after{content: "";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom:1;}
-
-
-
-
position定位（精确）
-
应用
-
某个元素自由地在一个盒子内移动位置或固定到屏幕中的某个位置，并且压住其他盒子
-
-
定位组成
-
定位模式+边偏移
-
-
定位包含框
-
定义所含绝对定位要素的坐标参考对象
-
被定义相对定位、绝对定位或固定定位的元素都有定位包含框的功能额
-
若无明确指定定位包含框，则将body作为定位包含框，即以窗口四边为定位参考系
-
-
static无特殊定位，遵循文档流（默认值）
-
relative相对定位（相对它原来的位置）
-
定义
-
对象遵循正常文档流，但依据top、right、bottom、left等属性在正常文档流的偏移位置
-
-
设置
-
position：relative；left：像素；top:像素；
-
-
属性
-
left/right/top/bottom
-
-
注意
-
使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此相对定位的元素会导致它覆盖其他元素。没有脱离文档流
-
相对定位更多被用来当作定位包含框，因为他不会脱离文档流，且使用相对定位可以方便地微调文档流中对象的位置偏差
-
-
-
absolute绝对定位（相对于其最近的一个具有定位属性的父包含块进行相对定位，若不存在该包含块，则相对于body元素即相对于浏览器窗口）
-
定义
-
脱离正常文档流，使用top、right、bottom、left进行绝对定位，其层叠顺序通过z-index属性定义 元素不再占据原来文档流的空间，原文档流流中其它元素的布局就像绝对定位的元素不存在一样
-
-
设置
-
position：absolute；left：像素；right：像素；
-
-
属性
-
left/right/top/bottom
-
-
注意
-
元素绝对定位后将变成一个块级元素，而不论原来它是何种类型的元素
-
不管浏览器如何横向扩展元素始终居中
-
设置一个具有定位属性的父包含块，再设置绝对定位，使元素始终在父包含块的固定位置
-
{width：；height：；margin：0 auto；border： ；position：relative；}{width：；height：；position：absolute；left：；top：；border：；}
-
-
-
若父包含块不具有定位属性，则相对于浏览器窗口定位
-
-
盒子居中
-
加了绝对定位，不能通过margin：0 auto来设置水平居中
-
水平
-
left：50%，走父容器宽度的一半 margin-left：自己盒子宽度的一半
-
-
垂直
-
top：50% margin-top：自己盒子宽度的一半
-
-
-
-
fixed固定定位（相对浏览器窗口（视图）本身）
-
定义
-
脱离正常文本流，使用t、r、b、l等属性以窗口为参考点进行定位，当出现滚动条，对象不会随之滚动
-
-
设置
-
position：fixed；left：像素；right：像素；
-
-
属性
-
left/right/top/bottom
-
-
注意
-
由于窗口本身是固定的，它不会随浏览器的滚动条滚动而变化
-
其他元素会占据其位置
-
-
固定版心右侧显示
-
让固定left：50%，，使其到版心的中间
-
让固定元素margin-left：版心宽度一半，使其贴着版面
-
-
-
sticky粘性定位（相对定位、固定定位结合）参照浏览器窗口
-
占有原先位置
-
必需添加top、left、right、bottom其中一个才有效
-
当粘性定位元素距浏览器窗口top、left、right、bottom为所设值时，粘性定位元素不在相对浏览器窗口移动
-
-
-
坐标系统属性
-
top/right/bottom/left
-
设置对象与其最近一个定位包含框上、右、下、左侧相关位置
-
-
值
-
长度或百分比
-
可正可负，取负值，向相反方向偏移
-
默认值auto
-
-
-
position中，left、right、top、bottom同时被定义，left优于right，top优于bottom。如果元素没有被定义宽度和高度，元素将会被拉伸以适应左右或上下同时定位
-
-
设置层叠顺序
-
不论是相对、固定还是绝对定位，只要坐标相同都可能存在元素重叠现象
-
默认情况下，相同类型的定位元素，排列在后面的定位元素会覆盖前面的定位元素
-
z-index
-
改变定位元素的覆盖顺序，取值为整数，数值大的在上面 若z-index属性值为负，则将隐藏在文档流的下面 如果父元素没有设置z-index，子元素设为-1：子元素会被父元素覆盖； 如果父元素设置z-index：1，子元素设为-1：子元素会被父元素中的其他子元素覆盖，即子元素的层级低于其他子元素的层级
-
-
-
定位特殊特性
-
行内元素添加绝对或固定定位，可以直接设置高度或宽度
-
块级元素添加绝对或固定定位，若不给宽度或高度，默认是内容的大小
-
脱离文档流的盒子不会触发外边距塌陷
-
浮动元素不会压住文档流中的文字或图片，会压住盒子
-
-
-
网页布局基本技巧
-
设计网页居中显示
-
text-align（块级元素内文本）、margin：0 auto属性、给定要居中的块级元素的宽度且宽度不能为100%
-
浮动页面居中显示
-
若为块级元素设置浮动显示则居中样式失去效果
-
在该块级元素外再裹一层包含框，设计外套流动（正常文档流）显示，内套浮动显示
-
-
-
定位页面居中显示
-
外套/框相对定位，内套绝对定位
-
-
-
设计定位版三栏页面布局
-
position有自身优势（精确）和缺陷（无法适应网页内容的变化而自动调整自身区域大小）适当position能轻松应对相对复杂布局问题
-
标题、版权信息行流动显示；中间行包含块（relative），其子元素用绝对定位设置：次信息栏、功能服务栏定位到页面的左右两侧；主信息栏显示在中间（流动显示） 居中、背景颜色
-
使用position调换左右栏位置简单，仅需调整栏目的定位方向和宽度 但是对于浮动就难，改一影响全部
-
注意
-
当绝对定位的栏目高度延伸时，由于其已脱离文档流，不会对文档流中相邻结构块产生影响，出现图中绝对定位栏目覆盖其他栏目的现象
-
1.被动预防：预知绝对定位栏目的高度情况（盖度固定），事先固定住绝对定位栏目的高度
-
2.JavaScript动态调整绝对定位元素的高度
-
-
-
-
设计多栏高度自适应页面
-
伪列布局法
-
设计一个背景图像，其长度与页面宽度保持一致，利用背景图像来模拟栏目的背景
-
给包含框定义该背景图像
-
删除背景色（避免栏目背景色的干扰）
-
注意
-
确保页面宽度固定，不能为弹性页面（百分比宽度）不能为auto
-
-
-
使用padding和margin重叠法
-
方法
-
将三列栏目的底部padding设为无穷大，使有限的窗口内都能显示栏目的背景色
-
将底部margin设为负无穷大，覆盖padding过大产生的空白区域
-
中间行包含框中定义overflow：hidden；剪切掉多出的区域？？
-
-
注意
-
只能根据中间栏目（主信息栏 流动显示）的高度来进行裁剪 overflow：hidden；对于流动或浮动元素有效，对于脱离文档流的绝对定位元素无法进行裁剪，导致如果绝对定位的栏目高度高出中间流动布局栏目的高度使就会被裁剪掉
-
应用简单的浮动法进行设计
-
主信息栏左浮动，次要信息列左浮动，服务功能区右浮动
-
三列仍保持padding无穷大，margin无穷小
-
-
-
-
-
-
设计负margin页面
-
把主次信息区域换位置
-
传统
-
主次信息列嵌套在一个包含框，通过浮动实现
-
-
负margin
-
为主要信息列定义20%宽度的右margin（用来放次要信息）
-
让次要信息列左margin为负值，强制其移动75%的距离
-
-
-
作用
-
自由移动一个栏目到某个位置，从而改变浮动布局和流动布局存在的受限于结构的弊端，间接具备了定位布局的一些特性，但是没有定位布局那么精确
-
-
-
-
注意
-
尽量减少硬编码（写死的）高度和宽度
-
-
-
css单位
-
颜色值
-
颜色名
-
不建议大规模使用（有些颜色名不被浏览器解析，或不同浏览器对颜色的解释差异）
-
-
百分比
-
百分比都为100%是白色
-
都为0是黑色
-
百分比相等为灰色
-
哪个百分比大偏向哪个原色
-
-
数字
-
范围0到255
-
255，255，255 白色
-
0，0，0 黑色
-
相等 灰色
-
哪个数值大偏向哪个原色
-
-
十六进制数值
-
#加十六进制
-
#ffffff 白色
-
#000000 黑色
-
一个十六进制颜色值等于三组这样的十六进制的值
-
-
-
绝对单位
-
英尺（in）
-
厘米（cm）
-
毫米（mm）
-
磅（pt）
-
pica（pc）
-
-
相对单位
-
其所设置的对象受屏幕分辨率、可视区域、浏览器设置以及相关元素的大小等因素影响
-
em
-
元素的字体高度
-
根据font-size确定单位大小（一个em等于font-size的属性值）
-
若父元素也为em，则依次向上级元素寻找参考的font-size属性值；若都未定义，则根据浏览器默认字体进行换算，默认字体一般为16px
-
-
ex
-
元素的字体高度
-
根据所使用字体中小写字母x的高度作为参考
-
实际应用中，浏览器通过将em的值除以2得到ex的值
-
小写x的值是大写x的一半
-
字体差异会导致ex取值差异
-
-
-
px
-
根据屏幕像素点确定
-
不同显示分辨率导致px取值差异
-
-
注意
-
建议多使用em
-
在某一类型的单位上使用统一的单位
-
-
-
百分比
-
相对单位值
-
总是通过另一个值来计算，一般参考父对象中相同属性的值
-
可取负值，但在使用中受限制
-
-
url
-
绝对地址
-
相对地址
-
-
-
实战
-
设置导航菜单
-
list-style：none
-
清除列表框默认样式（项目符号，缩进）
-
-
background：repeat-x
-
横向铺满
-
-
-
登录界面
-
-
web——css
