css进阶之路

关键词：

下面主要引用http://www.cnblogs.com/wangfupeng1988/tag/css知多少/

CSS进阶笔记：

一、学习CSS的三个突破点

1.浏览器如何加载和解析CSS——CSS的5个来源；

2.CSS和html如何结合起来——选择器；

3.CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等；

下面分开阐述：

1.浏览器如何加载和解析CSS

(1) 浏览器默认样式表

(2) 用户样式表（不常用）

(3) <link>引用的css文件

(4) <style>中编写的样式代码

(5) <a style=’ ’>中编写的样式代码

2.常见问题：

(1) 不同浏览器默认样式不一致

解决方法：* {margin:0; padding:0;}

(2) 层叠错误

首先得知道层叠规则：

浏览器会把各个零散的整合成一个整体，浏览器会让后者覆盖前者；特殊情况——！imporment(最高执行权，后面层叠不会影响它)

Demo如下：

 　　

3.差异比较

(1) div {display:block}(默认)、table{display:table}、td,th{display:table-cell},{display:inline-block}

a.table{display:table}:

    div宽度和父容器相同，table宽度根据内容而定——即table具有“包裹性”;

b. table-cell 用法举例：

      

　　用table-cell，像用table一样做多列布局，做出来的效果和table做出来的效果是一模一样的;

c. {display:inline-block}用法举例：

    

    能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行

    外部看来是“流”，但是自身确实一个“块”

(2)  em和px

    大家在设置文字高度或者与文字有关的距离，如p的margin、line-heigt，会用em还是用px？因为px是固定大小,它也不利于扩展。因此，推荐用em。而且浏览器的默认样式也建议这样书写：

　　

    如上图，它设置了h1字体大小2em、纵向margin是0.67em，h2字体大小1.5em、纵向大小0.75em……p的纵向margin是1.12em，字体大小1em（上图中没有，但在整个文件中有）

　　em是什么？——em是一个浏览器识别的长度单位，但是它不是绝对的、固定的，而是相对的。大家都知道px是一个绝对的长度单位制，它永远不会改变。浏览器默认情况下令1em === 16px。现在你知道为何p默认是16px了吧。而且你还知道了h1是p高度的两倍，h2是p高度的1.5倍……（你知道的越来越多了。。。）

　　当然，我们可以通过css修改1em的值。

　　

　　由于font-size和margin都是通过em来定义的，当em被修改时，不管字体大小修改，margin值也会跟着修改。这就是em好用之处！

从现在开始，与字体大小有关的css，全部都用em！

(3) 选择器的高级用法

例1：

　　

　　上图中的效果应该比较常见，在各个菜单之间加下划线。我之前的实现是：每个li都加一个border-bottom，在把最后一个li的border-bottom去掉。

　　其实完全没必要这样麻烦，下面一个样式设置即可解决：

　　

二、新知识扩展

1. 特指度（specificity）。特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。

　　这个计算叫做“I-C-E”计算公式，

1. I——Id；
2. C——Class；
3. E——Element；

　　即，针对一个css选择器表达式，遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1。

　　下面举几个css表达式的特指度计算结果，大家也自己算一算，是不是对：

CSS选择器表达式	特指度计算结果
p	1
p.large	11
P#large	101
div p#large	102
div p#large ul.list	113
div p#large ul.list li	114

　　还有一个重点要注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。

    简版规则：

    

规则一，包含ID的选择器胜过包含Class的选择器，包含Class的选择器胜过包含元素的选择器；例如下图，第一个特指度更高：

　　

　　规则二，不同选择器的特指度比较时，不区分加载的顺序（相同选择器在层叠时，后加载的覆盖前加载的），例如下图，虽然后加载，但是特指度低：

　　

　　规则三，设置的样式高于继承的样式，不用考虑特指度。例如：

      

      

　　其实，大部分情况下，你通过这个简版的规则，即可判断选择器的优先级。

2.盒子模型扩展

为盒子模型设置宽度，只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是：box-sizing:border-box

　　

　　如上图，div设置了box-sizing:border-box之后，300px的宽度是内容 + border + 边框的宽度（不包括margin），这样就比较符合我们的实际要求了。

　　建议大家在为系统写css时候，第一个样式是：

      

　　大名鼎鼎的bootstrap也把box-sizing:border-box加入到它的 * 选择器中，我们为什么不这样做呢？

3. 纵向margin的重叠

　　这里提到margin，不得不提一下margin的这一特性——纵向重叠。如下图，<p>的纵向margin是16px，那么两个<p>之间纵向的距离是多少？

　　按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的margin是会重叠的，大的会把小的“吃掉”（可以自己去实验）。

      

3. 重新认识float

  破坏性:被设置了float的元素会脱离文档流;(为了要实现文字的环绕效果)

  包裹性:div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器。

  清空格:这一特性的根本原因是由于float会导致节点脱离文档流结构

http://www.cnblogs.com/wangfupeng1988/p/4287292.html

http://www.cnblogs.com/wangfupeng1988/p/4287292.html

清除float:

先介绍两个比较简单，但是不常用的解决方法：

1. 为父元素添加overflow:hidden
2. 浮动父元素

　　第三种方法也不是很常用，但是大家要知道clear:both这个东西。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。

　　

      

　　接下来的第四种方法是大家最需要掌握的，也是我推荐的，也是bootstrap正在用的——clearfix——不知道的同学一定要去搜一下，要不然就太low了！

　　

　　上图中，我们定义一个.clearfix类，然后对float元素的父元素应用这一样式即可，非常简单吧？注意，你可能会搜出不同版本的clearfix，有的代码比上图中的代码多，你不用理会它，就按照我的贴图的代码写就行。

