CSS学习笔记

2016年12月15日整理

CSS基础

Chapter1

在console输入escape("宋体")  ENTER
就会出现unicode编码
显示"%u5B8B%u4F53" 就是\5B8B\4F53font-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学习笔记

2016年12月15日整理

CSS基础

Chapter1

Chapter2

Chapter3

1. 行高

Chapter4

Chapter5

CSS进阶

Chapter1

个人收藏笔记记录

开通VIP