前端入门一之CSS知识详解

前言

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

文章目录

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

Emmet语法：

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

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实现盒子模型

网页布局过程

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

网页布局三大核心

• 盒子模型
• 浮动
• 定位

盒子模型组成

盒子模型：把 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	右测 偏移量，定义元素相对于其父元素右边线的距离

静态定位（了解）

静态定位是元素的默认定位方式，无定位的意思

语法：

选择器 {position: static;}

• 静态定位按照标准流特性摆放位置，无边偏移
• 静态定位在布局中很少用

相对定位 （重要）

相对定位 是元素在位移位置的时候，是相对于他原来的位置来说的

语法：

选择器 {
    position: relative;
}

相对定位的特点：（重要）

• 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置)
• 原来 在标准流的位置继续占有

绝对定位（重要）

绝对定位 是元素在移动的时候，是相对于它祖先元素来说的

语法：

选择器 {position: absolute;}

特点（重要）：

• 如果没有父元素或者祖先元素，则以浏览器为准定位
• 如果祖元素有定位（相对、绝对、固定定位），则以最近定位元素为参考点
• 绝对定位不再占有原先位置

子绝父相

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

固定定位（重要）

固定定位是元素固定于浏览器可视区位置

选择器 {position: fixed;}

特点（重要）：

• 跟父元素没有关系
• 不随滚动条滚动
• 固定位置不在占有原先的位置

粘性定位（了解）

语法：

选择器 {
    position: sticky;
}

display 属性

• display: none; 隐藏对象
• display: block;

opacity属性

颜色透明

• opacity: .5;

z-index属性

提高层级

• z-index: 999; （999最高层级）