CSS基本知识点总结

1、CSS简介

1.1、CSS是什么?

  • CSS指的是层叠样式表(Cascading Style Sheets)
  • CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素
  • CSS节省了大量工作。它可以同时控制多张网页布局。

1.2、CSS引入方式

引入方式 书写位置 作用范围 使用场景
内嵌式 CSS写在style标签中。style标签通常放在head中 当前页面 小案例
外联式 CSS写在单独的CSS文件中,通过link标签引入 多个页面 项目中
行内式 CSS写在标签的style属性中 当前标签 配合js使用

2、CSS选择器

2.1、CSS基础选择器

2.1.1 ID选择器
  • 结构#id属性值 { css属性名: 属性值; }
  • 作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:

  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签
2.1.2 类选择器
  • 结构.class { css属性名: 属性值; }
  • 作用:通过类名,找到页面中所有带有这个类名的标签,设置样式

注意点:

  1. 所有标签上都有class属性,class属性的属性值成为类名
  2. 类名可以由数字、字母、下划线、中划线组成,但不能以数字或中划线开头
  3. 一个标签可以同时有多个类名,类名之前以空格隔开
  4. 类名可以重复,一个类选择器可以同时选中多个标签
2.1.3 通配符选择器
  • 结构* { css属性名: 属性值; }
  • 作用:找到页面中所有的标签,设置样式

注意点:默认去除浏览器自带属性margin和padding

2.1.4 标签选择器
  • 结构:标签名 { css属性名: 属性值; }
  • 作用:通过标签名,找到页面中所有这类标签,设置样式

注意点:

  1. 标签选择器选择的是一类标签,而不是单独某一个
  2. 标签选择器无论嵌套关系有多深,都能找到对应的标签
2.1.5 属性选择器
属性 说明
[attribute] 选择多有带 attribute 属性的元素
[attribute=value] 选择 attribute=value的所有元素
[attribute~=value] 选择 attribute属性包含单词 value的所有元素
[attribute^=value] 选择其attribute属性值以value开头的所有元素
[attribute$=value] 选择其attribute属性值以 value结束的所有元素
[attribute*=value] 选择其attribute属性中包含value子串的每个元素
  • 结构:标签名 { css属性名: 属性值; }
  • 作用:通过标签名,找到页面中所有这类标签,设置样式

注意点:

  1. 标签选择器选择的是一类标签,而不是单独某一个
  2. 标签选择器无论嵌套关系有多深,都能找到对应的标签

2.2、组合选择器

选择器 作用 格式 示例
后代选择器 找后代 选择器之间通过空格分隔 .father .son { css }
子代选择器 找儿子 选择器之间通过 >分隔 .father > .son { css }
并集选择器 找到多类元素 选择器之间通过,分隔 div,p,span { css }
交集选择器 找同时满足多个选择器的元素 选择器之间紧挨着 p.red { css }
兄弟选择器 匹配p标签后的所有span元素 选择器之间通过 ~ 分隔 p ~ span
相邻选择器 匹配p标签的第一个span元素 选择器之间通过 + 分隔 p + span

2.3、伪类选择器

伪类:将特殊的效果添加到特定的选择器上,不会产生新元素

选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E:nth-child(n) 作为父元素的第n个子元素E
E:nth-last-child(n) 选择父元素的倒数第n个子元素
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个元素
E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type 选择父元素内具有指定类型的倒数第n个E元素
E:root 选择匹配元素E所在文档的根元素,也就是html
E:only-child 选择父元素只包含一个子元素,且该子元素匹配E元素
E:only-of-type 选择父元素只包含一个同类型的子元素,且该子元素匹配E元素
E:empty 选择没有子元素的元素,且该元素也不包含任何文本节点
E:link 选择所有未被访问的链接
E:active 选择活动状态的a链接元素
E:visited 选择已经访问过的元素
E:hover 选择鼠标悬停状态的元素
E:checked 选择的元素

2.4、伪元素选择器

伪元素:在内容元素的前后插入额外的元素或样式,这些元素不在html文档中生成,只在外部可见。

选择器 功能描述
::before 创建一个伪元素放在选中元素前
::after 创建一个伪元素放在选中元素后
::first-letter 选各种元素第一行第一个字母
::first-line 选中元素的第一行
::selection 选中鼠标点击拖动选中的高亮部分

2.5、伪类和伪元素区别

  1. 伪元素只能在选择器中出现一次,而且只在末尾出现
  2. 伪类只设置样式,不会创建新元素。而伪元素会创建新元素
  3. 伪类的效果可以通过添加实际的类来实现;伪元素也可以通过添加元素来实现

3、字体和文本样式

