初识css

        css又叫层叠样式表，通俗叫切图和静态网页布局。其作用是可以让网页“穿上漂亮衣服”，它可以控制HTML标签对象的css宽度、css高度、float浮动、文字大小、字体、css背景等样式达到我们想要的布局效果。

一、书写的位置

书写位置分三种：

1、写在标签属性的位置（内嵌样式）：

大部分标签有个属性叫做style=“”   引号里面写css属性和值，形式也是键值对
优点：精准，明确样式写在那个元素上  

缺点：代码会重复，页面元素过多时无法统一设置样式，不建议使用

2、在html头部部分，写一个style标签：

语法：选择器+声明块

选择器：用于设置页面元素

声明块：使用大括号包围，用于设置元素样式
优点：可以同时选中多个页面元素

缺点：不能任意引入其他html文件

3、单独写一个样式文件

文件的后缀是css   内容语法和内联样式一致 需要通过link标签引入到任意html文件中

优点：可以引入到任意一个html文件中

缺点：找页面元素较困难

注：如果三种css写法选中的相同的元素，分别设置不同的样式值：
优先级：行内样式>内联样式>外部引入样式
开发时尽量统一样式书写规范

二、选择器

1、常用选择器

id选择器：页面上的所有元素，都拥有一个属性id；id的值可以任意命名，尽量使其有含义；
id的值，在同一个页面上是唯一的
语法：#id值 声明块
class选择器：类似于id选择器，页面的元素，可以设置一个属性class
class的值也是可以任意命名的 可以是重复的
语法：.class值 声明块
元素/标签选择器：选中页面元素
语法：元素名 声明块

注：优先级：id>class>标签（越精准优先级越高）

2、复合选择器：是在常用选择器基础上，通过复合的方式选中元素
1、交集选择器：
语法：选择器1 选择器2 ...... 声明块
2、并集选择器
语法：选择器1，选择器2，选择器3，。。。。声明块
3、包含选择器
语法：祖先元素 后代元素
div li{        }
4、伪类选择器
例：     ：hover（鼠标移上去，样式改变） 语法：选择器：伪类{   }
5、子元素选择器
6、属性选择器
7、通配选择器
8、伪元素选择器

三、盒子

组成部分：
1、margin-外边距：边框与外部的距离
2、border-边框
3、padding-内边距：边框与内容的距离
4、content-内容区

图解：

盒子的宽=margin left+border left+padding left+width+padding right+border right+margin right

盒子的高=margin top+border top+padding top+height+padding bottom+border bottom+margin bottom

 四、定位

1、相对定位( position: relative;)

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

2、绝对定位（position: absolute;）

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

3、固定地位（position: fixed;）

position: fixed; 的元素是相对于视口（窗口）定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

4、粘滞定位（position: sticky;）

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

五、浮动 （float: ***）

1、简介：

float属性：通过浮动可以使一个元素向父元素的左侧或右侧移动
可选值（部分）：
①none；默认值，不浮动
②left；元素向左浮动
③right；元素向右浮动

注意：

1.元素设置浮动以后，水平布局的等式便不需要强制成立了。
2.元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，因此，元素下边还在文档流中的元素会自动向上移动。
3.浮动元素向左向右移动时，不会超过他前边的其他浮动元素

 众所周知，div是一個块元素，如果两个div放在一起的话，肯定会各占一行。但是如果设置了float:left的话，我们就可以顺利让他们靠在一起了。

2、特点：

①不会覆盖文字：浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，所以我们可以用其设置文字浮动效果

②脱离文档流：简单说：使用float属性（脱离文档流）后，不需要再区分块元素和行内元素

3、常见问题：

①什么是文档流：

文档流是文档中可显示对象在排列时所占用的位置。

②设置浮动后元素脱离文档流会导致父元素高度塌陷，如何解决？

1、绝对、相对组合布局：给父级盒子一个相对定位，子元素相对父级元素绝对定位，通过调整子元素绝对定位的位置就能实现

2、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局。

总体思维导图：