前端基础知识点(2)

以你之姓@ 2021-07-25 21:42 545阅读 0赞

# 前端知识点——元素嵌套 #

行级元素与块级元素的嵌套问题：  
行级元素只能嵌套行级元素，块级元素可以嵌套任何元素.  
但是块级元素p不能嵌套块级元素div，因为一个P标签会被div分割成两个，这个是浏览器内核规定的。  
**a标签不能嵌套a标签**

# 前端知识点——文本类元素的对齐问题 #

一个行级块元素如果有内容，则其他的文本类元素会跟内容的底部对齐。  
如果行级块元素没有内容，则其他的文本类元素会跟此元素底部对齐。  
行级块元素调整文本类元素的对齐基线的方式是：  
`vertical-align:middle;`或者写数字+px也是可以的。

# 前端知识点——伪元素一行内展示的设置方法 #

伪元素如果需要在一行内展示，则需要设置为：

content:'';
    	display:inline-block;
    	设置宽高或者背景等；
    }

注意清除浮动的时候，必须设置为`display:block;`才可以。设置为`display:inline-block;`是不可以的。

# 前端知识点——项目准备工作 #

1.  样式重置与模块化
2.  Line-height不同值的区别
3.  css @规则
4.  favicon
5.  base标签
6.  自定义图标
7.  H标签的应用场景
8.  以图换字
9.  怪异盒模型
10. css3(圆角/渐变/过滤)
11. IE滤镜
12. CSS HACK
13. 图片垂直居中对齐
14. CSS Sprites
15. 表格
16. 图片格式webp
17. 词换行

# 前端知识点——设置微软雅黑字体 #

`font-family:'微软雅黑';`  
`font-family:Miscrosoft YaHei;`

# 前端知识点——伪元素清除浮动的三件套 #

.clearfix::after{
    	content:'';
    	display:block;
    	clear:both;
    }

# 前端知识点——@规则 #

1.  @charset——设置样式表的编码
2.  @import ——导入其他样式文件
3.  @media ——媒体查询
4.  @font-face——自定义字体

举例：引入css文件  
@import ‘reset.css’;

# 前端知识点——自定义字体的使用方法 #

@font-face{
    	font-family:'iconfont';
    	src:url('../font-iconfont.eot');
    	src:url('iconfont.eot?#iefix') format('embedded-opentype'),
    	url('iconfont.woff2') format('woff2'),
    	url('iconfont.woff')   format('woff'),
    	url('iconfont.ttf')       format('truetype'),
    	url('iconfont.svg#iconfont')  format('svg');
    }

# 前端知识点——快速写Html代码 #

`li.item$*5>a[href=#]>img[src=images/ading_0$.jpg]`  
这个代码会快速展示为

# 前端知识点——标准盒模型与IE盒模型(怪异盒模型) #

1.  标准盒模型  
    总宽度=border(左右)+width+paddng(左右)  
    总高度=border(上下)+height+padding(上下)
2.  IE盒模型(怪异盒模型)  
    总宽度=width;  
    总高度=height;

# 前端知识点——以图换字 #

background:url(图片地址) center no-repeat;
    text-indent:-9999px;
    overflow:hidden;

# 前端知识点——线性渐变属性 #

`background-image:linear-gradient(to right,#ff9000,#ff5000);`  
对于IE浏览器，不支持linear-gradient这个css3的样式，IE 6 7 8 9 都不支持，如果需要在IE的这些系统版本中运行的话，可以用下面的这种方式。

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000',endColorstr='#ffff5000',GradientType=1);

# 前端知识点——calc计算样式的使用 #

1.  数值需要带单位，如px;
2.  运算符左右需要有空格隔开。  
    举例：  
    `width:calc(100% - 190px);`

# 前端知识点——元素居中问题 #