前端知识点汇总

249 阅读6分钟

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.在浮动元素下面加一个空的
    , .clear {height: 0;background: blue;font-size: 0;clear: both;}
  • 4.在浮动元素下面加
  • 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