前端入门一之CSS知识详解

前言

CSS是前端三件套之一，在MarkDown中也完美兼容这些语法；
这篇文章是本人大一学习前端的笔记；
欢迎点赞 + 收藏 + 关注，本人将会持续更新。

文章目录

- - Emmet语法：
  - CSS基本语法：
  - - css语法结构只有3种：选择器、样式属性和值
    - css代码风格：
  - 添加css的方法：
  - CSS选择器：
  - - 基础选择器：
    - 复合选择器：
  - 字体属性
  - - 字体复合属性：
  - 背景颜色属性：
  - - 背景复合属性：
  - 文本属性：
  - CSS三大属性
  - - 1、层叠性
    - 2、继承性
    - 3、优先级
  - 盒子模型：
  - - 网页布局本质
    - - 网页布局过程
      - 网页布局三大核心
    - 盒子模型组成
    - 边框：
    - - 边框使用
      - 边框会影响盒子实际大小
    - 内边框：
    - - 内边距的影响：
    - 外边距：
    - 一些放在css首位的选择器：
    - 圆角边框：
  - 简单盒子、文字阴影：
  - - 盒子阴影：
    - 文字阴影：
  - 浮动：
  - - 标准流：
    - 浮动：
  - 块元素、行内元素、行内块元素：
  - - 块元素：
    - 行内元素：
    - 行内块：
    - 元素显示模式转换：
  - 定位
  - - - 边偏移
      - 静态定位（了解）
      - 相对定位（重要）
      - 绝对定位（重要）
      - 子绝父相
      - 固定定位（重要）
      - 粘性定位（了解）
    - display 属性
    - opacity属性
    - z-index属性

Emmet语法：

生成标签，如：div + tab
如果想同时生成多个标签，如：div*3
如果有父子级标签，如：ul > li
兄弟关系标签，如：div + p
生成含有类名，如：.demo（默认是div） p.red
生成含有顺序，如：div$*3
如果想在标签内有内容{ }表示

CSS基本语法：

css语法结构只有3种：选择器、样式属性和值

css代码风格：

样式格式：重点，展开格式
样式大小书写：全部用小写
空格规范：
- 空格

添加css的方法：

链接外部样式
内部样式表：控制一个页面

导入外部样式表

第一步建立一个css
<style><link rel="styleheet" href="链接">
</style>

内嵌样式：控制一个

CSS选择器：

分为：基础选择器和复合选择器

基础选择器：

标签选择器
类选择器（class 点开头)，一个html标签中可以有多个
多类选择武器
id选择器（#名），一个html标签中只能有一个
通配符选择器（*）

复合选择器：

后代选择器
子代选择器（选择最近一个子元素）
- 元素1(父)>元素2(儿)
并集选择器
- 元素1，元素2
伪类选择器
- 如：a： link
- a: visited
- a: hover
- a: active(也是规范的顺序)

字体属性

font-family：
font-size：
font-style：italic normal（默认）
font-weight：400 700
font-variant(小写转为大写)

字体复合属性：

font：font-style fone-weight font-size/line-height font-family

必须保留size和family
顺序一定要严格

背景颜色属性：

background-color：
- background-color: 颜色取值
background-image:
- background-image: url(图像地址)
background-repeat：
- background-repeat: 取值
- 取值：（默认）no-repeat repeat-x repeat-y
- background-attachment：（固定或者滚动）
- background-attachment：scroll/fixed
background-position：
- background-position：位置取值
- 位置取值：数值和方向位置
  - 注意：数组一定是 X Y结构
background: rgba(0,0,0,0.5); 必须四个值

背景复合属性：

background: 背景颜色 背景图片 背景重复 背景附件 背景位置

顺序随意

文本属性：

color：
text-align:
- 值：center left right
text-decoration：
- none（默认） underline（下划线） overline（上划线） line-through（删除线）
text-indent：
- px单位
- em单位
行间距：line-height

CSS三大属性

1、层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式，不会冲突

在这里插入图片描述

2、继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

在这里插入图片描述

