目录
元素选择器：通过html中的元素名+大括号对元素进行属性的赋值
类选择器：通过给body中的元素的class属性赋值类名，在头部通过点（.）类名+大括号对对应类名的元素进行属性的赋值
id选择器：和class选择器很像，通过给body中的元素的id属性赋值id名字，在头部通过（#）id名字+大括号对对应id名的元素进行属性的赋值
合并选择器：选择器1,选择器2,...{ }，提取共同的样式，减少重复代码
CSS就是用来美化网页的，CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表，CSS文件后缀名为.css，CSS用于HTML文档中元素样式的定义
CSS的引入方式：
内联样式(行内样式)：
内联样式就是在元素尖括号中定义style属性，通过style属性可以包含任何CSS属性，每个CSS属性赋值通过冒号(：)，通过分号(；)分隔
优点：优先级最高
缺点：不利于维护，代码冗余
内部样式：
内部样式就是在头部head添加style元素，通过style元素进行属性的赋值，通过html中的元素名+大括号进行属性的赋值
内部样式的分类：
全局选择器：通过星号(*)+大括号对所有元素进行属性赋值
元素选择器：通过html中的元素名+大括号对元素进行属性的赋值
类选择器：通过给body中的元素的class属性赋值类名，在头部通过点（.）类名+大括号对对应类名的元素进行属性的赋值
id选择器：和class选择器很像，通过给body中的元素的id属性赋值id名字，在头部通过（#）id名字+大括号对对应id名的元素进行属性的赋值
id是唯一
id的开头不能是数字
合并选择器：选择器1,选择器2,...{ }，提取共同的样式，减少重复代码
外部样式(推荐)：
通过在外部创建css后缀名文件，添加样式然后拿个文件需要使用就可以导入这个css文件，而这种方式是最推荐的，因为在开发中不只有这么一点html文件，可能会有成百上千的文件，而此时我们如果一个文件写一个样式那代码实在过于冗余，所以我们可以通过外部样式，如果有相同的样式就可以引入改文件
字体属性：
color 字体颜色：
例子：在段落元素选择器中添加color属性并且设置为红色
font-style 字体样式：
指定文本的字体样式
| 值 | 描述 |
| normal | 默认值 |
| italic | 定义斜体字 |
例子：为段落选择器添加属性font-style为斜体字italic
font-size 字体大小：
例子：将段落设置字体大小为200px
font-weight 加粗：
设置文本的粗细
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100~900 | 定义由细到粗 400等同默认，而700等同于bold |
例子：将段落设置为粗体
font-family 字体：
font-family属性指定一个元素的字体，默认就是微软雅黑
背景属性：
background-color 背景颜色：
background-image 背景图片：
background-size 背景图片大小：
当我们图片太大了，可是我们只显示200px*200px的内容此时就需要用到background-size对背景图片的大小进行设定
| 值 | 说明 |
| length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
background-repeat 背景平铺：
该属性设置如何平铺背景图像
| 值 | 说明 |
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
因为我们给定的大小不一定就是适合图片的大小，所以当我们给的宽高给多了，那么图片就会平铺
我们可以通过属性background-repeat属性设置是否平铺，或者向哪平铺
background-position 背景定位：
该属性设置背景图像的起始位置，其默认值是：0% 0%
| 值 | 说明 |
| left top | 左上角 |
| left center | 左 中 |
| left bottom | 左 下 |
| right top | 右上角 |
| right center | 右 中 |
| right bottom | 右 下 |
| center top | 中 上 |
| center center | 中 中 |
| center bottom | 中 下 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0% |
| xpos ypos | 单位是像素 |
文本属性：
text-align 文本对齐：
指定元素文本的水平对齐方式
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
例子：将div中的文本居中对齐
text-decoration 文本装饰：
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |
例子：为div中的文本设置下划线
text-transform 文本转换：
text-transform 属性控制文本的大小写
| 值 | 描述 |
| capitalize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |
在div中添加段落，内容为hello world
通过text-transform将所有小写字母转换为大写uppercase
text-indent 文本缩进：
text-indent 属性规定文本块中首行文本的缩进，就像作文一样，作文需要开头缩进两格
现在添加随便一段比较长的文本
现在我们会看到这段文本它是没有文本缩进的
现在我们给齐添加文本缩进
表格属性：
border 边框：
默认表格是没有边框的
而border属性就是为表格添加边框的，但是如果我们只给表格添加边框那么就相当于外层包了一个盒子
所以我们不但table需要添加属性border，单元格也需要添加属性border
border-collapse 折叠边框：
根据border属性我们知道了不但table元素需要添加border属性，td元素也需要添加border属性，但是这样我们会发现单元格空隙很大，所以我们需要使用border-collapse属性赋值collapse折叠边框
border-collapse必须使用到table元素上，因为他的作用就是折叠该元素下所有的边框
width和height 表格宽度和高度：
当我们感觉单元格太小了，那么就可以通过width和height设置表格的宽度和高度，而width和height需要给td元素赋值，因为单元格太小了，那肯定扩大单元格啊
text-align 单元格文本对齐：
当我们扩大了单元格过后我们会发现单元格中的文本是靠左居中的，如果我们想要文本居中怎么办？此时我们就需要使用到text-align文本对齐了，text-align属性前面有讲过，就是用来文本对齐的
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |
而text-align给谁修饰呢？当然是td元素啊，因为文本在td元素中，所以给td元素的属性赋值
color 表格、字体颜色：
下面的例子指定边框的颜色，和td元素的文本和背景颜色
table{ border:1px solid green; }
td{ background-color:green; color:white; }
盒子模型：
外边距（margin），边框（border），内边距（padding），和实际内容（content）
- Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
- Border(边框) - 围绕在内边距和内容外的边框
- Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
- Content(内容) - 盒子的内容，显示文本和图像
如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离
此时代码中的图片就是内容
现在我们给图片设置一个内边距和边框，边框中是内容，那么内边距就是内容和边框的距离
此时如果是两张图片我们就可以看到这两张图片是贴在一起的，我们可以将这两个边框视为两个快递盒子，而外边距就是为这两个快递盒子设置距离
弹性盒子模型：
弹性盒子就是用来排列盒子中的多个盒子排列布局的
弹性容器通过设置 display属性的值为 flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素
例子：我们通过div进行模拟大盒子包着多个小盒子
display 属性
display:flex;开启弹性盒
display:flex;属性设置后子元素默认水平排列
flex-direction属性
定义
flex-direction 属性指定了弹性子元素在父容器中的位置
语法
flex-direction: row| row-reverse| column| column-reverse
- row：横向从左到右排列（左对齐），默认的排列方式
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
- column：纵向排列
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
justify-content 属性(设置盒子垂直对齐)
定义
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
语法
justify-content: flex-start| flex-end| center
- flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
- flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
- center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）
align-items 属性(设置盒子水平对齐)
定义
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
语法
align-items: flex-start| flex-end| center
- flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
- flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
- center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
浮动：
首先我们需要了解文档流(标准流)
文档流是文档中可显示对象在排列时所占用的位置/空间
例如：块元素自上而下摆放，内联元素，从左到右摆放
标准流里面的限制非常多，导致很多页面效果无法实现
- 高矮不齐，底边对齐
- 空白折叠现象
- 无论多少个空格、换行、tab，都会折叠为一个空格
- 如果我们想让img标签之间没有空隙，必须紧密连接
例子：我们此时插入两个图片，需求是这两个图片要紧挨着，可是如果使用标准流，那么图片中间一定会有空隙
解决方案：脱离文档流
使⼀个元素脱离标准文档流有三种方式
- 浮动
- 绝对定位
- 固定定位
浮动的定义
float属性定义元素在哪个方向浮动，任何元素都可以浮动。
| 值 | 描述 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的原理
- 浮动以后使元素脱离了文档流
- 浮动只有左右浮动，没有上下浮动
原理：
脱离文档流之后，元素相当于在页面上添加了一张浮层来防止内容，普通的在文档流，浮动在浮层上显示，互不干扰
清除浮动：
为什么我们设置了浮动又要清除浮动呢？
浮动副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，
浮动元素会造成父元素高度塌陷
后续元素会受到影响
创建一个大盒子，里边存放三个小盒子，其中两个小盒子向左浮动，一个盒子在标准层，运行过后我们会发现绿色标准层的盒子不见了，这是因为浮层的两个盒子把标准层的盒子覆盖了，这就是后续元素收到影响
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用
解决方案有很多种
1、父元素设置高度
父元素设置高度过后，就会将父元素撑开，那么父元素以外的元素就可以正常显示
但是如果该元素在父元素以内，那么还是会被浮层的元素覆盖
2、受影响的元素增加clear属性
通过第一种方法设置父元素宽高解决被覆盖的问题，但是如果元素在父元素中没有设置浮动，还是会被覆盖，所以就需要被影响的元素添加clear属性
3、overflow清除浮动
如果盒子有大有小，我们还能通过父元素设置高度来避免浮动带来的问题吗？
所以我们就需要使用overflow属性的hidden值，但是受影响的元素还是使用clear属性的both值进行清除浮动
定位：
position属性指定了元素的定位类型，一个position代表一个浮层
| 值 | 描述 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom
例子：
定位的问题：
设置定位之后，相对定位和绝对定位他是相对于具有定位属性的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档
此时container没有定位属性，所以子类box的定位是根据整个页面进行定位的
此时如果父类增加了定位属性，那么子类的定位就是根据父类的位置进行调整的
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
