css学习笔记

发表于 | 分类于

css学习笔记

简介

  • CSS是什么？
    CSS是Cascading Style Sheets的简称，中文称为层叠样式表。
  • 引入方式
  • 行内式
    行内式是在标签的style属性中设定CSS样式
    1
    <div style="..."></div>
  • 嵌入式
    嵌入式是将CSS样式集中写在网页的标签的标签对中。
    1
    2
    3
    4
    5
    6
    <head>
    ...
    <style type="text/css">
        ...此处写CSS样式
    </style>
    </head>
  • 链接式
    将一个独立的.css文件引入到HTML文件中，使用标记写在标记中。
    链接式会以网页文件主体装载前装载CSS文件。
    1
    2
    3
    4
    <head>
        ...
        <link href="My.css" rel="stylesheet" type="text/css">
    </head>

样式的应用顺序 :

- 行内>嵌入>链接
- 相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
- !important  指定样式规则应用最优先

常用选择器（Selector）

  1. 通用元素选择器
    *表示应用到所有的标签。
    1
    *{color: yellow}
  1. 标签选择器
    匹配所有使用 div 标签的元素（可以匹配所有标签）
    1
    div {color: yellow}

  1. 类选择器
    匹配所有class属性中包含Mycolor的元素。
    语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）

    1
    2
    .Mycolor {color: yellow}
    <h3 class="Mycolor">nick</h3>

    注意 : 一个元素的class可以有多个,每个class之间用空格隔开,如果后面的class力的样式与前面的有重复,那后面的会把前面的覆盖了

  2. ID选择器
    使用id属性来调用样式，在一个网页中id的值都是唯一的
    语法：#ID名{样式}（ID名不能以数字开头）
1
2
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>
  1. 伪类选择器：
    1. link、hover、active、visited
    • a:link（未访问的链接状态）,用于定义了常规的链接状态。
    • a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
    • a:active（在链接上按下鼠标时的状态）。
    • a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
1
2
3
4
5
6
a:link{color: black}
a:hover{color: yellow}
a:active{color: blue}
a:visited{color: red}
 
<a href="#">Nick</a>
----------
2. before、after
- P:before在每个p元素的内容之前插入内容
- P:after 在每个p元素的内容之后插入内容。

1
2
3
4
5
6
7
8
9
10
11
 p {
    color: yellow;
}
p:before{
    content: "before...";
}
p:after{
    content: "after...";
}
 
<p> Nick </p>
6. 群组选择器

通过逗号的方式选择元素(选择到的是一组元素)

1
2
3
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

只要任意一个元素有相同的样式,那就可以用群组选择器放在一起,不过要用逗号隔开,不管他是id选择器,class选择器,标签选择器都可以

  1. 组合选择器

    1. 后代元素选择器

      1
      2
      3
      4
      5
      6
      7
      8
      div p {color: yellow;}
       
      <div>
       <p>Nick</p>
       <div>
          <p>Nick</p>
      </div>
      </div>

    2. 子元素选择器
      匹配所有div标签里嵌套的子P标签，之间用>分隔。

      1
      2
      3
      4
      5
      6
      div > p {color: yellow;}
       
      <div>
        <p>Nick</p>
        <p>Nick</p>
      </div>
3. 毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。

1
2
3
4
div + p {color: yellow;}
 
<div>Nick</div>
<p>Nick</p>
4. 属性选择器：
`.[title] & P[title]`
        设置所有具有title属性的标签元素

设置所有具有title属性的P标签元素

1
2
3
4
5
6
7
8
9
10
11
   [title]
{
    color: yellow;
}
p[title]
{
    color: yellow;
}
 
<div title>Nick</div>
<p title>Nick</p>

更多选择器详见文档

选择器优先级

- 优先级      按代码执行的顺序
- 选择器的优先级一致的情况下,谁在后谁的优先级就高
- 选择器的优先级不一致的情况下,会选择优先级高的
- 行间样式>id选择器>class(类)选择器>标签选择器>通配符选择器(*)

包含选择器的优先级
-  包含选择器的优先级取决与位置,谁靠后谁的优先级就高,会把前面的样式给覆盖了

属性（Selector）

  • 语法
    通过选择器选择要添加样式的元素,定义它的文字属性,属性的值为红色(特定属性的值可以是多个以一个空格隔开)
  • 继承
    子元素会从父元素继承属性
    1
    2
    h1 {color:red;}
    div {border: 1px solid #000000;}

属性参考手册

盒模型（Box Model）

盒子模型图示：

盒模型

1
2
3
4
5
#box {
    width: 70px;
    margin: 10px;
    padding: 5px;
}

