前端知识点——元素嵌套
行级元素与块级元素的嵌套问题：
行级元素只能嵌套行级元素，块级元素可以嵌套任何元素.
但是块级元素p不能嵌套块级元素div，因为一个P标签会被div分割成两个，这个是浏览器内核规定的。
a标签不能嵌套a标签
前端知识点——文本类元素的对齐问题
一个行级块元素如果有内容，则其他的文本类元素会跟内容的底部对齐。
如果行级块元素没有内容，则其他的文本类元素会跟此元素底部对齐。
行级块元素调整文本类元素的对齐基线的方式是：
vertical-align:middle;或者写数字+px也是可以的。
前端知识点——伪元素一行内展示的设置方法
伪元素如果需要在一行内展示，则需要设置为：
content:'';
display:inline-block;
设置宽高或者背景等；
}
注意清除浮动的时候，必须设置为display:block;才可以。设置为display:inline-block;是不可以的。
前端知识点——项目准备工作
- 样式重置与模块化
- Line-height不同值的区别
- css @规则
- favicon
- base标签
- 自定义图标
- H标签的应用场景
- 以图换字
- 怪异盒模型
- css3(圆角/渐变/过滤)
- IE滤镜
- CSS HACK
- 图片垂直居中对齐
- CSS Sprites
- 表格
- 图片格式webp
- 词换行
前端知识点——设置微软雅黑字体
font-family:'微软雅黑';
font-family:Miscrosoft YaHei;
前端知识点——伪元素清除浮动的三件套
.clearfix::after{
content:'';
display:block;
clear:both;
}
前端知识点——@规则
- @charset——设置样式表的编码
- @import ——导入其他样式文件
- @media ——媒体查询
- @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]
这个代码会快速展示为
<li class="item1">
<a href="#">
<img src="images/ading_01.jpg" />
</a>
</li>
<li class="item2">
<a href="#">
<img src="images/ading_02.jpg" />
</a>
</li>
<li class="item3">
<a href="#">
<img src="images/ading_03.jpg" />
</a>
</li>
<li class="item4">
<a href="#">
<img src="images/ading_04.jpg" />
</a>
</li>
<li class="item5">
<a href="#">
<img src="images/ading_05.jpg" />
</a>
</li>
前端知识点——标准盒模型与IE盒模型(怪异盒模型)
- 标准盒模型
总宽度=border(左右)+width+paddng(左右)
总高度=border(上下)+height+padding(上下) - 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计算样式的使用
- 数值需要带单位，如px;
- 运算符左右需要有空格隔开。
举例：
width:calc(100% - 190px);
前端知识点——元素居中问题
文字上下左右居中
text-align:center;//左右居中
line-height:height://上下居中
元素上下左右居中
position:absolute;//父级需要设置为relative;
left:50%;
top:50%;
margin-left:父级元素宽度的一半;
margin-top:父级元素高度的一半;
也可以利用css3中的transition属性。
position:absolute;//父级需要设置为relative;
left:50%;
top:50%;
transform:translate(-50% -50%);
前端知识点——修改背景的颜色
背景颜色可以通过rgba的方式进行设置，这样可以修改颜色的透明度，也可以通过opacity属性来设置。
但是如果元素的内容不想被改变透明度的话，则只能是通过rgba的方式进行设置了。
background-color:rgba() 的方式只能是IE9以上的版本才可以识别，针对IE678可以通过CSS Hack的黑客的方式进行处理。
适用于IE9以上版本或者其他浏览器的方式
background-color:rgba(0,0,0,0.3);
适用于IE9以下的浏览器
background-color:#000\9;
filter:alpha(opacity=30);
前端知识点——让图片上下垂直居中显示
display:table-cell;
vertical-align:middle;
table表格中的内容垂直方向是居中对齐的，所以可以借用这种方式进行设置图片的上下垂直居中。
图片上下垂直居中的第二种方式：
display:flex;
justity-content:space-around;
align-items:center;
