网站建设资讯

NEWS

网站建设资讯

前端CSS必须要学的知识点有哪些

本文小编为大家详细介绍“前端CSS必须要学的知识点有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“前端CSS必须要学的知识点有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

创新互联建站专注于赤壁企业网站建设,响应式网站开发,成都做商城网站。赤壁网站建设公司,为赤壁等地区提供建站服务。全流程按需求定制制作,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务

一、移动端

移动端还没有上车。先来总结一下三个基本的移动端开发特性:视口(viewport)、媒体查询(@media)和相对字体大小。

1.1视口(viewport)

加上视口之后,页面将会自动裁剪成适合移动页面的大小。

1.2媒体查询(media query)

以下只是对媒体查询使用的一个演示。实际中我们常用媒体查询来根据不同宽度的设备显示不同的布局。

/* HTML */

1.3相对字体大小(rem/em)

rem是相对于根字体的大小,em是相对于父级的字体大小。

/* HTML */

二、选择器

2.1常用

标签(tag)、id和类(class)都是常用的选择器。其中class最为常用。

// id在页面中是唯一的,class的属性可以有多个

2.2关系

后代(parent child-child) 子代(parent>child) 兄弟(+) 相邻(~)。

兄弟选择器常用来制作,导航栏中间的一条边框线。

    2.3伪元素

    伪类有::before、::after、::selection、::first-line、::first-letter。

    其中::before常用来制作三角形和登陆框左边的图标。更多请见kingkit。

    /* HTML */

    2.4伪类

    LVHA(:link,:visited,:hover,:active)、:focus、lang、first-child(last-child,nth-child(n))

    div:first-child {}

    2.5优先级

    优先级最高的是设置了!important的元素,其次看元素的权重。权重相同时看谁离HTML更近(内嵌>内链>外链),近的优先级更高。

    权重分配是attr:1000,id:100,class:10,tag:1。当有多种选择器组合的时候,他们的权重之和就是总权重。权重大的优先级高。

    display: none!important; //优先级最高,IE6不支持同一选择符中的!important

    同级的按照就近原则(内嵌>内连>外链),越近优先级越高

    优先级最高

    三、样式重置(reset)

    3.1常用重置

    * {box-sizing:border-box;} /* IE8+ */

    3.2重置插件(Normalize.css,IE8+)

    当然,你也可以不自己写重置样式,使用插件制动帮你完成。

    四、浏览器前缀

    想要使用未标准化的新特性,往往伴随着一大堆兼容前缀。各浏览器使用自己的私有前缀实现新功能,我门在写完了兼容属性之后,还要加上一条标准属性。等到属性标准化之后我们就不需要重新添加标准属性了。

    div

    4.1前缀由来

    在实验性功能尚未标准化之前,浏览器厂商为了开发者能尽快的体验这些新特效。通过带前缀的CSS属性使得这些功能可以直接被使用。

    待到标准化之后,则可以通过不带前缀的属性设置样式。但是对于没有更新浏览器的用户来说,样式依旧需要通过私有属性访问。

    这样,你不得不写N条兼容代码。chrome(-webkit-)、firefox(-moz-)和opera(-o-)。safari和chrome一样,私有属性前缀也是-webkit-。

    4.2解决方案

    这时,你需要的是一个Autoprefixer或者-prefix-free。

    五、兼容性

    除了手写IE兼容性,你也可以直接使用IE9.js自动处理IE6-9的bug。另外,让IE6-9支持的支持圆角、背景渐变、边框图片、盒阴影、rgba等可视化的功能可以用CSS3PIE。让IE6-8支持媒体查询可以使用Respond.js。IE6-7支持CSS3 box-sizing可以使用borderBoxModel.js。IE6-8支持:first-child等高级CSS选择符,可以用selectivizr。让IE8及以下的浏览器支持H5新元素,可以用html5shiv.js。

    5.1 IE条件注释

    这类代码只有IE会解析,其他浏览器会作为注释处理。更多请见天堂的旋转木马。