css基础知识---css定位、弹性布局、伪元素、颜色

曹贼大哥

已于 2022-03-19 14:02:39 修改

阅读量1k

点赞数 1

分类专栏： css基础文章标签： css 前端

于 2022-03-19 10:26:29 首次发布

本文链接：https://blog.csdn.net/weixin_59101740/article/details/123589850

版权

css基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

应用：利用::before或::after实现三角形

文档流

HTML页面的解析过程
- 标签是从第一行开始解析，并显示在页面上。
- 代码上是从上往下，标签内部是从左往右依次进行显示
标准页面显示的默认顺序就是文档流。从上往下，内部从左往右、
脱离文档流
- 指的设置了浮动或非默认定位的标签会从文档流中脱离出来，可以理解悬浮在文档流之上，单独的进行定位。文档流中其他的标签会占领原本定位标签所占的空间。

定位的概念

指通过设置css中的position属性来完成页面标签特殊的位置的设置。特殊的位置是指比如固定到页面是上、多个标签的之间的覆盖、非常规标签的位置等
定位主要内容
- 通过设置positioncss属性可以让该HTML标签具有指定的定位属性，目前定位类似一共分为4种，不通过的定位类型带来的效果是不一样的。
定位分类
- 静态定位(默认定位)-static：指HTML标签按照从上往下，从左往右依次排列，即默认布局排列。
- 固定定位-fixed:指的是设置固定定位的标签会固定在页面的某个位置.
- 绝对定位(absolute)
- 相对定位(relative)

语法

选择器{
position:static(默认) | fixed | absolute | relative;
}

固定定位

概念：是指设置position为fixed的标签。
特点
- 固定定位的标签会固定在页面上
- 固定的位置默认在原来的位置上，但可以通过设置top、left、right、bottom等四个附加的css属性来确定位置
- 设置固定定位之后，默认的宽度将不再生效，需要手动设置尺寸。
- 其他的非定位标签会认为固定定位的标签不存在页面上，会占领原来固定定位标签的所在空间
附加属性
- top：指的是标签顶部距离页面顶部之间的距离
- left：指的是标签左边距离页面左边之间的距离
- right：指的是标签右边距离页面右边之间的距离
- bottom：指的是标签底部距离页面底部之间的距离
- 注意：一般水平和垂直方向只设置其中一个。left的优先级大于right，top的优先级大于bottom

例子

选择器{
position:fixed;
top:20px;
left:300px;
}

绝对定位

概念：指position为absolute的标签。绝对定位可以理解为非固定在页面的固定定位。
内容：绝对定位的标签相对于已定位的最近的父标签来进行定位。定位可以借助top、left、right、bottom等属性。
特点
- 设置了绝对定位的标签会相对于已定位的最近父标签或页面进行参考定位。
- 可以使用top、left、right、bottom等属性。
- 脱离文档流，可能会覆盖其他标签。
语法
```
选择器{
position:absolute;
}
```
应用
- 去实现非常规的标签的定位。比如在标签之上显示另一个标签
  - 例子：百度的搜索框中的照相按钮
不便之处：
- 使用绝对定位之后，因为脱离文档流的原因，其他标签会受到影响导致了页面布局可能会乱。

相对定位

概念：指position为relative的标签。相对定位的标签是指仍留在文档流中，但可以借助top等四个css属性相对于原来自身所在的位置上完成移动。
内容：相对定位的标签是相对于自身所在的位置上进行移动（通过top等4个属性来进行移动）
语法
```
选择器{
position:relative;
}
```

绝对定位技巧：子绝父相

子标签是显示在父标签的空间内，可以使用该技巧。
内容：该子标签设置为绝对定位，父标签为相对定位
好处：子标签相对于父标签进行定位。

设置层级关系

伪标签选择器

选择器	描述	CSS支持版本
`::first-letter`	找到的指定标签的第一个字符添加样式	1
`::first-line`	找到指定的标签的第一行添加样式	1
`::selection`	找到鼠标选中的区域添加样式	3
`::before`	在指定的标签内容之前添加一块行内标签渲染区域	3
`::after`	在指定的标签内容之后添加一块行内标签渲染区域	3

应用：利用::before或::after实现三角形

概念：非默认定位标签之间会有一个显示的优先顺序。默认情况下是后面的非默认定位标签优先级会高一些，也就是说后面的非默认定位标签会覆盖前面的非默认定位的标签。
解决：css提供了z-index属性来设置非默认定位标签的显示顺序。即确定标签之间的层级关系
语法
```
选择器{
z-index:数字
}
```
- 默认数字为0，数字越大，层级越大。即一个数字为1的将显示在数字0的上面。
注意点
- z-index只针对非默认定位标签。普通文档流默认定位标签设置无效
CSS伪元素