3.1、字体样式

属性名 样式 属性值
font-size 字体大小 数组+px
font-weight 字体粗细 正常:normal或数字400; 加粗:bold或数字700
font-style 是否倾斜 正常(默认值):normal; 倾斜:italic
font-family 字体系列 sans-serif(无衬线字体); serif(衬线字体); monospace(等宽字体)
font 字体连写 style weight size family

3.2、文本样式

属性名 样式 属性值
text-indent 文本缩进 数字+px; 数字+em(推荐:1em = 当前标签的font-size的大小)
text-align 对齐方式 left: 左对齐; center: 居中对齐; right: 右对齐
text-decoration 文本修饰 underline: 下划线; line-through: 删除线; overline: 上划线; none: 无装饰线
line-height 文本行高 数字+px; 倍数(当前标签font-size的倍数)

4、背景相关属性

4.1、背景颜色

属性名:background-color

属性值

颜色取值 示例
关键字 red、green、yellow等
rgb表示法 rgb(255,255,255)
rgba表示法 rgba(255,255,255,1)
十六进制 #ffffff;

注意点:

  • 背景颜色默认值是透明的:rgba(0,0,0,0)或transparent
  • 背景颜色不会影响盒子大小,一般在布局中使用,方便看清盒子大小和位置

4.2、背景图片

属性名:background-image

属性值:background-image: url(‘图片的路径’)

注意点:

  • 背景图片默认实在水平和垂直方向平铺的
  • 背景图片仅仅是指给盒子起到装饰效果,类似于背景不能撑开盒子

4.3、背景平铺

属性名:background-repeat

属性值

取值 效果
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿水平方向(x轴)平铺
repeat-y 沿垂直方向(y轴)平铺

4.4、背景位置

属性名:background-position

属性值:background-position: 水平方向位置 垂直方向位置

4.5、img标签和背景图片的区别

  • img标签是一个标签,不设置宽高默认会以原来尺寸显示
  • 背景图片只是装饰的CSS样式,不能撑开元素的宽高

5、元素的显示模式

5.1、块级元素

属性:display: block
特点

  1. 独占一行(一行只能显示一个)
  2. 宽度默认是父元素的宽度,高度默认由内容撑开
  3. 可以设置宽高

代表标签

  • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等

5.2、行内元素

属性:display: inline
特点

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签

  • a、span、b、u、i、s、strong、ins、em、del等

5.3、行内块元素

属性:display: inline-block
特点

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签

  • input、textarea、button、select等
  • 特殊情况:img标签有行内块元素特点,但在谷歌浏览器中显示的是inline

6、CSS三大特性

6.1、继承性

特点:子元素有默认继承父元素样式的特点(子承父业)

继承属性

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height

应用场景

  1. 可以直接给ul设置list-style:none属性,从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小

继承失效情况:被浏览器默认样式给覆盖了

6.2、层叠性

特性

  1. 给同一个标签设置不同的样式 -> 此时样式会层叠叠加 -> 会共同作用在标签上
  2. 给同一个标签设置相同的样式 -> 此时样式会层叠覆盖 -> 最终写在最后的样式会生效
  3. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断

6.3、优先级

选择器 示例 权重值
!important background-color: #fff !important; 正无穷
内联选择器 样式作用元素 1000
ID选择器 #id 100
类选择器、属性选择器、伪类选择器 .class 10
标签选择器、伪元素选择器 div、p 1
通配符选择器 * 0
继承属性
样式作用元素
-1

说明

  1. 权重值是256进制的
  2. 同一行的选择器权重值相加,权重值高的样式生效,如果权重值相同,后面写的覆盖前面
  3. 不是同一行的直接找按权重值相加计算,权重值高的样式生效

7、盒子模型

7.1、盒子模型介绍

盒子的概念

  1. 页面中的每一个标签都可以看做是一个盒子;通过盒子的视角,可以更方便的进行布局
  2. 浏览器在渲染网页时会将网页中的元素看做是一个个的矩形区域,我们也形象称之为盒子

盒子模型:CSS中规定盒子分别由:内容区域(content)内边距区域(padding)边框区域(border)外边距区域(margin)构成

7.1.1 内容的宽度和高度

作用:利用 widthheight 属性默认设置是盒子 内容区域 的大小

属性:width / height

常见取值:数字 + px

7.1.2 边框 (border)

作用:设置边框粗细、边框样式、边框颜色效果

属性

作用 属性名 属性值
边框粗细 border-width 数字 + px
边框样式 border-style 实线 solid、虚线 dashed、点线 dotted
边框颜色 border-color 颜色取值

边框连写形式:边框粗细 边框样式 边框颜色

