CSS学习笔记

2016年12月15日整理

CSS基础

Chapter1

	在console输入escape("宋体")  ENTER

	就会出现unicode编码

	显示"%u5B8B%u4F53" 就是\5B8B\4F53

	font-family: 中文，英文，最好的是unicode编码

	eg. font-family: "SimSun","SimHei",sans-serif;

	字体名称 英文名称 Unicode 编码

	宋体   SimSun         \5B8B\4F53

	新宋体   NSimSun         \65B0\5B8B\4F53

	黑体   SimHei         \9ED1\4F53

	微软雅黑  microsoft yahei \5FAE\8F6F\96C5\9ED1

	楷体      _GB2312  KaiTi_GB2312   \6977\4F53_GB2312

	隶书   LiSu             \96B6\4E66

	幼园   YouYuan         \5E7C\5706

	华文细黑  STXihei         \534E\6587\7EC6\9ED1

	细明体   MingLiU         \7EC6\660E\4F53

	新细明体  PMingLiU         \65B0\7EC6\660E\4F53

CSS(cascading style sheet) 层叠样式表

CSS书写位置：

 1. 行内式：基本不用。代码可维护性极差，css代码和html结构没有实现分离，影响的范围只有当前标签

 <p style="color:red">...</p>

 2. 内嵌式：少用。代码可维护性较差，没有实现css代码与html结构的完全分离，影响的范围只有当前页面

 	<head>

 	<style type="text/css">

 		...

 	</style>

 	</head>

 3. 外联式：多用。代码可维护性高，css与html结构完全分离，影响范围广，当前整个网页站点

 	<link rel="stylesheet" href="CSS/main.css">

 4. 导入式：和外联式一样都是导入某一个文件夹的CSS样式，不过写法不同,并且@import必须写在所有CSS样式的前面（不推荐使用）

 	@import url(CSS/main.css)

选择器

基础选择器：

标签选择器 p { }

类选择器 .classname { }

 1. 不能以纯数字或者以数字开头定义类名

 2. 不推荐使用汉字定义类名

 3. 不能以特殊符号或者以特殊符号开头（"_"除外）定义类名

 4. 不建议使用标签名或者属性名定义类名

 5. 一个标签可以同时调用多个类样式，多个标签可以同时调用一个类样式

 6. 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。

 7. 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

id选择器 #idname { }

 1. id的命名要以字母开头，可以有数字、下划线,大小写严格区别

 2. id名是唯一的，可以说id是js专用

 3. 一个标签只能调用一个id样式

通配符选择器 * { }

（基本不用，因为会选中所有标签，效率低下）

复合选择器 p.classname { }
1. 标签指定式选择器/交集选择器
  
  p.classname { } &
  
  p#idname { }（一般写成 #idname { }）
2. 后代选择器
  
  div p { }
  
  标签之间必须属于嵌套关系
3. 并集选择器/分组选择器
  
  div, p { }
选择器IE兼容问题
1. IE6能够兼容：标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符
2. IE7能够兼容：儿子选择器div>p、下一个兄弟选择器h3+p
3. IE8能够兼容： ul li:first-child ul li:last-child等

Chapter2

标签的分类：

HTML将标签分为容器级和文本级
1. 文本级：p、span、a、b、i、u、em
2. 容器级：div、h系列、li、dt、dd

CSS将标签分为块级元素、行内元素和行内块元素

 1. 块级元素 `<div>`, `<p>`, `<li>`, `<h1>`...

 	1. 元素自己独占一行显示（默认有宽度）；

 	2. 可以设置宽度和高度；

 	3. 当嵌套一个块级元素，子元素如果不设置宽度，那么该子元素的宽度为父元素的宽度。

 2. 行内元素 `span`, `a`, `font`, `strong`...

 	1. 元素在一行上显示

 	2. 不能直接设置宽度和高度

 3. 行内块元素 `image`, `input`

 	1. 元素在一行上显示

 	2. 可以设置宽度和高度

所有的文本级标签，都是行内元素，除了p是个文本级，但是是个块级元素。

所有的容器级标签都是块级元素。

元素之间的转换
1. display: inline
2. display: block
3. display: inline-block

CSS特性

层叠性：层叠性是一种能力，就是处理冲突的能力。

 1. 样式覆盖。与样式的**调用顺序**没关，与样式的**定义顺序**有关；

 2. 层叠性发生的前提： 样式冲突。

