02.css

一、div

大部分网站都是使用div来进行模块化开发

div是一个块状元素， 不根据内容来进行填充 ，独占一行

div 搭配css使用

二、css

2.1简介

css是层叠样式表

css 修饰静态网站 配合脚本对网站元素进行格式化

2.2css作用

用于美化网站

使用css样式的时候 html代码和css样式分离，提高代码拓展性以及清晰度

2.3css语法

组成：选择器名称 样式声明

2.4css三种引入方式

3.4.1行内引用

3.4.2内部引用

3.4.3外部引用

在css文件夹中编写 在html标签中进行引用

外部引入<link>和外部导入@import

3.4.4三种引入优先级

行内>内部|外部 就近原则

3.5css选择器

3.5.1基本选择器

标签选择器

p{}

h1{}

语法：标签名称{编写样式}

类选择器

以类来进行命名的选择器 

语法  .类选择器名称 {样式}

引入：class=“类选择器名称”

id选择器

以id来进行命名的选择器

语法 #id选择名称 {样式}

引入：id=“id选择器样式”

三种选择器的优先级：id>类>标签选择器

不确定使用哪种选择器 优先使用类选择器

3.5.2属性选择器

以标签的属性来进行命名的选择器就是属性选择器

语法：标签名称[属性=‘值’] 例如 input [type='text']

3.5.3层级选择器

 标签有父子关系 或者有上下级关系的选择器

3.5.3伪类选择器

三、css常用的样式

3.1字体样式

3.2文本样式

3.3背景样式

 3.4列表样式

 3.5边框样式

 3.6轮廓样式

 四、盒子模型

内容content

内边距padding

边框border

外边距margin

两个盒子纵向排列 同时设置margin值，取的是两个盒子设置margin值中较大值

两个盒子横向排列 同时设置margin值，取的是两个盒子margin值之和

父容器塌陷

两个盒子进行嵌套时 给小盒子设置margin值

大盒子跟着小盒子一起往下进行移动 （父容器塌陷问题）

overflow：hidden

或者设置内边距

 六、元素的转换

块状元素 display:block

行状元素 display:inline

行块元素 display:inline-block

隐藏元素 display:none

 七、浮动

浮动元素会对不浮动的元素产生影响 清除浮动 clear：left right all both

八、定位