浅学CSS

什么是css？其全名为“Cascading Style Sheets”,译为“层叠样式表”。其用于定义网页样式和布局的样式表语言。通过CSS，我们可以指定页面各个元素的颜色，字体，大小，间距，边框，背景等样式，从而实现更为精确的页面设计。

对于html和css的关系，html比作毛坯房，css就可以理解为装修好的毛坯房。

关于CSS语法

选择器{
   属性1：属性值1；
   属性2：属性值2；
}

CSS通常由选择器，属性以及属性值组成，多个规则可以组合在一起，以便同时应用多个样式。

注：1.选择器的声明中可以写无数条属性。

2.声明中的所有属性和值都是以键值对这种形式出现的。

示例：

名为p的选择器{
   color：blue；
   front-size：16px；
}

快速导入具有id或者class的元素的小tip

1. 输入     ，按下Tab键，快速得到

2.输入h4#header,按下Tab，快速得到

注：对于div区块标签，只需输入.类名，即可快速得到

CSS的三种导入方式

1.内联样式（Inline Styles）

2.内部样式表（Internal Stylesheet）

3.外部样式表（External Stylesheet）

优先级：内联样式>内部样式表>外部样式表

简单的渲染如下：

选择器的相关介绍

有如下几种类别的 选择器：（ID选择器>类选择器>标签选择器）

1.元素选择器

2.类选择器

3.ID选择器

4.通用选择器

5.子元素选择器

6.后代选择器（包含选择器）

7.并集选择器（兄弟选择器）

选择紧跟着h3标签之后的标签进行渲染

8.伪类选择器

CSS一些常用属性

关于display

对于display属性，可以通过其使行内元素，块元素，行内块元素实行两两之间的转换。

如：

在第三条代码中，我将div块标签转换成了inline行内标签，使其性质由原先的独占一行转化为仅占有文本所占有的一行。

关于width以及height

渲渲染效果如下：

渲染效果如下：

font为复合属性，可由其来完成多方面的设置。如：font-size，font-family等。

CSS盒子模型

以上均为复合属性，可由其设置多种属性值。如：

对于border：dashed为虚线。

solid为实线。

dotted为点线。

double为双实线。

简单举个例子：

对于边框，若只有一个值则会四条边均设置该值，大于1个值，则会按上右下左的顺序设置；大于1小于4个值，则下对上，左对右。

小Tip:

输入如下按下tab键可快速得到如下

传统网页布局方式

标准流（普通流，文档流）

浮动

元素脱离文档流，根据开发者意愿漂浮到网页的任意方向。该属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

注意：浮动是相对于父元素浮动，只会在父元素的内部移动。

浮动的三大特性

1.脱标：脱离标准流。

2.一行显示，顶部对齐。

3.具备行内块元素特性。

清除浮动的两种方式：

a.尾元素清除法

b.为父元素添加overflow的属性

定位

相对定位：相对元素在文档流中的正常位置进行定位（一般用于微调元素的位置）

绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流（用于创建更复杂的布局）

固定定位：相对于浏览器窗口进行定位，不占据文档流，固定在屏幕上的位置，不随滚动而移动。（用于创建更为复杂的布局）

Flexbox和Grid（自适应布局）

当然，具体用哪种定位方式取决于于个人的设计需求。