继承性

 1. 继承性发生的前提：标签之间属于嵌套关系；

 **与文字有关的属性都可以实现继承**

 2. 文字颜色color可以实现继承

 3. 文字font-xxx 可以实现继承

 4. 行高line-hight 可以实现继承

 5. text-indent, text-align 可以实现继承

 6. 特殊：

 	1. `<a href="#"></a>` 不能继承父元素中的文字颜色（层叠掉了）

 	2. `<h1></h1>`        标题标签不能继承父元素中的文字大小

优先级（特定性、权重）
1. 数值越大，特定性远大，规则就越特定
2. 选择上了，数权重，(id的数量，类的数量，标签的数量)。
  
  如果权重一样，谁写在后面听谁的。
3. 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。
  
  如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
```
 !important > 行内式 > id > 类/伪类 > 元素名 > 认样式

 先按作者、读者、浏览器的顺序排列，然后如果作者跟读者出现同分数的，最后出现的规则越优先
```
4. !important使用注意事项
  1. !important提升的是一个属性，而不是一个选择器
  2. !important无法提升继承的权重，该是0还是0
  3. !important不影响就近原则
    
    如果大家都是继承来的，!importan不能影响就近原则呢，应该按照“就近原则”来计算权重
  4. !important做网站的时候，不允许使用。因为会让css写的很乱
继承的权重为0，权重会叠加

Chapter3

1. 行高

行高 = 文字大小 + 上间距 + 下间距

行高、字号，一般都是偶数
行高的作用:

当行高值为父容器的高度时，可以让父容器中的文字垂直显示
行高的单位：
1. 单独给一个元素设置行高
当给一个独立的元素设置行高值的时候，除了以px为单位的行高值与文字大小无关，其他都与文字大小有关（与文字大小的积）
1. 盒子嵌套，给父元素设置行高值，子元素的行高问题
行高可以实现继承

当父元素设置的行高值除不带单位情况下，都是先与父元素的文字大小相乘最后的结果，被子元素继承。

当父元素设置的行高值不带单位时，行高 = 子元素文字大小 * 行高值

表单优化写法：

 <!-- for里面写input的id -->

 <label for="username"></label>

 	用户名：

 <input type="text" class="username" id="username" />

 什么表单元素都有label

继承的盒子在父盒子宽度范围内，padding值不会影响该盒子大小。(box-sizing: content-box时)
外边距合并问题：
1. 当两个盒子垂直显示的时候，外边距以设置的最大值为准
2. 盒子嵌套（外边距塌陷）：
  
  1. 给父盒子设置边框
  
  2. 给父盒子设置overflow:hidden;，但会触发BFC(Block formatting contexts)
行内元素不要给上下的margin和padding
1. 上下的margin和padding会被忽略
2. 左右margin和padding会起作用
margin最好用于兄弟关系之间，padding最好用于父子关系之间
a:link、a:visited都是可以省略的，a标签涵盖了link、visited的状态

Chapter4

标准流(文档流)

元素默认的显示方式就是标准流。

 1. 空白折叠现象：比如，如果我们想让img标签之间没有空隙，必须紧密连接

 2. 高矮不齐，底边对齐

 3. 自动换行，一行写不满，换行写

三种脱标方法
1. 浮动
2. 绝对定位
3. 固定定位
浮动 float:left/right;
1. 特点： 脱标，贴边，字围，收缩
  
  收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）
```
 1. 设置了浮动的元素不占原来的位置（脱标）

 2. 一旦浮动，所有标签就不区分行内元素、块级元素，将能够并排，并且能够设置宽高

 3. 可以让块级元素在一行上显示

 4. 浮动可以行内元素转化为行内块元素

 5. 设置了浮动的元素，影响其后面的元素

 6. 模式转换的过程中，能用display就用display
```
2. 作用：
```
 1. 浮动用来解决文字图片环绕问题

 2. 制作导航栏

 3. 网页布局
```
3. 清除浮动
```
 1. 清除浮动不是删除浮动，清除浮动指的是清除浮动的影响

 2. 当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱。

    这种情况下进行清除浮动。
```
4. 清除浮动带来的影响的七种方式
  1. 给浮动元素的父盒子添加height
    
    工作中用的很少，因为父盒子的高度能被内容撑高
    
    加高度很麻烦，还要手动，并且不能适应页面的快速变化
  2. 给浮动元素的父盒子设置 overflow: hidden（该盒子BFC了）
    
    如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动，会把超出父盒子的定位的元素隐藏掉。
  3. 使用 clear: both;
    1. 外墙法：在浮动元素的父盒子后面添加一个<div>并设置.clearfix { clear: both; }
      
      缺点：白白添加一个div，对网页结构不好。并且浮动元素的父盒子没高度，不能设置背景颜色跟背景图片等。
    2. 内墙法：在浮动元素后面直接添加一个<div>并设置.clearfix { clear: both; }
      
      缺点：白白添加一个div，对网页结构不好。浮动元素的父盒子有高度，可以设置背景颜色跟背景图片等
    3. 直接在浮动元素的父盒子后面的盒子添加一个.clearfix { clear: both; }属性
      
      缺点：有一个非常大的、致命的问题，margin失效，两个div之间，没有任何的间隙
  4. 使用伪元素清除浮动①
    
    给父盒子添加 class="clearfix"
