css的一些小知识 | 青训营笔记

用户441171082722

2022-07-26 66 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第2天

今天来浅谈css的一些知识

1. 使用css样式的三种方法

内部式

<head>
    <style>
        .one {
            width: 100px;
            height: 200px;
        }
     </style>
 </head>
复制代码

注: 内部式写在当前页面的<head>中的<style>中,且只能对当前页面有效果，复用性较差。

内联式
```
<p style="font-size: 20px; color: blue;">111</p>
复制代码
```
注: 内联式只对当前标签有效果,一些简短的样式修改可以使用内联式，但不推荐大规模使用,复用性差。
引入式
```
<link rel="stylesheet" href="./styles.css">
复制代码
```
注: 引入式是通过link引入css文件,在href中写入你要使用的css文件的路径即可,且复用强,让你的页面简洁。

2. css的原理

9df3a4c09d1546b09150065e338ed509_tplv-k3u1fbpfcp-zoom-in-crop-mark_3024_0_0_0.webp

3. css的选择器

通配选择器 * 可对全局的样式进行操作
id选择器 <p id="one></p> 使用时#one直接标签名
标签选择器 p{ }
类选择器 <p class="one></p> 使用时.one
属性、伪类、伪元素、选择器组合方式可到css使用手册(可点击)自行了解

4. css的盒子模型

当box-sizing：content-box时，这种盒子模型成为标准盒子模型

width = 内容（content）的宽度

height = 内容（content）的高度

增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

width = border + padding + 内容（content）的宽度

height = border + padding + 内容（content）的高度

设置 padding 、border 后，真正宽度或高度就会改变。

5. css的一些垂直居中方法

felx布局

    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
复制代码

margin

    margin: auto
复制代码

line-height

    line-height: 父容器的高度
复制代码

定位position

position：static没有定位，是默认值
position:fixed是相对于浏览器窗口定位的，不会随着滚动条滚动而滚动(粘性定位)
position:absolute是基于不为static的父元素进行定位的，脱离了标准流(绝对定位)
position:relative是基于自身定位，没有脱离标准流，仍然占据空间(相对定位)

等等还有很多方法，上面这些是我在写项目时经常使用的，四和五可以好好了解一下，都是很实用的知识，像实现垂直居中有时面试时会问到，最少答两个及以上。