css单位

css单位是必须要写的，因为它没有默认单位。

相对单位：

px：最常用

em：印刷单位相当于12个点,一般都是首行缩进使用em,无论字号怎么变,都使用的是2em,缩进两个字符

其中

1
2
3
4
5
6
7
8
9
<div class="parent" style="font-size: 20px;">
  我是父盒子 (20px)
  <div class="child" style="font-size: 1.5em;">
    我是子盒子 (1.5 * 20 = 30px)
    <div class="grandchild" style="font-size: 2em;">
      我是孙子盒子 (2 * 30 = 60px)
    </div>
  </div>
</div>

%：百分比，相对周围的文字的大小

img

font字体属性：

1
2
3
4
5
6
7
8
p{
  font-size: 50px;    /*字体大小*/
  line-height: 30px;      /*行高*/
  font-family: 幼圆,黑体;   /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
  font-style: italic ;    /*italic表示斜体，normal表示不倾斜*/
  font-weight: bold;  /*粗体*/
  font-variant: small-caps;  /*小写变大写*/
}

行高line-height

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

对于单行文本想要实现居中，行高等于盒子高。

1
2
heighit:100px;
line-height:100px;

垂直方向对齐：

通过行高和容器高度相同来进行设置

1
2
height: 58px;
line-height: 58px;

vertical-align：middle属性：

vertical-align属性可用于指定行内元素（inline）、行内块元素（inline-block）、表格的单元格（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。

行内元素不能设置宽高,块级元素独占一行

而行内块元素既能设置宽高,也能并排.

字号、行高、字体三大属性,连起来写不常用,经常都是分开写

1
2
3
font: 加粗 字号/行高/ 字体
//font: 700 14px/24px "宋体";
//以上属性可以连写，但是至少要有字体和字号，否则相当于没写

字体加粗属性：

1
2
3
4
5
6
7
.div {
  font-weight: normal; /*正常*/
  font-weight: bold; /*加粗*/
  font-weight: 100;
  font-weight: 200;
  font-weight: 900;
}

文本属性：

  • text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线(只有none是常用的)可以给a标签去掉下划线使用
  • color:red; 字体颜色
  • text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify(两端对齐) 注意：如果我想让该元素使用这个属性，必须对它的父元素进行设置

那么就引出了如果想要给自己的元素设置,就是margin:0 auto;但是这个必须要设置宽度才能使用

overflow属性：（超出范围要怎么处理）只有hidden常用

  • visible：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
  • hidden：不显示超过对象尺寸的内容。//处理float浮动，父级元素出现高度塌陷

如图：

使用overflow:hidden; 就可以使用这个来进行：BFC，块级格式化上下文，解决塌陷问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 <style>
    .parent {
      border: 5px solid red;
      /* 父盒子，红色边框 */
      width: 300px;
      //此处既没有设置宽高，也没有overflow:hidden;
    }

    .child {
      float: left;
      /* 子盒子浮动 */
      width: 100px;
      height: 100px;
      background-color: gold;
    }
  </style>
</head>

<body>
  <div class="parent">
    <div class="child">我是浮动的</div>
  </div>

img

如果我给父元素加了overflow:hidden;就可以块级格式化上下文，清除浮动

img

  • auto：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
  • scroll：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 auto 属性相同。

background 的常见背景属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
background-color:#ff99ff; 设置元素的背景颜色。
background-image:url(images/2.gif); 将图像设置为背景。
//设置渐变属性
background-image: linear-gradient(方向, 起始颜色, 终止颜色);

//举例： background-image: linear-gradient(to right, red, orange, yellow, green, blue);
对于颜色来说，颜色不一定只有两个，可以有很多个，上面就可以实现彩虹渐变

background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
    no-repeat不要平铺；
    repeat-x横向平铺；
    repeat-y纵向平铺。
    
background-position:center top; 设置背景图片在当前容器中的位置。
background-size:属性
/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
background-size: cover;

/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */
background-size: contain;

