CSS学习笔记

时间 2019-11-19

标签 css 学习笔记栏目 CSS 繁體版

原文原文链接

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书写位置：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 { }html

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. 盒子嵌套，给父元素设置行高值，子元素的行高问题
行高能够实现继承
当父元素设置的行高值除不带单位状况下，都是先与父元素的文字大小相乘最后的结果，被子元素继承。
当父元素设置的行高值不带单位时，行高 = 子元素文字大小 * 行高值

表单优化写法：url

<!-- 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学习笔记

CSS学习笔记

2016年12月15日整理

CSS基础

Chapter1

Chapter2

Chapter3

1. 行高

Chapter4

Chapter5

CSS进阶

Chapter1