长度单位、颜色表示方法、css三大特性
常用其他css属性
vertical-align
图片下间隙问题
-
方法1（推荐）
img{vertical-align:middle;}不改变图片本身内联块的特性
-
方法2
img{display:block}将图片显示为块（改变了图片本身内联块的特点）
-
方法3
img父级{font-size:0}隐患：由于字号可继承，需要重新定义其它后代元素的字号
图片水平居中
1.作为行内块
img父级{text-align:center;}
2.作为块
img{display:block;margin-left:auto;margin-right:auto;}
显示隐藏元素
display
- none隐藏
- block 显示
- 隐藏以后不占位
visibility:
- hidden隐藏
- visible显示
- 隐藏以后仍然占位
透明度
-
rgba(r,g,b,a)
-
alpha 透明度 取值0-1
- 0全透明
- 1全不透明
- 0-1之间半透明
-
主要用于处理颜色透明（边框、背景、文字）
-
兼容：ie9及以上
-
-
IE透明
filter:alpha(opacity=50);-
取值0-100
-
兼容性：仅支持IE6、7、8、9，在IE10版本被废除
-
默认是元素和内容都透明，通过子元素相对定位实现内容不透明
.box{ width:200px; height:200px; background-color:red; filter:alpha(opacity=50); font-size:40px; font-weight: bold; color:#fff; } .box span{ position: relative; }
-
-
opacity
- 取值：0-1
- 0全透明
- 1全不透明
- 0-1之间半透明
- 整个元素的透明（当前元素及内容）
- 兼容：ie9及以上
- 取值：0-1
圆角边框
border-radius
取值：1-4个【空格】隔开
-
1个值 四个角的水平和垂直半径
-
2个值 左上和右下 右上和左下 的 水平和垂直半径
-
3个值 左上 右上和左下 右下 的 水平和垂直半径
-
4个值 左上 右上 右下 左下（顺时针） 的 水平和垂直半径
以【/】隔开
-
水平半径/垂直半径
-
1-4/1-4 规则同上
单个角（先上下后左右）
- border-top-left-radius 上左角
- 1-2个值 【空格】隔开
- 1个值 水平和垂直半径
- 2个值 分别表示水平半径、垂直半径
取值：
- px
- 百分比（分别相对于横向、纵向盒子大小计算）
投影
box-shadow
-
取值：
- 水平方向偏移量 垂直方向偏移量 阴影模糊值（可选值） 阴影的颜色（可选值）;
- 【空格】隔开
- 偏移量（正值 向右向下移动投影，负值相反）
- 阴影的颜色默认黑色
-
内阴影
- inset
-
阴影增强
- 水平方向偏移量 垂直方向偏移量 阴影模糊值（可选值） 【阴影增强值】 阴影的颜色（可选值）;
长度单位
px像素
- 固定长度值
em
- 相对单位
- 相对于字号进行计算的
- 默认1em = 16px
百分比
- width,height
- 分别相对于父元素的宽、高计算
- padding,margin
- 四个方向都是相对于父元素的width进行计算
- font-size
- 相对于父元素的font-size计算
- line-height
- 相对于当前元素的font-size计算
- text-indent
- 相对于容器的宽度计算
- left,right,top,bottom
- 分别相对于padding盒横向、纵向大小计算
- border-radius
- 分别相对于盒子的水平、垂直方向的大小计算
rem
-
相对单位，相对于html的font-size计算
-
默认1rem = 16px
html{ font-size:100px; } .box{ width:1rem; height:1rem; background-color: red; font-size:0 .5rem; }
颜色表示方法
-
颜色名称：red blue yellow…
-
十六进制：#rrggbb
- #000000 简写 #000
- #ffccbb 简写 #fcb
-
RGB(R,G,B)
- rgb(255,0,0)
-
RGBA(R,G,B,A)
-
rgba(255,0,0,0.5)
-
alpha 取值 0-1
css三大特性
层叠性
所谓层叠性是指多种CSS样式的叠加
选择器或样式规则发生作用范围的重合，需要通过层叠排序决定文档最终表现
层叠性核心：继承、选择器特殊性、样式声明的特殊性
- 样式冲突
- 显式声明样式 （作者声明） > 浏览器默认样式
- 重要样式（加了！important）
- 普通样式 （特殊性高优先于特殊性低的）
- 同级由顺序决定（定义顺序靠后的起决定作用）
- 样式不冲突
- css样式叠加（共同作用于同一个元素）
继承性
父元素向后代元素传递属性的机制
可继承的属性（目前）
- font-family ,font-size,font-style,font-weight,font
- color,text-indent,text-align
- list-style 列表样式
- cursor 鼠标样式
不可继承的属性（目前）
- text-decoration（具有穿透性）
- 盒模型、浮动、定位等布局属性
作用：合理的利用继承，可以达到精简代码的效果
优先级
基础选择器的优先级
id（0，1，0，0） > 类=伪类=属性选择器（0，0，1，0） > 元素名称=伪元素（0，0，0，1） > 通配符* （0，0，0，0）
特殊性描述，由4部分组成
复合选择器的优先级
-
由组成它的不同部分（组件）的特殊性决定( 同级比较的是个数，不同级别不可跨越 )
行间样式 id 类 元素
0 0 0 0
行间样式（1，0，0，0）
- 行间样式高于id
！important（vip）
-
作用：提升优先级
-
高于行间样式
-
语法
background-color:pink!important;
三种引入方式
- 行间> 内部、外部
- 内部和外部
- 权值相同时，由靠后的样式决定（就近原则）
- 权值不同，由选择器的优先级（特殊性）决定
整站布局相关
文件管理
-
小U
-
css
-
images
-
js
-
index.html (首页)
-
list.html（列表页）
-
…
-
文件命名
- 文件夹
- 文件（html,css,js,图片）
- 见词知义
- 通常小写（英文字母和数字结合,可以包含下划线，中划线）
- 一般不以数字开头
- 多个词使用划线或中划线连接 （header_bg, nav_icon）
HTML 书写规范
-
文档声明与字符集
- HTML5文档
- 字符集utf-8
-
通常小写
-
语义化HTML
-
嵌套规则
- 固定嵌套(dl,dt,dd,ul,ol,li,table>tr>td)
- 块包含块和行内
- 行内通常包含文字、图片和其它行内元素
- h,p,dt通常包含文字、图片和其它行内元素
- a标签不要包含其它交互元素（a,input,button…）
-
结构表现相分离
- 尽可能少用行间样式、行间属性
-
合理的代码注释
- 大块
- 功能模块（二级，弹出框）
-
语法
- 标签闭合
- 属性闭合 style=""
- id属性禁止重复
CSS书写规范
-
字符集
- utf-8
-
书写代码前
- 确定有效区（版心）
- 常见：960，1000，1190，1200
- 样式规划（沟通需求）
- 确定有效区（版心）
-
书写代码
-
类名，id名命名
- 见词知义
- 不要以数字开头
- 不要包含除下划线，中划线以外特殊字符
-
书写顺序
- 特殊属性——定位，浮动、display
- 盒模型——宽、高，padding,margin,border
- 修饰性— 背景、鼠标样式
- 文本属性
- 字体属性
-
合理添加注释
-
选择器优化
- 唯一性的模块，选择用id
- 选择器嵌套（尽量减少层级–4）
- 减少全局样式（*通配符，元素名称选择器）
-
注意事项
-
保证可编缉性
- 特殊字体（切图——沟通确定）
-
是否兼容ie9以下
-
页面布局时能用正常文档流布局的就不要使用定位布局。
-
避免使用表格处理常规布局，使用它处理批量展示的数据做局部布局
-
链接是否新窗口打开属性
推荐阅读