一些这段时间遇到的问题和要注意的问题总结

一、关于伪类选择器
a:link{属性:属性值; }超链接的初始状态;
a:visited{属性:属性值; }超链接被访问后的状态;
E:hover{属性:属性值; }鼠标划过元素时的状态;
E:active{属性:属性值; }即鼠标按下时元素的状态;
需要注意:当这4个超链接伪类选择符联合使用时,应注意他们的顺序。
二、关于背景图片的定位位置
.background-origin:x轴位置 y轴位置
需要注意:background-position的原点(0,0)在哪个区域的左上角,要区分:background-position 背景在容器的定位区域的什么位置摆放以及正负值对应的方向,如top的正值是向上,left的正值是向左,所以个人感觉用负值居多。
三、关于媒体查询
@media screen and (条件:最小宽度,最大宽度等)
min-width 若当前页面宽度大于min-width的值时,则样式生效。
需要注意:链接的css文件的min-width应从小写到大,否则会出现问题。
四、关于元素类型
HTML元素分类为块状元素,内联(行内)元素,置换元素(行内块元素)。
可以通过display:属性来转换元素类型。
需要注意:很多时候其实不仅仅有这几种元素类型,也有很多其他的元素,如果简单的将元素类型分为这几种有可能会在转换的时候出现问题。
五、关于浮动
float: none/left/right;
浮动后的元素会脱离标准流(不会脱离文本流)
浮动后的元素相当于置换元素元素(一行显示多个、可以设置宽高)
需要注意:浮动虽然好用但是不要贪杯哦,有可能出现高度塌陷等意料不到的负面效果。所以一般使用了浮动的话最好清除浮动。
六、关于解决高度塌陷
解决高度塌陷的方法很多,所以随便举几个例子
1.给受到浮动影响的元素添加overflow:hidden - 因为overflow属性会触发 BFC 【一些这段时间遇到的问题和要注意的问题总结】BFC: block formatting context 块级格式化上下文 - 让元素强制按照块元素的规则进行排列

但是这种方法有一个弊端:只要里面的内容或者元素超出父元素以外,就会被隐藏;

2.在受到浮动影响的元素前面,添加一个空div,给空div添加样式:clear:both;
这个也有一个弊端:会添加很多空标记,增加结构负担,产生代码冗余;

3.在浮动元素的父标签的伪元素选择器:after中清除浮动 - 类似于空div(一般用这个)
代码如下: 父元素:after{ content: ""; display: block; clear: both; }一些这段时间遇到的问题和要注意的问题总结

    推荐阅读