Web前端 （CSS篇知识点总结）

CSS：层叠样式表(英文全称：Cascading Style Sheets)

一、CSS的作用

1.首先需要我们知道的是，css能干什么。这样我们才能更好的去理解。
2.CSS能够对网页中元素位置的排版进行像素级别的精准控制，支持几乎所有字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、CSS语法

• CSS的规则由两个主要部分构成：选择器，以及一条或者多条声明。
• 选择器一般都会是自己所需要改变样式的HTML元素。
• 声明：由一个属性和一个属性值所组成的。
• 每个属性和属性值之间需要用" ："分开。

例如：我现在设置一个div标签，我想把div标签设置宽400px，高400px。

div{
	/*
		在css中的注释是以"/*"开始，"*/"结束的。
	*/
	width：400px；
	height：400px；
}

id选择器和class选择器

• id 选择器：是描述设置特定 id 的 HTML 元素指定特定的样式。
  • 元素以id属性来设置独有的id名（id=“one”），id名不要重复。
  • 这里需要注意的是id属性不能以数字开头，因为在在某些浏览器中不会起作用。

#one{
	/*这里需要注意的是，id选择器在CSS中以"#"来定义*/
	text-align：center；
}

• class选择器：是用于描述一组元素的样式。
  • class可以在多个元素中使用。
  • class在css中，类选择器是以" . "来表示的。

.class{
	text-align：center；
}

• 标签选择器：是根据标签的名字，选择到对应的标签。 - 所选择的标签是当前html文件中的该标签。

div{
	color: red;
}

css的三大特性

• 继承性
  • 父元素的样式属性，会继承到子元素上。
  • 例如：父元素定义字体颜色，那么子元素就会继承父元素的字体颜色。
• 层叠性
  • 一个元素可以拥有多个样式效果进行叠加。
• 优先级
  • 样式一共由四种：浏览器的默认样式，外部样式、内部样式、内联样式。
  • 优先级顺序： 浏览器的默认样式<(外部样式、内部样式、内联样式),这里需要注意的是（外部样式、内部样）需要根据写的先后顺序来决定谁的优先级，越后面写，谁就优先。
  • 内联样式的优先级高于内部样式和外部样式。

1.外部样式：通过在head标签中，使用标签，引入css文件，进行样式的使用。
2.内联样式：直接在标签上，通过style属性进行使用。
3.内部样式：在head标签中，通过< style>css< style>标签，使用样式。

css的链接样式

 不同的链接样式，拥有不同的效果。

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

需要注意的是链接样式由拥有顺序规则，例如：a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面

css的盒子模型

 所有的THML元素都可以看作一个一个的盒子，css的盒子模型包括：边距、边框、填充和实际内容。

Margin(外边距) - 清除边框外的区域，外边距是完全透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

css的边框属性

 css边框属性是日常需求中运用频繁的一个属性。

• border-style的值
  • none：默认没有边框。
  • dotted：定义一个点线边框。
  • dashed：定义一个虚线边框。
  • solid：定义实现边框。
  • doublue：定义两个边框，两个边框拥有相同的值。
• 边框还可以单独设置各条边
  • border-top-style:dotted：上
  • border-right-style:solid：右
  • border-bottom-style:dotted：下
  • border-left-style:solid：左

Display(显示) 与 Visibility（可见性）

• 通常我们需要隐藏一个元素的时候可以通过display属性设置为"none"，就可以达到隐藏元素属性的目的。
  • 且隐藏的元素不会占用任何空间，也就是说，该元素不仅仅是被隐藏了，同时该元素原本占用的空间也会从页面布局中消失。
• 设置visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
  • 该元素虽然被隐藏了，但仍然会影响布局。

CSS Position(定位)

• position 属性拥有五个值
  • static(静态定位)
    • HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
    • 静态定位的元素不会受到 top, bottom, left, right影响。
  • absolute(绝对定位)
    • 绝对定位的元素的位置相对于最近的已定位父元素 。
  • relative(相对定位)
    • 相对定位元素的定位是对应的父类元素的位置。
  • fixed(固定定位)
    • 元素的位置相对于浏览器窗口是固定位置。
    • 即使窗口是滚动的它也不会移动：
  • sticky（粘贴定位）
    • 粘贴定位是基于用户滚动的位置来定位的。
    • 当页面位置足够的时候，会跟随网页的位置进行变动。当页面滚动超出目标区域的时候就会想fixed（固定定位一样），固定在某一处。

CSS Overflow

 Overflow属性可以控制元素内容溢出出在想对应的元素区间内添加滚动条。

Overflow拥有的属性值：visible、hidden、scroll、auto、inherit

overflow: visible:默认情况下，overflow 的值为 visible(内容溢出元素框)



overflow: hidden:超出范围的文本信息将会隐藏



overflow: scroll和overflow: auto：如果元素文本信息超出范围时均会显示滚动条，将可以拖动滚动轴来查看后面的信息。

scroll：是无论是否拥有隐藏内容，都会显示滚动轴。如果内容没有溢出，则禁用滚动轴。
auto：则是拥有溢出内容出才会显示滚动轴。

**overflow: inherit**：会继承父元素overflow属性的值。

CSS Float（浮动）

Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。它在布局时一样非常有用。

• 元素的水平方向浮动，意味着元素只能左右移动，而不是上下移动。
• 浮动可以设置为left(左浮动)或者是right(右浮动)。
• 在浮动之前的元素不会受到影响，反之，浮动之后的元素会围绕着浮动元素。

当然也可以设置清除浮动效果(clear) ：元素浮动之后，周围的元素会重新排列，为了避免这种情况，可以使用 clear 属性。 clear属性指定元素两侧不能出现浮动元素。

---

由于篇幅的原因，不能一 一列举CSS中的所有基础知识点，以上就是自己常用或者容易混淆的知识点整理。