```
 .clearfix:after{

 	content:"";

 	display: block;

 	height:0;

 	line-height:0;

 	clear: both;

 	visibility: hidden;

 }

 .clearfix{

 	zoom: 1;     /* 为了兼容IE浏览器 */

 }
```
  5. 推荐：使用伪元素清除浮动②
```
 .clearfix:before,.clearfix:after {

 	content: "";

 	display: table;

 }

 .clearfix:after { clear: both; }

 .clearfix{

 	*zoom:1;/*IE/7/6*/

 }
```
overflow 的使用

overflow: visible/hidden/scroll/auto

定位(position)

静态定位(static): 元素标准流的显示方式

绝对定位(absolute)

 1. 当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

 2. 如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

 3. 如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

 4. 给盒子设置了绝对定位，该盒子不占位置（脱标）

 5. 行内元素转化为行内块元素

 6. 绝对定位的儿子，无视参考的那个盒子的padding

相对定位(relative)：微调元素。做绝对定位的参考，子绝父相

 1. 元素设置了相对定位后占原来的位置（没有脱标）

 2. 设置相对定位以自己的位置为参照设置位置

 3. 相对定位不能进行元素的模式转换

 4. 子绝父相（子元素设置绝对定位，父元素设置相对定位）（子绝父绝的其他情况也是可以的）

固定定位(fixed)： 将元素定在浏览器窗口，屏幕滚动也不会移动

 1. 固定定位不占位置（脱标）

 2. 将行内元素转化为行内块元素

 3. IE6不兼容。

IE浏览器兼容问题
1. IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
  
  解决办法：将盒子的字号，设置小（小于盒子的高），比如0px
```
 height: 4px;

 _font-size: 0px;
```
2. IE6留了一个后门，就是只要给css属性之前，加上下划线，这个属性就是IE6认识的专有属性
3. IE6不支持用 overflow:hidden; 来清除浮动,但支持使用 overflow:hidden;来将溢出盒子的border的东西隐藏
  
  解决办法：在后面追加一条 _zoom:1;,_zoom:1;能够触发IE6浏览器专有的hasLayout机制。
```
 overflow: hidden;

 _zoom:1;
```
4. IE6双倍 margin 的bug
  1. 当出现连续浮动的元素，margin和浮动方向相同时，队首的元素，会双倍marign
```
 解决办法

 1. 使浮动的方向和margin的方向相反

 2. 使用hack（没必要，不能惯着这个IE6）

    单独给队首的元素，写一个一半的_margin
```
5. IE6的3px的bug
  1. 当子盒子使用 margin-right 踢了父盒子时， margin-right 会多出3px
  2. 当出现这个问题，说明你的代码不标准，因为不允许子盒子使用 margin-right 踢父盒子

Chapter5

标准流下的盒子（必须有明确的width）居中显示： margin: 0 auto;

定位的盒子居中显示（重要）：

 .father {

 	position: relative;

 }

 .child {

 	width: (xxx)px;

 	height: 100px;

 	position: absolute;

 	left: 50%;

 	margin-left: -(xxx)px;

 }

标签包含规范

 1. div可以包含任何标准流下的元素

 2. p标签中不能包含div 和 标题标签 及列表标签。

 3. 标题标签可以包含其他标签。

 4. 行内元素最好不要包含其他标签。

规避脱标流

 1. 网页布局过程中，能用标准流布局就用流布局。

 2. 标准流不能解决用浮动

 3. 浮动不能解决用定位

 4. margin-left: auto;  子盒子会被挤到右边

    margin-right: auto; 子盒子会被挤到左边

    可以将盒子自动冲到另一边。

图片与文字垂直对齐
1. 每一种inlne-block元素，都有一个默认的 vertical-align: baseline
  
  <img>属于行内元素，但在表现上更倾向于 inline-block