3、优先级

在这里插入图片描述

注意点：

权重是有4组数字组成,但是不会有进位。
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
继承权重为0.无论父类有多大权重

权重叠加：

复合选择器，会有权重叠加

div ul li---------> 0,0,0,3
.nav ul li---------> 0,0,1,2
a:hover--------->0,0,1,1
.nav a --------------> 0,0,1,1

盒子模型：

网页布局的核心：利用CSS摆盒子

content padding margin border

网页布局本质

利用CSS实现盒子模型

网页布局过程

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。
往盒子里面装内容

网页布局三大核心

盒子模型
浮动
定位

盒子模型组成

盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

在这里插入图片描述

边框：

边框使用

三部分：宽度样式颜色
- border-width
- border-color
- border-style
  - solid（实线边框）
  - dashed（虚线框）
  - dotted（点线边框）
- none
复合边框：border：（无顺序）
上下左右边框，如：border->top
重点：border-collapse(控制相领的边框，表格的细线边框)
- border-collapse：collapse
注意：边框会影响盒子的实际大小

边框会影响盒子实际大小

边框会额外增加盒子实际大小，需要根据实际情况布局

内边框：

padding
- padding-top
- padding-bottom
- padding-right
- padding-left
padding的复合写性
- padding：1px 代表上下左右都是1px
- padding：1px 2px 代表上下是1px，左右是2px
- padding：1px 2px 3px 代表上是1px，下是3px，左右是2px
- padding：1px 2px 3px 4px ，代表顺时针
内边距的影响：
- 内容与边框有距离，增加了内边距
- padding影响了盒子的实际大小
- 解决方案，改变height和width的大小，或者不写height和width

外边距：

margin，其他写法与padding一样
外边距的典型运用：
- 让盒子水平居中，属性值为：auto
外边距合并
- 嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷比较大
  - 解决方案：
  - 可以为父元素定义一个上边框
  - 可以为父元素定义内边框
  - 可以为父元素添加overflow：hidden；
  - 可以用浮动,定位

在这里插入图片描述

一些放在css首位的选择器：

清除内外边距
```
* {margin：0；padding：0；
}
```
ul-li不显示小圆点
```
li {list-style：none；
}
```

圆角边框：

border-radius：length；

length：数值/百分比
正方形想要圆，50%
圆角矩形：设置高度的一般就行了
也可以分开写，如：border-top-left-radius：
也可以合起来写：border-radius：

简单盒子、文字阴影：

盒子阴影：

box-shadow：h-shadow v-shadow blur spread color inset
- h-shadow v-shadow 必须有，h水平阴影 v垂直阴影
- blur 模糊距离
- spread 阴影尺寸
- color 阴影的颜色 rgba（0，0，0，.3）
- inset 将外部阴影改为内部种（默认外部阴影）

文字阴影：

text-shadow
其余同上

浮动：

标准流：

就是标签按照规定好默认方式排列
最基本的页面布局

浮动：

float：none（默认）
- left（左浮动）
- right（右浮动）
两个最重要的的特征
1. 脱离标准普通流的控制，移动到指定位置（托标）
2. 浮动盒子不再保留原来的位置

块元素、行内元素、行内块元素：

块元素：

div（最金典）
h1-h6
p
ul、ol、dl
form
table
特点
- 独占一行
- 高、宽度以及内边距都可以控制
- 是一个融器
- 注意：p h1-h6 内不可以存在块元素

行内元素：

a
strong
br
del
span（最经典）
textarea
特点：
- 一行可以多个
- 高、宽不能设置
- 默认宽就是本身内容宽度
- 行内元素只能放在文本或者其它行内元素

行内块：

img
input
td
特点：
- 默认文本高度
- 高度、宽度都可以控制
- 一行可以多个

元素显示模式转换：

转为块元素：display：block；
转为行内元素：display：inline；
转为行内块元素：display：line-block；

定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档的定位方式。边偏移则决定了该元素的最终位置

边偏移

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right: 80px	右测偏移量，定义元素相对于其父元素右边线的距离