目录
伪标签选择器
::before和::after的应用
- 三角形
概念：指可以在HTML标签中通过css代码添加一块渲染区域，该区域可以单独设置样式
::before
- 概念：可以利用css实现在标签内容的开头添加内容并设置css
- 语法
```
选择器::before{
content:"你需要添加的内容";

}
```
- 特点
  - ::before必须要配合content一起使用
  - 添加的内容会被作为该标签的一个行内子标签存在。
  - 可以使用css来设置生成的行内子标签
::after
- 概念：可以利用css实现在标签内容的结尾添加内容并设置css
- 语法
```
选择器::before{
content:"你需要添加的内容";

}
```
- 特点
  - ::after必须要配合content一起使用
  - 添加的内容会被作为该标签的一个行内子标签存在。
  - 可以使用css来设置生成的行内子标签
::before和 ::after的区别
- before是在开头添加，而::after是在末尾开始添加
流程
- ::before和::after 先添加空的内容并设置宽高为0（非行内标签或绝对定位）
- 设置一定的border并设置为透明色
- 将某一边border设置颜色

弹性布局

弹性布局的概念

背景：
- 在完成页面布局的过程中，遇到的不方便的地方
  - 标签的水平垂直居中
  - 缺乏自适应
  - 标签之间的对齐
  - …
弹性布局
- 是指利用弹性容器来进行页面的部分布局，能够对浮动布局中需要适应的部分进行优化。能够实现布局自适应效果
- 核心：设置弹性容器以及弹性容器内部的弹性项目并使用专属的css属性完成布局。
- 好处
  - 能够实现自适应
  - 解决标签的对齐问题
- 使用弹性布局
  - 给某个标签（一般是指装内容的盒子)通过display:flex;或display:inline-flex来将该标签设置为弹性容器。
    - 弹性容器里的所有直接子标签会自动作为该容器下的弹性项目，每个直接子标签就是一个弹性项目
  - flex和inline-flex的区别
    - 都是用于将某个标签设置为弹性容器。只不过对弹性容器的兄弟标签而言，flex会表现作为一个块级兄弟标签。而inline-flex会表现为一个行内块兄弟标签。
- 弹性容器的默认表现效果
  - 所有的弹性项目默认会同行显示
  - 弹性项目会随着弹性容器的宽度变化而进行收缩
  - 弹性容器的高度默认会被弹性项目撑开。弹性项目如果没有设置高度，也一样高度默认等于弹性容器的高度。如果弹性容器和弹性项目都没有设置高度，那么无论是弹性项目或容器高度是由内容撑开。
  - 默认主轴是水平，弹性项目默认是从左往右依次排列

弹性布局中的主轴和侧轴

弹性容器默认情况下，会沿着主轴依次排列弹性项目，同时也会在主轴上有自适应效果。侧轴是主轴的垂直方向
弹性容器的主轴和侧轴是由flex-direction属性来决定的

弹性布局的基础属性

弹性容器
- flex-direction
- flex-wrap
- justify-content
- align-items
flex-direction
- 概念：决定弹性容器的主轴方向。默认为row,及水平，从左往右
- 语法
```
选择器{
flex-direction: row| row-reverse |column |column-reverse;
}
```
  - row:以水平为主轴，竖向为侧轴，并且是从左往右排列弹性项目。
  - row-reverse:以水平为主轴，竖向为侧轴，并且是从右往左排列弹性项目。
  - column:以竖向为主轴，水平为侧轴，并且是从上往下排列弹性项目。
  - column-reverse:以竖向为主轴，水平为侧轴，并且是从下往上排列弹性项目。
flex-wrap：是否允许弹性项目换行，默认不换行
- 语法
```
选择器{
flex-wrap:nowrap | wrap;
}
```
  - nowrap:默认不换行
  - wrap:换行
justify-content：设置主轴上富裕空间的处理方式。富裕空间即剩余的空间
- 语法
```
选择器{
justify-content:flex-start | flex-end | center | space-between |space-evenly |space-around;
}
```
  - flex-start：默认值，将富裕空间放在所有弹性项目之后
  - flex-end：将富裕空间放置所有弹性项目之前
  - center：将弹性项目在主轴方向上居中
  - space-between：首尾弹性项目紧靠弹性容器，中间均分富裕空间
  - space-around：每个弹性项目两侧均分主轴上的富裕空间
  - space-evenly：每个弹性项目的之间的间距均分，包含首尾与弹性容器的间距。需要浏览器保持最新