2. 使用 vertical-align: middle; 可以将图片与文字垂直对齐
3. vertical-align 与 inline-block 更搭配
CSS可见性（隐藏的三种方式）：
1. overflow: hidden 将超出部分进行隐藏
2. display: none; 将元素隐藏后不占位置
3. visibility: hidden; 将元素隐藏后占原来的位置

logo优化（内容移除文字）

 1.  <div>

 		文字

 	</div>

 	设置div样式

 	div {

 		height: 0;

 		width: 200px;

 		padding-top: 100px;

 	 	overflow: hidden;

 	}

 2.  <a href="#">文字</a>

 	a {

 		display: inline-block;

 		width: 200px;

 		height: 200px;

 		text-indent:-9999em;

 	}

精灵图/雪碧图(spirit.png)：减少了http请求
1. 是一种处理网页背景图像的方式。精灵图也是一种背景图片
2. 精灵图的使用
```
 1. 使用fw一定要用打开的方式打开精灵图

 2. 使用精灵图作为背景图片的时候，常与background-position配合使用
```
3. 制作精灵图步骤：
  1. 新建，选择透明文档
  2. 右下角，样式，选择塑料样式
  3. 制作，另存为png格式即可

CSS进阶

Chapter1

鼠标样式
1. cursor: pointer 鼠标变成小手
2. cursor: default; 小白
3. cursor : move; 移动
4. cursor : text ; 文本输入
a无所不能，里面什么都可以放
透明

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性
1. opacity: 0.5; （默认值为1）
  1. 让盒子半透明,里面的内容也半透明
  2. 指定不透明度。从0.0（完全透明）到1.0（完全不透明）
  3. IE不兼容，使用滤镜filter: alpha(opacity=50);
2. background: rgba(0,0,0,0.5);
  1. 让盒子背景半透明,里面的内容不透明
  2. 指定不透明度。从0.0（完全透明）到1.0（完全不透明）

CSS学习笔记的更多相关文章

HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
CSS学习笔记：溢出文本省略（text-overflow）
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

深入浅出设计模式——状态模式（State Pattern）
模式动机在很多情况下,一个对象的行为取决于一个或多个动态变化的属性,这样的属性叫做状态,这样的对象叫做有状态的 (stateful)对象,这样的对象状态是从事先定义好的一系列值中取出的.当一个这样的 ...
【iCore2 双核心板视频教程一】iM&lowbar;LAN 100M 以太网模块UDP例程（包含视频教程）
============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...
查看Linux软件信息
查看系统发型版本 1. 对于linux系统而已,有成百上千个发行版.对于发行版的版本号查看方法如以centos为例.输入lsb_release -a即可该命令适用于所有的linux,包括Redha ...
Ⅸ&period;spring的点点滴滴--IObjectFactory与IFactoryObject的杂谈
承接上文 ObjectFactory与IFactoryObject的杂谈 .net篇(环境为vs2012+Spring.Core.dll v1.31) public class parent { pu ...
结构型模式(Structural patterns)-&gt&semi;外观模式(Facade Pattern)
动机(Motivate): 在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着子系统的变化而变化.那么如何简化客户程序与子系统之间的交互接口?如何将复杂系统的内部子 ...
git程序多版本维护方案
目前所在公司开发的系统为一个基础版本(通用版)包含了行业内一些基础功能实现,后期根据不同厂家进行定制版的开发,考虑独立项目的话代码维护不太方便,并且如果通用版本有变动的话,其他定制版本也都需要进行变动 ...
mysql node
mysql8.0版本报错:Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol req ...
error MSB8020 问题解决
产生原因: 1.vs 版本过低 2.项目平台工具选择不正确解决方案: 1.安装VS2015以上的版本 2.选择项目属性,修改平台工具,选择当前版本可用的工具. 具体步骤:右键点击你的项目,选择 Pr ...
MT【254】值域包含值域
已知函数$f(x)=x-\dfrac{1}{1+x},g(x)=x^2-2ax+4,$若对任意$x_1\in[0,1]$,存在$x_2\in[1,2]$,使得$f(x_1)=g(x_2)$,则实数$a ...
JAVA方法调用中的解析与分派
JAVA方法调用中的解析与分派本文算是<深入理解JVM>的读书笔记,参考书中的相关代码示例,从字节码指令角度看看解析与分派的区别. 方法调用,其实就是要回答一个问题:JVM在执行一个方法 ...