送报少年

CSS小记

2021/9/12 CSS

# 元素分类和一些css样式

# 元素分类

# 块级元素特点

<h1></h1>, <p></p>, <ol></ol>, <ul></ul>, <li></li>, <div></div>

  1. 无论宽度独占一行
  2. 可以设置高度，宽度，内外边距，默认宽度和父级一样宽
  3. 是一个盒子,里面可以放块级和行内元素
  4. 注意: 放文字的块级元素不能放块级元素如：(<p></p>, <h1></h1>)

# 行内元素特点

  1. 行内元素不能设置高度和宽度
  2. 行内元素的高度和宽度就是他内容本身的宽度和高度
  3. 行内元素只能容纳行内元素和文字
  4. 行内元素占一行
  5. 注意：<a></a>里面不能放<a></a>，但是能放块级元素

# 行内块元素特点

具有行内元素和块级元素的特点

  1. 可以设置高度和宽度
  2. 一行可以显示多个（多个标签之间有空格）
  3. 默认宽度是本身内容的宽度

# font的复合属性写法

font: initial 400 25px '微软雅黑'; 必须按照 font-style font-weight font-size font-family的顺序写，font-size font-family是必备的

# text文本样式

添加下划线 text-decoration: underline; 去掉下划线（a标签） text-decoration: none; 首行缩进（em单位是一个字符） text-indent: 2em;

# 伪类选择器

    <style>
      /* 未访问的链接 a:link  */
      a:link {
        color: #333;
        text-decoration: none;
      }
       /* 访问过的链接 a:visited  */
      a:visited {
        color: orange;
      }
      /* 鼠标经过的链接 a:hover  */
      a:hover {
        color: skyblue;
      }
      /* 处于活跃的链接 a:active (按下未弹起)  */
      a:active {
        color: pink;
      }
      /* 处于焦点时input:focus */
      input:focus {
        background-color: pink;
      }
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

必须按照上面的顺序

# a标签的常用写法

a {
  text-decoration: none;
}
a:hover {
        color: skyblue;
      }
1
2
3
4
5
6

# background-image

多用于小图片和特大图片，方便调位置

# background-position

  1. 参数可以为方位名词，不讲究顺序(center, left)
  2. 参数可以是具体位置(20px, 10px)先x后y
  3. 参数可以是混合单位(center, 40px)先x后y, 王者荣耀官网背景图片做法

# background-attachment

1.scroll跟随滚动 2.fixed固定

# background复合写法

无固定位置一般为color, url, repeat, position

# 行高的继承性

如果父元素指定了行高没带单位(1.5)那么它的子元素的行高就是子元素文字大小的1.5倍

# 内边距padding(margin)

特别注意跟3给值是上 左右 下， 跟4个值是 上 右 下 左 (顺时针)

# 块级盒子水平居中

margin: 0, auto 注意：块级盒子必须要有宽度

# 行内元素(行内块元素)水平居中

给父级元素设置text-align: center;

# 嵌套块元素塌陷(外边距合并)

对于两个嵌套关系的块元素，父元素又上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。

  1. 可以为父元素定义上边距
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow: hidden;

# 浮动的特性

  1. 脱离标准流(脱标)

  2. 浮动的盒子不再保留原先的位置

  3. 任何元素都能进行浮动，浮动后具有行内块元素的特征

    • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但浮动后大小根据内容来决定
    • 和行内块不同，浮动元素间没有缝隙

注意：浮动只影响后面的标准流

# 清除浮动(用于父盒子没有高度的情况)

由于父级盒子很多情况下，不方便给高度，但是，子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

  1. 隔墙法 给最后一个浮动的元素添加一个块级元素，设置它的属性clear: both;(不常用)
  2. overflow 给父盒子添加属性overflow: hidden
  3. 伪元素(单伪元素，双伪元素before，after) 给父盒子添加

# 定位

# 相对定位

  1. 移动位置参考点是 自己原来的位置
  2. 不脱标，继续保留原来的位置
  3. 最典型的应用是给绝对定位当爹

# 绝对定位

  1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
  2. 如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
  3. 绝对定位会脱标

# 子绝父相

因为父级需要占用位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

# 固定定位

  1. 以浏览器可视窗口为参照点移动元素

    • 跟父元素没有任何关系
    • 不随滚动条滚动

  2. 固定定位不占有原先的位置 固定定位也是脱标的，是一种特殊的绝对定位 特殊用法：固定在版心的右侧

    1. 让固定盒子left: 50%版心中间。
    2. 再用margin-left:版心宽度的一半距离。多走版心宽度的一半位置就可以让固定盒子贴着版心右侧对齐了

# 绝对定位和固定定位要居中的方法

  1. 让固定盒子left: 50%版心中间。
  2. 再用margin-left: 负的盒子宽度的一半距离。少走盒子宽度的一半位置就可以让盒子居中对齐了

# 绝对定位和固定定位也和浮动类似

  1. 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
  2. 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

# 注意事项

  1. 浮动只会压住标准流的盒子，不会压住标准流盒子里的文字
  2. 定位会

# z-index

注意：只有定位的盒子有这个属性

# css三角

div {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: pink;
  /* 盒子没有大小时，边框就是三角形，把需要的边框颜色显示出来 */
}
1
2
3
4
5
6
7

# 多余文字省略

/* 强行一行显示 */
white-space: nowrap;
/* 超出部分隐藏 */
overflow: hidden;
/* 文字用省略号代替超出部分 */
text-overflow: ellipsis;
1
2
3
4
5
6
Last Updated: 2021/12/19上午12:27:30