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

  1. CSS(cascading style sheet) 层叠样式表
  2. 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)

  3. 选择器

    1. 基础选择器:

      1. 标签选择器 p { }
      2. 类选择器 .classname { }

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

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

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

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

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

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

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

      3. id选择器 #idname { }

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

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

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

      4. 通配符选择器 * { }

        (基本不用,因为会选中所有标签,效率低下)

    2. 复合选择器 p.classname { }

      1. 标签指定式选择器/交集选择器

        p.classname { } &

        p#idname { }(一般写成 #idname { }

      2. 后代选择器

        div p { }

        标签之间必须属于嵌套关系

      3. 并集选择器/分组选择器

        div, p { }

    3. 选择器IE兼容问题

      1. IE6能够兼容: 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符
      2. IE7能够兼容: 儿子选择器div>p、下一个兄弟选择器h3+p
      3. IE8能够兼容: ul li:first-child ul li:last-child

Chapter2

  1. 标签的分类:

    1. HTML将标签分为容器级和文本级

      1. 文本级:p、span、a、b、i、u、em
      2. 容器级:div、h系列、li、dt、dd
    2. CSS将标签分为块级元素、行内元素和行内块元素

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

      1. 元素自己独占一行显示(默认有宽度);

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

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

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

      1. 元素在一行上显示

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

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

      1. 元素在一行上显示

      2. 可以设置宽度和高度

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

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

  2. 元素之间的转换

    1. display: inline
    2. display: block
    3. display: inline-block
  3. CSS特性

    1. 层叠性:层叠性是一种能力,就是处理冲突的能力。

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

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

    2. 继承性

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

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

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

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

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

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

      6. 特殊:

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

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

  4. 优先级(特定性、权重)

    1. 数值越大,特定性远大,规则就越特定
    2. 选择上了,数权重,(id的数量,类的数量,标签的数量)。

      如果权重一样,谁写在后面听谁的。

    3. 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。

      如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。

      !important > 行内式 > id > 类/伪类 > 元素名 > 认样式

      先按作者、读者、浏览器的顺序排列,然后如果作者跟读者出现同分数的,最后出现的规则越优先

    4. !important使用注意事项

      1. !important提升的是一个属性,而不是一个选择器
      2. !important无法提升继承的权重,该是0还是0
      3. !important不影响就近原则

        如果大家都是继承来的,!importan不能影响就近原则呢,应该按照“就近原则”来计算权重

      4. !important做网站的时候,不允许使用。因为会让css写的很乱
  5. 继承的权重为0,权重会叠加

Chapter3

1. 行高

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

    行高、字号,一般都是偶数

  2. 行高的作用:

    当行高值为父容器的高度时,可以让父容器中的文字垂直显示

  3. 行高的单位:

    1. 单独给一个元素设置行高

    当给一个独立的元素设置行高值的时候,除了以px为单位的行高值与文字大小无关,其他都与文字大小有关(与文字大小的积)

    1. 盒子嵌套,给父元素设置行高值,子元素的行高问题

    行高可以实现继承

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

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

  4. 表单优化写法:

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

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

    用户名:

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

    什么表单元素都有label

  5. 继承的盒子在父盒子宽度范围内,padding值不会影响该盒子大小。(box-sizing: content-box时)
  6. 外边距合并问题:

    1. 当两个盒子垂直显示的时候,外边距以设置的最大值为准
    2. 盒子嵌套(外边距塌陷):

      1. 给父盒子设置边框

      2. 给父盒子设置overflow:hidden;,但会触发BFC(Block formatting contexts)

  7. 行内元素不要给上下的margin和padding

    1. 上下的margin和padding会被忽略
    2. 左右margin和padding会起作用
  8. margin最好用于兄弟关系之间,padding最好用于父子关系之间
  9. a:linka:visited都是可以省略的,a标签涵盖了link、visited的状态

    Chapter4

  10. 标准流(文档流)

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

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

    2. 高矮不齐,底边对齐

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

  11. 三种脱标方法

    1. 浮动
    2. 绝对定位
    3. 固定定位
  12. 浮动 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*/

        }

  13. overflow 的使用

    overflow: visible/hidden/scroll/auto

  14. 定位(position)

    1. 静态定位(static): 元素标准流的显示方式
    2. 绝对定位(absolute)

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

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

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

      4. 给盒子设置了绝对定位,该盒子不占位置(脱标)

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

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

    3. 相对定位(relative):微调元素。做绝对定位的参考,子绝父相

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

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

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

      4. 子绝父相(子元素设置绝对定位,父元素设置相对定位)(子绝父绝的其他情况也是可以的)

    4. 固定定位(fixed): 将元素定在浏览器窗口,屏幕滚动也不会移动

      1. 固定定位不占位置(脱标)

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

      3. IE6不兼容。

  15. 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

  1. 标准流下的盒子(必须有明确的width)居中显示: margin: 0 auto;
  2. 定位的盒子居中显示(重要):

    .father {

    position: relative;

    }

    .child {

    width: (xxx)px;

    height: 100px;

    position: absolute;

    left: 50%;

    margin-left: -(xxx)px;

    }

  3. 标签包含规范

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

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

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

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

  4. 规避脱标流

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

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

    3. 浮动不能解决用定位

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

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

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

  5. 图片与文字垂直对齐

    1. 每一种inlne-block元素,都有一个默认的 vertical-align: baseline

      <img>属于行内元素,但在表现上更倾向于 inline-block

    2. 使用 vertical-align: middle; 可以将图片与文字垂直对齐
    3. vertical-aligninline-block 更搭配
  6. CSS可见性(隐藏的三种方式):

    1. overflow: hidden 将超出部分进行隐藏
    2. display: none; 将元素隐藏后不占位置
    3. visibility: hidden; 将元素隐藏后占原来的位置
  7. 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;

    }

  8. 精灵图/雪碧图(spirit.png):减少了http请求

    1. 是一种处理网页背景图像的方式。精灵图也是一种背景图片
    2. 精灵图的使用

      1. 使用fw一定要用打开的方式打开精灵图

      2. 使用精灵图作为背景图片的时候,常与background-position配合使用

    3. 制作精灵图步骤:

      1. 新建,选择透明文档
      2. 右下角,样式,选择塑料样式
      3. 制作,另存为png格式即可

CSS进阶

Chapter1

  1. 鼠标样式

    1. cursor: pointer 鼠标变成小手

    2. cursor: default; 小白
    3. cursor : move; 移动

    4. cursor : text ; 文本输入
  2. a无所不能,里面什么都可以放
  3. 透明

    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(完全不透明)

        

分享给朋友:
您可能感兴趣的文章:
随机阅读: