继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

css中的注意项,可能会帮助到大家哦!

沉默小猪888
关注TA
已关注
手记 1
粉丝 2
获赞 27

CSS样式层叠表

1、link与@import的区别(5点)

(1)、link为XHTML的标签,可以引进CSS样式表,除了引进CSS文件还可以引进其他的文件如.js或.rss文件;@import为CSS中的标签,只能引进CSS文件。

(2)、加载顺序不同:link引进的CSS时同时也被加载,而@import引进的CSS要下载完才加载。

(3)、兼容性问题:@import是CSS2.1才出来的不被老的浏览器支持,而link没有此问题。

(4)、使用JavaScript操作DOM改变样式只能由link引进CSS文件才能实现。

(5)、@import可在CSS内再次引进CSS其他文件

<link src="xx.css" rel="styleSheet" type="text/css">

<style>

@import xx.css;

</style>

2、display和visibility的区别

(1)、display:none;是元素没有框,即是没有宽高,不占文档的位置;

   display:inline;可以使像<p>这样的块级元素变为像<a>一样的行内元素

   display:block;可以使像<a>一样的行内元素变为像<p>一样的块级元素

   display:inline-block;行内块元素

(2)、visibility:hidden;不显示,透明,但是有宽高,在文档中占有位置,只是隐藏

3、定位机制

除了默认的流定位方式,还有:浮动定位,相对定位,绝对定位,和固定定位

浮动定位:将元素排除在普通流之外,将它放置到边框的左边或右边

相对定位:将元素相对于普通流中的位置定位

绝对定位:将元素内容完全从普通流中完全移除,可以偏移属性在固定元素的位置

固定定位:将元素固定在页面的一个某个位置

4、标签语义化

在HTML5的新标签,开始了标签语义化,直观的认识标签和属性的用途和作用。如<header>、<aside>、<footer>

语义化可让页面显得结构化,便于浏览器解析,便于引擎搜索解析,并提高代码的可读性,可维护性和可重用性。

5、为什么简易设置背景图片时,需要设置背景颜色?

一般我们在设置background-image时都会设置background-color,并设置与图片相应的颜色。如果在加载页面的,突发状况,图片无法显示,页面可以使用背景颜色充当。

6、CSS中content的作用

content属性与:before和:after伪元素配合使用来插入生成的内容,在元素之前或者元素之后,可以插入文本、图像、引号及计数器生成的编号

eg、body{counter-reset:chapter}

  h1:before{content:"第"chapter(chapter)"章"}

  h1{counter-increment:chaptr}

7、CSS sprite是什么,优缺点?

CSS精灵,是一种网页图片应用处理方式,把网页中的一些背景图片整合在一张图片文件中,在利用background-image、background-repeat、background-position组合进行背景定位。

优点:(1)、减少HTTP请求,提高性能

    (2)、减少图片字节

    (3)、减少命名困扰

    (4)、更换风格方便

缺点:图片合成麻烦,设置时必须精确定位,维护时最好是添加图片,不更改已有的图片

8、过渡与动画的区别

过渡属性transition可以在一定时间内实现元素的状态过渡到另一个状态,模拟动画效果,但功能有限。而动画属性animation则可以实现比较复杂的动画,通过关键帧控制动画的每一步控制更为精准,可以实现复杂动画。

9、CSS reset

CSS reset叫CSS重写或CSS重置

用于改写HTML标签的默认样式,如p元素有上下边距,li 有列表标识符。这些默认样式在不同的浏览器会有不同的效果,如ul默认有缩进的样式,在IE中使用margin实现,在Firefox中是用padding实现,这必然会有兼容性问题。

因此在CSS样式中去掉这些默认样式,重新定义标签样式覆盖默认样式,即为CSS reset。

注意,样式重写不建议用*{}来重置,影响性能

p,b,ul{margin:0;padding:0}

10、浏览器兼容性

由于浏览器的版本及类型不同导致CSS的样式也不尽相同因此需要考虑到浏览器的兼容性书写不同的CSS样式。

首先,各主流的浏览器对W3C的标准支持较好,所以要保证代码符合W3C的标准。

其次,对于某些支持受限的属性,针对不同的浏览器添加不同的前缀,如-webkit- -o- -moz-.

还有,对于IE的低版本可带前缀书写特定的代码,实现版本识别

eg .bg{

    background-color:#333;/所有都能识别/

    background-color:#00deff\9;/IE 6 7 8能识别*/

    +background-color:#a200ff;/IE6 7能识别/

    _background-color:#l10bd1;/IE6/

    }

另外,特殊情况特殊处理

(1)CSS reset改变默认的样式效果

(2)IE低版本中auto不能实现居中,用text-align

(3)子元素设置外边距时,父元素设置外边距或border

(4)外边距合并问题

最后的清除浮动元素带来的影响

  由于浮动的元素不在文档的普通流中,所以元素浮动之后其原有的位置不在保留,其他的元素位置也会受到影响。

(1)清除左右带来的浮动影响,用clear属性来设置,如果在包含框内,是父元素显示其宽高使用overflow:hidden来设置。

推荐方法(2)父元素添加后置内容生成

      parent:after{

            content:" ";

            display:table;

            clear:both;

          }

还有我们经常遇到的小问题,<div>

               <div class="s1"></div>

            <div>

            <style>

              .s1{margin-top:10px;}

            </style>

margin-top是不是把父元素也带下来了呢?第一个子元素的margin-top与最后一个子元素的margin-bottom的越界问题

解决(1)、给父元素加border

  (2)、给父元素加padding

  (3)、给父元素加overflow:hidden;

  (4)、推荐方法:为父元素添加前置内容生成

    .parent:before{

        content:"";

        display:table;

          }

打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP

热门评论

恩恩,还是有用的,小伙伴们快来看看吧

查看全部评论