你不知道的技术

前端知识点汇总

2019-03-05  本文已影响52人  君惜丶

1.结构样式

2.文本设置

3.复合属性

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.常见标签

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、代码换行被解析

9.块元素的特征

1、默认独占一行

2、没有宽度时,默认撑满一排

3、支持所有css命令

10.Inline-block的特点和问题

1、块在一行显示;

2、行内属性标签支持宽高;

3、没有宽度的时候内容撑开宽度

11.前端规范

12.浮动:left/right/none

1.使块元素在一行显示
2.使内嵌支持宽高
3.不设置宽度的时候宽度由内容撑开
4.脱离文档流
5.浮动层级提升半层

clear left/right/both/none 元素的某个方向不能有浮动元素

清浮动

13.overflow

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设置主轴方向

justify-content 主轴对齐

align-items 侧轴对齐

flex-wrap 换行

align-content 堆栈伸缩行

flex-flow

flex子元素相关属性

上一篇 下一篇

猜你喜欢

热点阅读