2021-05-09

                                                                          CSS基础总结

1.概述：

css指的是层叠样式表（Cascading Style Sheets)，是一种用来表现HTML或XML等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言，动态地对网页各元素进行格式化。外部样式表通常存储在css文件中，可以极大提高工作效率，多个样式定义可层叠为一。

2.CSS的基础语法：

（1）css规则由两个主要的部分构成：选择器，以及一条或多条声明；
（2）选择器通常需要改变样式的HTML元素；

（3）每条声明由一个属性和一个值组成；

（4）属性和属性值被冒号分隔开。

3.CSS的样式使用：

第一种方法：通过link标签引入的样式，我们称为外部样式。

第二种方法：写在<style>标签中的样式我们称为内部样式

 

第三种方法：在标签内部通过style属性设置，这种方法我们叫做内联样式

 

这是浏览器给我们设置的默认样式，

高度属性：height 设置为400像素；

宽度样式：width 设置为400像素；

字体颜色：color 自己定义。

4.CSS定位（Positioning）：

css定位属性允许你对元素进行定位。

属性	描述
Position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义一个定位元素的上外边距边界与其包含块上边之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
Vertical-align	设置元素的垂直对齐方式。
Z-index	设置元素的堆叠顺序。

5.css框模型：

css框模型规定了元素框处理元素内容、内边距、边框和外边距的方法。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

 

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

6.CSS的总结：
css刚开始学基础时，并不难学，只要自己用心。但不代表学会了一点基础就会了，毕竟学到老，活到老嘛！只要你有兴趣，而且用心，一定可以把它学会、学透，我每天是这样子跟自己说的。