关于前端:一些这段时间遇到的问题和要注意的问题总结

29次阅读

共计 1058 个字符,预计需要花费 3 分钟才能阅读完成。

一、对于伪类选择器

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;
            }一些这段时间遇到的问题和要留神的问题总结

正文完
 0