【前端新手】css知识点随记（一）

最新推荐文章于 2023-12-13 10:29:54 发布

差不多先生img

最新推荐文章于 2023-12-13 10:29:54 发布

阅读量494

点赞数

分类专栏： web前端文章标签： web前端浏览器兼容 css 前端

本文链接：https://blog.csdn.net/u012088576/article/details/77887186

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

text-align

简单理解：块级元素才定义text-align属性，可以控制所包含的行内元素的对齐。

2. vertical-align

简单理解：1）行内元素定义vertical-align，可以改变其相对父元素或整行的对齐方式。2）表格单元格中内容的对齐方式。

3. 清除浮动

IE下清除浮动准则很简单，使元素haslayout就可以了。如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。非IE浏览器常用的是overflow属性，overflow:hidden;或是overflow:scroll都可以，不过由于后者经常一不小心出现滚动条，所以前者用的更多些。由于现代浏览器都支持after伪类伪元素，所以常常也会用after写入一个clear属性的元素清除浮动。当然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿。下面小结这几个方法。

投机取巧法

就是直接一个 <div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强，使用方便，是初学时使用的上佳之选。但是我从来不用，因为我看到的是个巨大的浪费，浪费了一个标签，而且只能使用一次，我个人是无法容忍的，所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的。

overflow + zoom方法

.fix{overflow:hidden; zoom:1;}

此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个overflow:hidden;是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。我一般不用这个方法，只是有时候顺便去除浮动时用用。

after + zoom方法

先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，我了很多次，貌似随便写什么东西都没有问题，比如 content:'clear both',于是有：

.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，我都是用这个样式清除浮动的，不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦。

补充：对于float浮动，overflow/zoom如何清除浮动的原理，张鑫旭有独特的见解，特附上链接：

CSS float浮动的深入研究、详解及拓展(一)

CSS float浮动的深入研究、详解及拓展(二)

对overflow与zoom”清除浮动”的一些认识

大致对这三篇文章做个重点总结：

float的原始意义是实现文字环绕图片效果，尽量不要用其来实现其他布局效果。事实上除文字环绕图片效果的实现需要用到float外，其他用float实现的布局都可用其他方式来代替实现。
float的本质是“包裹”与“破坏“——“包裹”我理解为参考字面意思，即元素刚好包裹住内部元素内容，可参考宽度自适应。“破坏”是指float属性破坏了元素的inline boxes特性，造成了其父元素的高度塌陷。
撇开浮动的“破坏性”，浮动就是个带有方位的display:inline-block属性。
浮动破坏了inline box，也就是破坏了高度，所以这里含有浮动属性的元素实际上是没有高度的。
清除浮动造成的影响的方法有两大类，一类就是clear:both/left/right;清除，另外一类就是“包裹”清除。float，position：absolute，display：inline-block，overflow：hidden，zoom：1都具有包裹性，即可以清除浮动造成的影响（父容器高度塌陷）。

4. 图片自适应

开发时可能会遇到这种问题：图片过大，但是需要让图片放置在比图片小的容器中，如果采用<div><img/></div>这种结构来放置图片，图片可能会因压缩而影响展示效果，也许这时宁愿对图片进行一点裁剪，但又希望获取较好的展示。那么有什么比较好的实现方法呢？

一个比较好的实现方法是：不要设置<img>标签，而将图片设置为div的背景（background-image属性），只设置background-image属性可能也不能达到较好的展示，此时可配置background-position（值为center代表图片在div居中显示），background-size属性。不了解的小伙伴还是上网查查使用效果。

ps：background-size属性是css3提出的属性，ie8不支持。那么如何兼容呢？网上的说法是采用滤镜，例如：

body {  
    background: url(图片地址) no-repeat center;  
    -webkit-background-size: cover;  
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;  
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='图片地址', sizingMethod='scale');  
    -ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='图片地址', sizingMethod='scale');  
}

特别注意：

虽然使用filter滤镜的方法可以做到background-size在ie8下浏览器的兼容，但是效果并没有该属性再其他浏览器那样展示完美，还是会存在些许图片压缩的现象，同时还存在一个问题——当在ie中同时使用filter和background-size属性时，浏览器实际上会忽略background-size属性。换句话理解就是，即使在该属性兼容的ie9中若同时使用filter和background-size属性（参考上边body的用法），filter属性会覆盖background-size属性，使图片在ie9中也会压缩展示。所以目前的优化方法是采用hacker方式进行解决。

常见的hacker方式有：

<!--[if lte IE 6 ]> <html class="ie ie6 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="zh-CN"> <!--<![endif]-->  //重点：注意<!-->标签并不多余哦
然后在css中类似引用：
.ie8 XX { }

重点是要学会hacker的if标签使用，针对不同的ie浏览器可使用不同的if判断来为其设置特定的样式或者内容。

5. background-position

background-position属性的了解参考官网解释：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

简单理解：background-position的取值有百分比（<percentage> <percentage>）和具体值（<length> <length>）。百分比指背景图片的百分比位置要与容器的百分比位置对齐（例如：background-position：50% 50%，表示图片的50% 50%位置与容器的50% 50%位置对齐），而具体值则是相对容器的偏移。如果只有一个值被指定，则这个值就会默认设置背景图片位置中的水平方向，与此同时垂直方向的默认值被设置成50%。例如left, left center, and center left实现效果一致。