例如:border: 1px solid #333;

单方向设置:border-方位名词: 1px solid red;

7.1.3 内边距 (padding)

作用:设置边框内容区域之间的距离

属性名:padding

常见取值

取值 示例 含义
一个值 padding: 10px; 上下左右都设置为10px
两个值 padding: 10px 20px; 上下设置为10px、左右设置为20px
三个值 padding: 10px 20px 30px 设置为10px、左右设置为20px、设置为30px
四个值 padding: 10px 20px 30px 40px 设置为10px、设置为20px、设置为30px、设置为40px

单方向设置:padding-方位名词: 10px;

7.1.4 外边距 (margin)

作用:设置边框以外,盒子与盒子之间的距离

属性名:margin

常见取值

取值 示例 含义
一个值 padding: 10px; 上下左右都设置为10px
两个值 padding: 10px 20px; 上下设置为10px、左右设置为20px
三个值 padding: 10px 20px 30px 设置为10px、左右设置为20px、设置为30px
四个值 padding: 10px 20px 30px 40px 设置为10px、设置为20px、设置为30px、设置为40px

单方向设置:margin-方位名词: 10px;

7.1.5 盒子实际大小计算公式
  • 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
  • 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

问题:当盒子被border和padding撑大后,如何解决?

  1. 手动内减:手动计算多余大小,在内容中减去
  2. 自动内减:给盒子设置属性 box-sizing: border-box;
7.1.6 相邻盒子之间margin计算规则
  1. 水平方向的盒子,两者距离为margin之和
  2. 垂直方向的盒子,两者距离为margin的最大值
7.1.7 塌陷现象

场景:互相嵌套和块级元素,子元素的magin-top会作用在父元素上

结果:导致父元素一起往下移动,引起父元素塌陷

解决方式

  1. 给父元素设置border-top或者padding-top(分割父子元素的margin-top)
  2. 给父元素设置overflow: hidden;
  3. 转换成行内块级元素 display: inline-block;
  4. 设置浮动 float: left;
  5. 添加伪类

常用清除浮动和父元素塌陷伪类

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

8、 标准流

标准流:又称文档流,是浏览器在渲染元素时默认采用的一套排版规则,规定了该以何种方式排列元素

排版规则

  1. 块级元素:从上到下,垂直布局,独占一行
  2. 行内元素行内块元素:从左到右,水平布局,空间不够自动换行

9、 浮动

9.1、浮动的特点

  1. 浮动元素会脱离标准流(简称:脱标),在标准流中不占位置
  2. 浮动元素比标准流高半个级别,可以覆盖标准流中的元素
  3. 浮动找浮动,下一个浮动元素会在上一个浮动元素后面左右浮动
  4. 浮动元素会受到上面块级元素边界的影响
  5. 浮动元素有特殊的显示效果
  • 一行可以显示多个
  • 可以设置宽高

注意点:浮动元素不能通过父元素设置text-align:center;或本身设置margin: 0 auto;让浮动元素本身水平居中

9.2、浮动的作用

  1. 图文环绕
  2. 网页布局,让垂直布局的盒子变成水平布局

9.3、浮动的代码

属性float

  1. 左浮动: float: left;
  2. 有浮动: float: right;

9.4、浮动带来的影响

影响:子元素设置浮动,此时子元素脱离标准流无法撑开父元素,会影响页面其他元素的布局

9.5、清除浮动的方法

  1. 直接设置父元素高度
  • 优点:简单直接,方便
  • 缺点:有些元素无固定高度,无法设置高度
  1. 在父元素内容的最后添加一个块级元素,并给块级元素添加属性 clear: both;
  • 缺点:会在页面中添加额外的标签,会让页面结构变得复杂难以阅读
  1. 单伪元素清除法

基本写法

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

