前端知识点汇总
1.结构样式
- width 宽度
- height 高度
- background 背景
- border 边框
- padding 内边距
- margin 外边距
2.文本设置
- font-size 文字大小（一般均为偶数）
- font-family 字体（中文默认宋体）
- color 文字颜色（英文、rgb、十六位进制色彩值）
- line-height 行高
- text-align 文本对齐方式
- text-indent 首行缩进（em缩进字符）
- font-weight 文字着重
- font-style 文字倾斜
- text-decoration 文本修饰
- letter-spacing 字母间距
- word-spacing 单词间距（以空格为解析单位）
3.复合属性
- background
- border
- padding
- margin
- font：font-style | font-weight | font-size/line-height | font-family
4.常见样式
width 宽度 height 高度
background 背景 border 边框
padding 内边距 margin 外边距
font-size 文字大小 font-family 字体
color 文字颜色 line-height 行高
text-align 文本对齐方式 text-indent 首行缩进
font-weight 文字着重 font-style 文字样式
text-decoration 文本修饰 letter-spacing 字母间距
word-spacing 单词间距
5.常见标签
- div 块
- img 图片（单标签）
- a 链接、下载、锚点
- h1-h6 标题
- p 段落
- strong 强调（粗体）
- em 强调（斜体）
- span 区分样式
- ul 无序列表
- ol 有序列表
- li 列表项
- dl 定义列表
- dt 定义列表标题
- dd 定义列表项
6.css reset
body,dl,dd,p,h1,h2,h3,h4,h5,h6 {
margin:0;
font-size:12px;
}
ol,ul {
margin:0;
padding:0;
list-style:none;
}
a {
text-decoration:none;
}
img {
border:none;
}
7.css选择符优先级
同级样式覆盖前者;
样式优先级
类型(1) < class(10) < id(100) < style(行内样式)(1000) < js
8.内嵌(内联、行内)的特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
- a
- img
- span
- strong
- em
9.块元素的特征
1、默认独占一行
2、没有宽度时，默认撑满一排
3、支持所有css命令
- div
- p
- h1-h6
- ul
- ol
- dl
10.Inline-block的特点和问题
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
11.前端规范
- 所有书写均在英文半角状态下的小写；
- id，class必须以字母开头；
- 所有标签必须闭合；
- html标签用tab键缩进；
- 属性值必须带引号；
- /* css注释 */
- ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
- p,dt,h标签 里面不能嵌套块属性标签；
- a标签不能嵌套a；
- 内联元素不能嵌套块；
12.浮动：left/right/none
1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
4.脱离文档流
5.浮动层级提升半层clear left/right/both/none 元素的某个方向不能有浮动元素
清浮动
- 1.给父级也加浮动
- 2.给父级加 display: inline-block;
- 3.在浮动元素下面加一个空的<div class="clear"></div>, .clear {height: 0;background: blue;font-size: 0;clear: both;}
- 4.在浮动元素下面加<br clear="all" />
- 5.给浮动元素的父级加:after {content: "";display: block;clear: both;}
- 6.给浮动元素的父级加overflow
- 在IE6,7下浮动元素的父级有宽度就不用清浮动
13.overflow
- auto 溢出显示滚动条
- scroll 默认就显示滚动条
- hidden 溢出隐藏
14.position: relative 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响；
定位元素位置控制
top/right/bottom/left
15.position: absolute 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用；
定位元素位置控制
top/right/bottom/left定位元素默认后者层级高于前者
z-index:[number]； 定位层级
16.position: fixed 固定定位
与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；
IE6不支持固定定位；
17.opacity：不透明度
标准浏览器 opacity: 0.5;
IE8以下私有 filter: aplpha(opacity=50);
18.table 表格
table的标签特性就是display: table;
colspan 属性规定单元格可横跨的列数；
rowspan 属性规定单元格可横跨的行数；
table css reset:
th, td {
padding: 0;
}
table {
border-collapse: collapse;
}
table 表格
thead 表格头部
tr 行
th 表格标题
tbody 表格主体
tr 行
td 单元格
tfoot 表格尾部
注意事项：
1、不要给table,th,td以外的表格标签加样式
2、单元格默认平分table的宽度
3、th里面的内容默认加粗并且左右上下居中显示
4、td里面的内容默认上下居中左右居左显示
5、table决定了整个表格的宽度
6、table里面的单元格宽度会被转换成百分比
7、表格里面的每一列必须有宽度
8、表格同一竖列继承最大宽度
9、表格同行继承最大高度
19.flex 弹性盒
display: flex display: box的进化版但是兼容性flex-direction设置主轴方向
- row 从左向右排列（默认值）
- row-reverse 从右向左排列
- column 从上往下排列
- column-reverse 从下往上排列
justify-content 主轴对齐
- flex-start（默认）元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间平分左右两侧
- space-between 富裕空间在元素之间平均分配
- space-around 富裕空间在元素两侧平均分配
align-items 侧轴对齐
- flex-satrt （默认值）元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间平分左右两侧
flex-wrap 换行
- nowwrap（默认）
- wrap 换行
- wrap-reverse 反向换行
align-content 堆栈伸缩行
- align-content会更改flex-wrap的行为。它和align-items相似，
- 但是不是对齐伸缩项目，它对齐的是伸缩行
- flex-start（默认）元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间平分左右两侧
- space-between 富裕空间在元素之间平均分配
- space-around 富裕空间在元素两侧平均分配
- space-evenly 富裕空间平均分配，所有元素之间空间相等
flex-flow
- flex-flow是flow-direction和flex-wrap的缩写
- flex-flow:[flex-direction] [flex-wrap]
flex子元素相关属性
-
order 显示顺序
- 数字越大，显示越考后
- 支持负数
- margin:auto
-
align-self 子元素侧轴对齐
- flex-start（默认值）元素在开始位置 富裕空间占据另一侧
- flex-end 富裕空间在开始位置 元素占据另一侧
- center 元素居中 富裕空间平分左右两侧
- flex 伸缩性
- flex:auto
- flex:none