align-items：设置侧轴上富裕空间的处理方式
- 语法
```
选择器{
align-items: flex-start(默认) | flex-end | center | stretch;
}
```
  - stretch:当弹性容器侧轴上没有设置尺寸时，弹性项目会自动拉伸撑满弹性容器。
  - center:每行弹性项目上下均分,在每行中弹性项目是居中的
  - flex-start:当弹性项目设置了高度时的默认值,将侧轴上的富裕空间均分在每行弹性项目之后,默认
  - flex-end:当弹性项目设置了高度时的默认值,将侧轴上的富裕空间均分在每行弹性项目之前

弹性布局的应用

小盒子在大盒子中进行水平、垂直居中
- 将大盒子作为弹性容器
- 给大盒子设置主轴和侧轴的富裕空间处理方式都为center
```
选择器{
display: flex;
justify-content: center;
align-items: center;
}
```

弹性空间

概念：指弹性项目处理富裕空间的另一种方式。会按照指定的弹性因子将富裕空间分配到弹性项目中。
内容：可以给每个弹性项目设置弹性因子，css属性：flex-grow
语法：
```
选择器{
flex-grow:数字;
}
```
- 数字决定了该弹性项目分配的数额。数字越大，分配的越多。默认为0
注意
- 给弹性项目设置的css属性
- 弹性项目会根据弹性容器的宽度自动决定显示多少个弹性项目
  - 判断弹性容器的宽度
总结：
- 能够让弹性布局有更好的适应性以及更好的用户体验

收缩因子

概念：指的是弹性项目不换行的情况下，用减少弹性项目的宽度的方式来应对弹性容器宽度的减少。
语法
```
选择器{
flex-shrink:数字;
}
```
注意：
- 给弹性项目设置的css属性。默认数字为1，平均减少。
- 数字越大，减少的越多

显示顺序

概念：可以给弹性项目设置order属性来决定某个弹项目的显示顺序。
语法
```
选择器{
order:数字;
}
```
注意
- 数字越大，显示的顺序越靠后，数字越小，显示的顺序越靠前。
- 如果有弹性项目的order是一样的，那么按照代码的先后顺序来显示。
- order数字默认为0.

其他属性

flex-basis:
- 概念：用于设置弹性项目的默认宽度。
- 语法
```
选择器{
flex-basis:宽度或百分比;
}
```
- 跟width的区别
  - 如果同时存在的情况下，使用flex-basis属性
align-self:
- 概念：当同一行存在高度不一的弹性项目时，可以指定某个弹性项目的对齐方式。
- 语法
```
选择器{
align-self:flex-start(默认) | flex-end | center | stretch;
}
```

flex:
- 概念：这是一个复合属性，可以同时设置flex-grow、flex-shrink、flex-basis这三个属性
- 语法
```
选择器{
flex: flex-grow flex-shrink flex-basis;
}
```
- 快捷写法
```
选择器{
flex:auto; // flex: 1 1 auto;
flex:1;// flex: 1 1 100%;
}
```
  CSS 颜色
  
  目录
- css支持的颜色格式
- rgb
- rgba
- 十六进制颜色表示
- CSS支持的颜色
- 目前CSS官方支持的颜色格式有以下3种
  - 颜色单词
  - rgb/rgba
  - 十六进制
- 颜色单词
- 一般常见的颜色单词会分三种。比如blue，有lightblue、blue、darkblue等。
- rgb
- 概念：以三原色为基础以及设置对应颜色的饱和度来生成不同的颜色。
- rgba
- 概念：在rgb的基础之上添加了透明度的支持(alpha)
- 语法
```
选择器{
color:rgba(红色的饱和度,绿色的饱和度,蓝色的饱和度,透明度)
}
```
  - 透明度是0~1之间的数字，0是完成透明，1是完全不透明
- 十六进制
- 概念：以#开头并配合a~f以及0-9来生成对应的颜色。
- 语法
```
选择器{
color:#000000;//表示黑色
color:#000;//表示黑色
color:#fff;//表示白色
}
```
- 语法
```
选择器{
color:rgb(红色的饱和度,绿色的饱和度,蓝色的饱和度);
}
```
  - 每种饱和度都是0~255之间的数字。不同的饱和度会搭配成不同的颜色
- 常用的颜色
  - 白色：rgb(255,255,255)
  - 黑色:rgb(0,0,0);
  - 红色:rgb(255,0,0)
  - 绿色:rgb(0,255,0);
  - 蓝色rgb(0,0,255)
  - 灰色：三个值都一样就是灰色。越接近0，灰度越深