补充写法

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    /* 在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}
  • 优点:直接给标签添加类即可清除浮动
  1. 双伪元素清除法

    .clearfix::before,
    .clearfix::after {
    content: “”;
    display: table;
    }
    .clearfix::after {
    clear: both;
    }

  • 优点:直接给标签添加类即可清除浮动
  1. 给父元素设置overflow: hidden;
  • 优点:简单直接,方便

10、 BFC

10.1、BFC介绍

  • 块格式化上下文(Block Formatting Context)是web页面的可视CSS渲染的一部分,是块盒子的布局过程中发生的区域,也是浮动元素与其他元素交互的区域。

10.2、创建BFC的方法

  1. html标签是BFC盒子
  2. 浮动元素是BFC盒子
  3. 行内元素是BFC盒子
  4. overflow属性值不为visible是BFC盒子
  5. position: absolute或fixed

10.2、BFC盒子特点

  1. BFC盒子会默认包裹住内部子元素(标准流、浮动流)-> 应用场景:清除浮动
  2. BFC盒子本身与子元素之间不存在margin的塌陷现象 -> 应用场景:解决margin的塌陷

11、定位

11.1、定位的应用场景

  1. 可以解决盒子与盒子之间的层叠问题
  • 定位之后的元素层级最高,可以层叠在其他盒子之上
  1. 可以让盒子始终固定在屏幕中的某个位置

11.2、使用定位的步骤

11.2.1 设置定位方式

属性名:position

定位方式

定位方式 属性值 相对于谁移动 是否占位置
静态定位 static 不能通过方位属性移动 占位置
相对定位 relative 相对于自己原来的位置 占位置
绝对定位 absolute 相对于最近的且有定位的祖先元素移动 不占位置(脱标)
固定定位 fixed 相对于浏览器可视区域 不占位置(脱标)
11.2.2 设置偏移值
  • 偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
  • 选取的原则为就近原则
方向 属性名 属性值 含义
水平 left 数字+px 距离左边的距离
水平 right 数字+px 距离右边的距离
垂直 top 数字+px 距离上边的距离
垂直 bottom 数字+px 距离下边的距离

11.3、定位方式

11.3.1 静态定位

介绍:静态定位是默认值,就是标准流,不能通过方位属性进行移动
代码:position: static;

11.3.2 相对定位

介绍:相对于之前的位置进行位移
代码:position: relative;
特点

  1. 需要配合方位属性实现移动
  2. 相对于原来的位置进行移动
  3. 在页面中占位置,没有脱离标准流

应用场景

  1. 配合绝对定位(子绝父相)
  2. 小范围移动
11.3.3 绝对定位

介绍:相对于之前的位置进行位移
代码:position: absolute;
特点

  1. 需要配合方位属性实现移动
  2. 默认相对于浏览器可视区域进行移动
  3. 在页面中不占位置,脱离标准流
  4. 相对于最近的有定位(非static)的祖先元素进行移动

应用场景

  1. 配合相对定位(子绝父相)

     
     
         
         水平垂直居中
         
     
     
         
11.3.3 固定定位

介绍:相对于浏览器进行定位
代码:position: fixed;
特点

  1. 需要配合方位属性实现移动
  2. 相对于浏览器可视区域进行移动
  3. 在页面中不占位置,脱离标准流
  4. 相对于最近的有定位(非static)的祖先元素进行移动

应用场景

  1. 让盒子固定在屏幕中的某个位置

12 元素层级(z-index)

12.1、 元素层级关系

  1. 不同布局方式的层级关系
  • 标准流 < 浮动 < 定位
  1. 不同定位之间的层级关系
  • 相对、绝对、固定默认层级相同
  • 在HTML中写在下面的元素层级更高,会覆盖上面的元素

12.2、 改变层级的方式

  • 给元素添加属性z-index;属性值越大,层级越高

13、 装饰

13.1、 基线

介绍:浏览器文字类型元素排版中存在用于对齐的基线(baseline)

13.2、 文字对齐

属性名:vertical-align
属性值

属性值 效果
baseline 默认,基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

应用场景

  1. 解决文本框和表单按钮无法对齐问题、
  2. 解决input和img无法对齐问题
  3. 解决div中的文本框无法贴顶问题
  4. 解决div不设置高度时,img标签下会存在额外间隙问题
  5. 使用line-height让img标签垂直居中问题

13.3、 光标类型

介绍:设置鼠标光标在元素上时显示的样式
属性名:cursor
属性值

属性值 效果
default 默认值,通常是箭头
pointer 小手效果,提示用户可以点击
text 工字型,提示用户可以选择文字
move 十字光标,提示用户可以移动

13.4、边框圆角

介绍:让盒子四角变得圆润,增加页面细节,提高用户体验
属性名:border-radius
取值:数字+px、百分比

13.5、 overflow

介绍:控制溢出部分的显示效果

属性值 效果
visible 默认值,溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出,都显示滚动条
auto 根据是否溢出,自动显示或隐藏滚动条

13.6、元素隐藏

介绍:让元素本身在浏览器中不可见

属性

  1. visibility: hidden;
  2. display: none;

区别

  1. visibility: hidden;隐藏元素本身,并且在网页中占位置
  2. display: none;隐藏元素本身,并且在网页中不占位置

13.6、元素透明度

介绍:让元素整体(包括内容)一起变透明
属性名:opacity
属性值:0 ~ 1之间的数字

  • 1:表示完全不透明
  • 0:表示完全透明

你可能感兴趣的:(前端第一期,css,前端,html)