　　究其原理，其实就是通过伪元素选择器，在div后面增加了一个clear:both的元素，跟第三种方法是一个道理。

4.重新认识absolute

  

类似“菊花转”设置：(page可以理解成全屏幕)

 

css系列——前端进阶之路：初涉less

前言：最近帮一个朋友解决点问题，在查看组件源码的时候涉及到了less语法，这可难倒博主了。没办法，既然用到就要学呗，谁让咱是无所不能的程序猿呢！所以今天来学习下Less，算是笔记，也希望给初学less的园友提供参考，... 查看详情

koa2从入门到进阶之路(代码片段)

之前的文章我们介绍了一下koapost提交数据及koa-bodyparser中间件，本篇文章我们来看一下 koa-static静态资源中间件。 我们在之前的目录想引入外部的js，css，img等静态资源该如何获取呢？我们首先先按照之前的思维按照相对... 查看详情

今天，公司架构师跟我分享多年的私货|进阶之路必读书籍（附下载链接）

...豆瓣评分9.4多年难得一见的重磅CSS书籍，看得很过瘾，CSS进阶必读。JavaScript初级《javascript语言精粹》豆瓣评分9.1本书通过对JavaScript语言的分析，甄别出好的和坏的特性，从而提取出相对这门语言的整体而言具有更好的可靠性、... 查看详情

ssh进阶之路hibernate映射——一对一单向关联映射

【SSH进阶之路】Hibernate基本原理（一），小编介绍了Hibernate的基本原理以及它的核心，採用对象化的思维操作关系型数据库。【SSH进阶之路】Hibernate搭建开发环境+简单实例（二），小编搭建了基本Hibernate的开发环境。并做了一... 查看详情

ssh进阶之路

 【SSH进阶之路】Hibernate基本原理（一）      在开始学Hibernate之前，一直就有人说：Hibernate并不难，无非是对JDBC进一步封装。一句不难，难道是真的不难还是眼高手低？   如果只是停留在使... 查看详情

小白的进阶之路9

---恢复内容开始---今天开始学习spring的事物管理先写一个转账的例子：动手之前，先把逻辑搞清楚：持久层：　　　　AccountDao（）------》接口　　　　　　publicvoidin（Stringin，doublemoney）；　　　　　　publicvoidout（Stringout，double... 查看详情

typescript进阶之路

前言反思了现在为什么越来越多的公司开始使用TypeScript开发应用，而大部分小厂还是热衷javascript，在多人协作的团队，代码的可读性、结构清晰、低耦合、易扩展显的尤为重要。JavaScriptTypeScript是JavaScript的一个超集，它对JavaScr... 查看详情

ssh进阶之路hibernate基本映射

【SSH进阶之路】Hibernate基本原理（一），小编介绍了Hibernate的基本原理以及它的核心。採用对象化的思维操作关系型数据库。【SSH进阶之路】Hibernate搭建开发环境+简单实例（二）。小编搭建了基本Hibernate的开发环境，并做了一... 查看详情

ssh进阶之路hibernate基本映射

【SSH进阶之路】Hibernate基本原理（一），小编介绍了Hibernate的基本原理以及它的核心。採用对象化的思维操作关系型数据库。【SSH进阶之路】Hibernate搭建开发环境+简单实例（二），小编搭建了基本Hibernate的开发环境。并做了一... 查看详情

java进阶之路-java中的threadpoolexecutor

参考：深入理解ThreadPoolExecutor 查看详情

java进阶之路-java中的位操作

「WTF系列」深入Java中的位操作 查看详情

go语言的进阶之路-面向对象编程

                               　　　　GO语言的进阶之路- 查看详情

jvm进阶之路十二：字节码指令

...章里，我们进一步学习字节码的相关指令。在前面的【JVM进阶之路】三：探究虚拟机对象里，提到了对象的初始化过程，对象初始化用的是new指令——这就是字节码指令。在【JVM进阶之路】十一：Class文件结构中已经学习了JVM字... 查看详情

进阶之路（基础篇）-007脉冲宽度测量

1/*********************************2代码功能：Pulse脉冲宽度测量3使用函数：4pulseIn(引脚号,脉冲响应电平,最大响应时间(微秒));5创作时间：2016*10*086作者邮箱：[email protected]7********************************/8intkeyPin=2;9voidsetup()10{11pi 查看详情

菜鸡进阶之路

 记录一下自己一点大学的经历2018.10山东省高校机器人大赛省赛二等奖2018.12青岛大学电子设计竞赛校赛一等奖2018.12青岛大学第一届程序设计大赛（acm团体赛）冠军2019.3第十届蓝桥杯省赛（个人赛）省赛一等奖2019.4计科院图灵... 查看详情

javascript进阶之路1

路漫漫其修远兮，吾将秃了头依然不见大明湖畔的夏雨荷。当年我还是个javascript小白，项目经理分下来一个验证表单功能的任务，内容不多，仅需要验证用户名、邮箱、密码等。我一看soeasy，于是便写下几个函数。1functioncheckNam... 查看详情

小白的进阶之路1

在登陆的页面中，需要一个表单，<formaction="\goods\loginServlet" method="post">为什么要有这个servlet？答：需要将这个用户填好的表单交给其他的东西，比如服务器，或者servlet来继续处理或响应。用户名：<input type="text"nam... 查看详情

apicloud开发者进阶之路|[模块教程]touping模块demo示例

touping模块实现局域网内基于DLNA的视频投屏功能，并支持搜索设备，投屏播放，调节播放进度，调节音量，退出投屏等功能。<!DOCTYPEHTML><html><head><metacharset="utf-8"><metaname="viewport"content="maximum-scale=1.0,minimum-scale=1... 查看详情