标准盒模型大小计算: border+width/height+padding

  • 内填充(padding): 用于控制内容与边框之间的距离;
    父子级元素之间的距离,可以通过给父级加padding来设置

  • 外边距(margin): 用于控制元素与元素之间的距离;
    同级元素之间的距离,通过添加margin来设置

    • 一个参数，应用于四边。
    • 两个参数，第一个用于上、下，第二个用于左、右。
    • 三个参数，第一个用于上，第二个用于左、右，第三个用于下。
  • margin的问题
  1. margin传递(只有上下会传递左右不会传递)
    子级会把自己的margin-top与margin-bottom传递给父级
    解决办法:给父级加上一个边框(其中一个方法)
  2. margin上下叠压(只有上下会叠压,左右不会叠压)
    上边元素的margin-bottom与下边元素的margin-top叠在了一起(他会取大的值)
    解决办法:只用给一个元素设置margin就可以 (给一个设置为0就可以)

  • 怪异盒模型
    怪异盒模型出现的原因?
    ie6，ie7，ie8下文档头缺失(DOCTYPE)会触发怪异模式。

    怪异盒模型大小计算: width/height+margin(（即width已经包含了padding和border值）)

浮动(float)

  • 定义 使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来.
  • 值 left right none
  • 特征
    1. 块元素可以在一行显示
    2. 按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来
    3. 可以让行内元素支持宽高
    4. 脱离文档流
    5. 块元素的默认宽度会改变（包裹性）
      块元素不设置宽度，那宽度会自动变成内容所撑开的宽度。
    6. 父级高度塌陷（破环型）
      子元素有浮动后，那父级元素的高度不会自动撑开了。
    7. 换行符不会被解析成空格
      浮动后的元素就会脱离文档流了，那他就不属于文档流里的结构了，所以换行/空格都跟父级没关系了;
清除浮动
  1. clear 元素的某个方向上不能有浮动的元素
    left 元素的左边不能有浮动元素
    right 元素的右边不能有浮动的元素
    both 元素的两边都不能有浮动的元素
  2. 给父级添加高度
    有的时候是不能给父级添加高度的,所以这个方法用不了(父级没有高度的情况下)
  3. inline-block
    具有与上一个的清除浮动一样的总是,同时加了以后这个元素就没有办法居中了
  4. overflow:hidden;
    如果子级有定位的话,并且这个定位超出了父级的范围,那样的话就看不到了,所以不能加这个命令
  • after伪类清除浮动
  1. 空标签
    空标签是没有内容的,但是他的作用是用来清除浮动的,所以不复合行为,样式.结构相分离的标准
    ie6下标签是由个最小高度19px.解决后也会有2像素的偏差
  2. br清除浮动


    和上面的问题一样,不复合标准
  3. after伪类清除浮动(现在最主流的方法)没有不良问题
    1
    2
    3
    4
    5
    6
    .clearfix:after{
           content:``;
           display:block;
           clear:both;
    }
     <div 类 :"clearfix">

定位(position)

  • 默认值 statc 不定位

  • 相对定位
    position 定位

    • relative 相对定位
      通过以下四种属性进行定位： top right bottom left
    • 特点
      1. 只加相对定位,不设置元素移动的位置,元素和之前是没有变化
      2. 更具之间原来的位置计算移动的位置
      3. 不脱离文档流,元素移走以后,原来的位置还会被保留
      4. 加上相对定位后对原来的元素本身的特征没有影响
      5. 提升层级

  • 绝对定位

    absolute     绝对定位
    • 特点
      1. 完全脱离文档流
      2. 行内元素支持所有样式(与加上浮动或者inline-block以后的效果是一样的)
      3. 如果父级有定位,那位置会根据父级移动.如果父级没有定位,那位置根据可视区移动
        (一般情况下,要用到绝对定位的时候,都会给父级来一个相对定位)**

  • 固定定位
    fixed 固定定位

    • 特点
    1. 完全脱离文档流
    2. 行内元素支持所有样式
    3. 相对可视区来移动位置
    4. 提升层级
    5. 触发BFC

  • 层级

    在正常情况下层级的大小由顺序决定,后面的元素要比前面的元素的层级要高

    有定位元素的层级要比没有定位元素层级要高
    在都有定位的情况下,层级还是取决与书写顺序

    z-index 层级

    它的值是一个数字,数字越大层级越高(在同一个层里)

参考一: w3school
参考二: cnblogs/suoning