CSS-01

Kedaya
154 阅读6分钟

1. ⭐line-height(常用)

  • line-height用于设置文本的行高
    • 行高可以先理解为一行文字所占据的高度

image.png

  • 为什么文本需要行高?
    • 为了方便用户阅读，行于行之间有间距的时候，用户知道怎么阅读

image.png

  • 行高的严格定义:两行文字基线之间的间距
    • 基线: 与小写字母x最底部对齐的线

image.png

通过设置 line-height 达到居中效果的原理

image.png

实际效果

image.png

  • 如果块内只有一行文字，怎么实现居中？

image.png

`

2. font

image.png

image.png

  • 开发中经常性的写法
    • font: font-size/line-height font-family
    • font: "12px/1.5 "Microsoft" "YaHei"";

image.png

`

3. CSS 选择器

  • 认识伪类 重点:hover

image.png

  • 元素的状态理解

    • 鼠标放在元素上面的时候，就相当于选中状态，接下来有可能对该元素进行操作

  • 伪元素 ::before 和 ::after (常用)

    • 在元素的前面或者后面插入元素

一般插入方法

image.png

使用场景 在元素的前面或者后面都需要插入东西 特别是小图标元素

image.png

不用 ::before 和 ::after 的情况下插入元素 则需要一个个的拷贝

image.png

使用伪元素在元素前后插入东西(比如小图标)

image.png

可以发现通过 span 添加元素，中间有空格

image.png

  • 如何解决空格问题 将 span 和插入的内容放在一行即可 如果中间有换行符 则中间就会有空格
    • 解决办法 使 span 和文本置于一行 中间不能有换行符

image.png

image.png

⭐⭐⭐::before 和 ::after 更方便

  • 在使用伪元素的时候 content 不能省略

改进前

image.png

改进后

image.png

只需要在 class 后面多添加一个共有的 item 即可

image.png

::before 和 ::after 的常用的场景

image.png

image.png

image.png

  • 拓展知识点

后面的图片有两种 image.png

这时候添加两个 class   则需要通过 JS 进行判断使用哪个 class

image.png

  • 如何通过 JS 判断使用哪个 class

    • 思路: 数据是后端返回给我们的，返回给我们的时间有个特殊的字段，标明数据是不是 new 是不是 hot 新闻，在前端只需要根据返回的字段，决定要添加哪一个 class，此时的 class 就是动态的了，那么就会动态显示是 new 新闻还是 hot 新闻。

4. ⭐⭐⭐CSS 属性的特性 CSS继承-层叠-元素类型

⭐⭐⭐CSS的属性继承(必须要理解)

  • 元素与元素之间能够嵌套
    • 元素与元素之间能够嵌套

div 是 h1  p  span 标签的父元素

image.png

  • 如果想要给所有元素设置颜色为红色

第一种办法 代码太过冗余

image.png

第二种办法 复选择器

image.png

通过对 div 设置文字颜色为 red 子元素都会继承颜色属性

image.png

哪些属性拥有继承性

image.png

常见的属性继承(不用记) 多用

image.png

在浏览器可以观察到哪些属性是继承过来的

image.png

  • 继承过来的是计算值，而不是设置值(了解即可)
  •  -   ***em 相对于自身字体(父元素的字体),如果父元素没有设置字体大小，则是浏览器的字体大小(浏览器字大小默认是 16px)***

正常情况下 box 继承浏览器的 16px 设置的2em 之后是32px 那么 p 再继承32 设置的 2em 之后应该为      64px  但是结果并非是这样

image.png

此时的 p 内容依然是    32 px

image.png

因为继承过来的是计算值，所以继承过来的 box 计算之后的 32px

  • 强制继承(inherit) 不经常使用
    • 如果有的属性没有办法继承，比如说 border 边框没办法继承的话

灰色说明继承无效

image.png

添加 border: inherit 则可强制继承边框属性

image.png

image.png

5.⭐⭐⭐CSS 属性 层叠

image.png

只有一个 orange 才会生效

image.png

  • 选择器的权重

image.png

6. HTML 元素的类型

image.png

  • HTML 为什么要这么定义
    • 某些元素非常重要，会独占一行 -> 类型: 块级元素(block level) h元素/p/ div
    • 比如新闻标题，需要单独显示在一行，这样显示的很重要 块级元素 h/p/div
    • 有些元素，只是对内容的描述，不需要独占一行 所以就是 行内级 span/a/img/strong/i

image.png

image.png

7.⭐⭐⭐ CSS 属性 display

image.png

img 元素是行内替换元素 可以设置宽高

image.png

input 也是行内替换元素 也是可以设置宽高

image.png

  • inline-block
    • 块级元素独占一行，设置成 display:inline 之后就成了行内元素，不能设置宽高，所以需要设置display:inline-block 转换成行内块元素，既能和别的元素待在一行，也可以设置宽度高度

image.png

inline 不是很好用 设置宽度高度无效，设置 padding-top / padding-bottom 有特殊效果 使用时候需要注意

8. 编写 HTML 注意事项

  • 块级元素里面可以包含任何其他元素 特殊 p 标签 p 标签里面不能包含 div 不能包含 h1 image.png
  • 行内级元素中不要放块级元素 span 里面不能放 div 不能放 p 标签

9. 元素隐藏方法

image.png

  • display:none;

不占据空间

image.png

visibility:hidder visibility意思是可见的，能见的

依然占据空间

image.png

image.png

image.png

  • rgba 设置颜色，将 a 的值设置为0

image.png

image.png

image.png

image.png

image.png

10. CSS 样式不生效技巧

为什么设置的 css 样式不生效？(解决问题的思路)

image.png

11.⭐⭐⭐盒子模型

  • 认识盒子模型

    • 盒子模型内容
      • 块级元素的默认值是 width:auto并不是 width:100% auto 是交给浏览器决定
      • 由于默认值是width:auto，所以块级元素会占据一行
      • 图片的宽度默认值是根据图片的尺寸来决定的

  • min-width 和 max-width 常用在移动端

image.png

image.png

  • ⭐⭐内边距 padding

image.png

  • ⭐⭐外边距 margin

    • ⭐ margin上下会有折叠现象，左右没有折叠（上元素 margin-bottom:30px 下元素margin-top:30px 折叠之后会只间隔 30px）
    • margin主要用于元素与元素之间的距离 不再只针对盒子
    • width height padding border 都是针对盒子本身进行的操作

  • ⭐margin 和 padding 的对比

    • padding 更适合用于父子关系元素
    • margin 更适合用于兄弟之间元素

image.png

image.png

  • margin 一般是父子之间的传递

image.png

image.png

image.png

image.png

image.png

  • ⭐⭐⭐margin传递解决办法

image.png

给父元素添加 overflow: auto 触发 BFC

image.png

  • margin-bottom 传递问题(了解就行，很少遇到)

如果上面的 height 不写也是可以的，因为 height 的默认值为 auto

image.png

image.png

image.png

  • ⭐⭐⭐上下 margin 的折叠

image.png

为什么会发生折叠，有一种可能性是 W3C 在指定标准的时候，以为你多写是写错了

image.png

  • ⭐⭐⭐块级元素水平居中问题 给元素本身设置 margin: 0 auto;

  • ⭐盒子阴影 box-shadow

image.png

  • ⭐行内非替换元素的注意事项

image.png

image.png

padding 上下能给内容撑起开 但是不占据空间  肉眼看起来是有内边距 padding 的，但是不占空间，所以bbb能够紧挨着 span 元素

image.png

image.png

avatar
文章
阅读
粉丝