选择器：

  1. 标签选择器：例如下面有个div盒子，在style属性中，直接写div{}
  2. id选择器：规定用#来定义

img

  1. 类选择器：用.来定义

img

对于id和类选择器：在css中，尽量选择类选择器，而id选择器是js使用的，js通过id属性获得标签，id选择器更加精确

后代选择器：

定义的时候用空格隔开，是父子级的关系，就比如

.class li a {

}这种

1
2
3
4
5
//p.mlz
<p class="mlz"></p>

 //p#mlz
<p id="mlz"></p>

并集选择器：

img

序选择器：

1
2
3
4
5
6
7
8
9
10
11
ul li:last-child {
      color: blue;
}

ul li:first-child() {
      color: blue
}

ul li:nth-child(3) {
      color: #fff;
}

伪类选择器：

根据不同的状态有着不同的表现形式

动态伪类：
  • :hover “悬停”：鼠标放到标签上的时候（最常用）
  • :active “激活”： 鼠标点击标签，但是不松手时。
  • :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

补充：scss嵌套写法，可以避免多次写同一个父级标签：如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.nav {
  background: #fff;

  li {
    display: inline-block;

    a {
      color: red;
      
      &:hover { // 这里用到了 & 符号，代表父级 a
        color: blue;
      }
    }
  }
}
超链接的四种状态：

要求背诵：

  • :link “链接”：超链接点击之前
  • :visited “访问过的”：链接被点过之后
  • :hover “悬停”：鼠标放在超链接上面的时候
  • :active “激活”： 鼠标点击但不松手

结构伪类选择器：（比序选择器范围更广）

含义是：可以匹配父级元素下的第几个E，如果是E标签，属性就生成，反之。

  • E:first-child 匹配父元素的第一个子元素E。
  • E:last-child 匹配父元素的最后一个子元素E。
  • E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
  • E:nth-child(odd) 匹配奇数
  • E:nth-child(even) 匹配偶数
  • E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。

css层叠性：

  1. 首先要计算权重：id选择器>类选择器（不仅仅是.操作符，动态伪类:hover，结构伪类E:first-child也是）>标签选择器（即就是范围越精确，权重越高）

权重高的会覆盖权重低的

  1. 当权重相同时候：就近原则，比如有上下两个，那么就按照第二个的属性来

开始时要比较选没选中，如下图，根本没有选中span标签

即使是选中了父级元素，但是因为没有直接选中子元素，那么子元素的权重直接为0，那么就是按照就近原则来（即使#box是id选择器，权重最高，但是我第一个选到了p标签，是离我的目标span标签更近的一个元素）

img

提升权重！important：（限制条件太多，一般不用，否则css会变得很乱）

适用选中的情况，虽然可以提升权重，但是涉及继承性，如果没有选中的话，即使添加，优先级也不是最高的

1
2
3
4
5
//正确写法
font-size:60px !important;
//错误示例
font-size:60px; !important;    不能把!important写在外面
font-size:60px important;      不能忘记感叹号

同时，！important不影响就近原则，即使使用，离得远的话也是无济于事，所以这个很麻烦，干脆就不用它了

盒子模型：

padding：

1
2
3
4
//顺时针，上右下左（top,right,bottom,left）
padding:30px 20px 40px 100px;
如果只写两个值：即就是上和下一组，左和右一组
对于三个值：顺序为：上，左和右，下

一些元素，自带的有padding，所以需要清除默认样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* {
    margin: 0;      /* 清除外边距 */
    padding: 0;     /* 清除内边距 */
    box-sizing: border-box; /* 核心：让 padding 不撑开盒子 */
}

/* 清除列表默认的小圆点 */
ul, ol {
    list-style: none;
}

/* 清除超链接默认下划线 */
a {
    text-decoration: none;
}

margin：

1
2
margin:0 auto;    //让这个div自己在大容器中的水平方向上居中。
text-align: center;  //让这个div内部的文本居中。

行内元素与块级元素的区别：

但是还有一种叫行内块元素，是特殊的，既有行内元素并排排列的性质，同时也可以设置宽高属性

例如