day08
CSS
一、css概述
1.css层叠样式表Cascading Style Sheets 它是一种样式表语言，用来渲染html或者xml文档的样式文件
2.规则和语法
（1）语法
（2）规则
- 选择器是负责找到元素，可以使用多种选择器来完成，但没选中该元素，css不会报错，只会不渲染样式
- 样式声明可以是多个，没有声明个数限制。每一个声明后都加一个分号。
- css的空格，css书写中有些空格是没用的为了好看方便编写，有些空格是一定要写的，都在属性值上出现的空格是必要的。选择器中后代的空格必须要。
- css顺序读取，从上向下依次渲染，遇到重复的样式，会覆盖。
3.css样式的使用方法
（1）内联样式
把css样式写在标签中的style属性中，多样式用分号隔开。
| <div style="color:red;background-color:blue;">文字</div> |
- 针对性较强，优先级高，当前标签更直接
- 影响阅读，显得代码较乱
- 不利于修改，复用性差
- 使用js修改的元素css样式都是内联样式
（2）内部样式
内部样式写在head标签中的style标签里
| <head> <meta charset="UTF-8"> <title>Document</title> <style>//内部样式写在这里！！！ 选择器{样式声明;} </style> </head> |
- 没有多余css文件向服务器发送请求
- 只会影响当前html文件的大小
- 只能渲染当前页面元素，复用性也不强（其它html文件无法使用）
- 一般用于学习和测试，为了减少请求，样式较为单一的使用在某个页面时可以使用内部
- 优先级低于内联样式
（3）外部样式
单独创建一个css文件后缀名为xxx.css，在head标签中使用link标签引用到当前页面
| <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css文件路径"> </head> |
| rel属性：引入文件和当前html文件的关系，css样式就是stylesheet href属性：可以是绝对路径也可以是路径，css文件具体在哪，文件的引用 link标签可以写多个 |
- 复用性高
- 便于维护
- 向服务器增加了请求次数
- 优先级小于内联样式
二、选择器
选择器的作用就是在html中找到元素并且准备渲染它，利用的是元素的名字。
1.基础选择器
（1）通用选择器（通配符）
所有元素都会被它选中 * ，让浏览器所有元素都应用同样的样式，书写效率高了一些，但性能低了，因为所有元素都要渲染一遍。
| * {color: red;} |
（2）元素选择器（标签选择器）
通过html中的标签名找到元素，并且渲染样式。
- 好记，好写，直观
- 所有该标签名的标签全部改变，无法精准定位元素，给与相同标签名不同样式做不到
【标签选择器的权重值：1】
| div {color: red;} span {color: blue;} |
（3）id选择器
通过元素的id属性，当选择器。使用#id名作为选择器，该选择器具有唯一性，可以精准定位到一个元素。
- 很精准的定位到一个元素
- 权重值高，话语权高，不容易被其它选择器覆盖
- 复用性差
- 一般情况下，不适用id选择器渲染元素样式
【id择器的权重值：100】
| #g25 {color: green;} <p id="g25">桂延25</p> |
（4）class类选择器
具备相同的class属性值的元素，可以通过类属性给与相同样式，这样复用性较强。
- 哪个元素需要该属性就可以使用相同类属性值，方便
- 如果与其他类有不同样式时可以再加一个类进行新样式的渲染
- 同一个元素可以增加多个类属性值，分别分类渲染
- 可以指定一个类名，需要的元素拿来使用
注意:点不要忘记写，点和类名之间不能有空格
【类选择器权重值10】
| .w { color: violet; background-color: yellow; } h4.w{ color: blue;} .red {background-color: red;} |
（5）群组选择器
多个“选择器”，使用共同样式，可以将这些选择器用逗号相连，使用相同样式
从优化的角度，群组比较好
| h3,span,#g25,.f20 { background-color: yellow; color: blue; } |
2.关系型选择器
（1）后代选择器
在一个祖先中，选中其内部的后代元素。可以由多种选择器一起搭配使用
| .item img { width: 238px;/* 可以写100% */ } .item p { font-size: 14px; color: gray; } |
（2）子代选择器
子代选择器和后代选择器基本相同但是子代更加精准，效率更高。
子代选择器，父级>子级{} 对于选择器是什么没有要求，能选到即可
| .item>.bg { background-color: greenyellow; } .item>div>div {color: red;} |
（3）兄弟选择器
兄弟元素只包含后面兄弟，不含前面的兄弟
性能比较低，因为越后面的元素渲染次数越多
同级选择器~同级兄弟的选择器{}
| ol>li~li{color: grey;} |
（4）相邻兄弟选择器
相邻兄弟选择器与兄弟选择器用法相同，都是后面的兄弟可以被选中。相邻兄弟必须是紧紧挨着该元素的兄弟，中间不能有其它元素相隔
兄元素+相邻弟元素{}
| ol>li+li{color: grey;} input+span{color: red;} |
3.伪类选择器
css的伪类是添加到选择器中的关键字，指的是被选中元素的特殊状态
| :active激活的 指的是鼠标“点按住”当前元素范围，元素可以触发状态，改变的样式 .d1:active {color: red;} |
| :hover悬停的 指的是鼠标“移入到”当前元素范围，元素可以触发状态，改变的样式 .d2:hover{background-color: blue;} |
| 配合关系型选择器的用法 input:active+span{color: red;} <!-- 鼠标按住输入框时，span提示文字变红 --> <input type="text"><span>必填项</span> |
| a元素有“自带”的伪类 a:link 超链接未激活前的 a:visited 超链接激活以后 这就是为什么a标签不能看到继承颜色的样式，因为伪类是a自身的优先级比继承要高 |
| 伪类是顺序的（特指a标签的伪类顺序） :link>:visited>:hover>:active |
4.伪元素选择器
::before在元素前面和::after在元素后面，都不是实际的元素。
content: ""; 属性必须写，但值没有需要可以不写
| .d1::before{ content: "￥"; color: red; } 在::before和::after伪元素里可以单独对content字符串的样式修饰 |
5.css优先级
| 读取顺序： 相同选择器，渲染相同属性，但值不同，会按照读取顺序，后声明的样式优先，但不同属性不会受到影响。 |
| 指定大于继承： 在css样式中有一些属性是具有继承性的。如：字体颜色、字体大小、字体样式等 如果指定了元素样式，那么继承的元素样式会覆盖 |
| 权重值： id权重100>class权重10>标签权重1 权重值累加之后再比较 |
| 直接获取最高权限 .zb{color: fuchsia !important;} |
| 内联样式（1000）大于内部和外部样式 |
三、尺寸和边框
1.宽度高度
元素的尺寸就是其宽度和高度
width：宽度
height：高度
取值：值数字+单位（px、pt、%、rem、em...）
px像素：绝对单位
%：相对于父级元素的尺寸
（1）按元素属性分类
| 块级元素： - 宽度高度设置任何的取值均可 - 不设置宽度也有默认宽度，是父元素宽度的100% - 不设置高度，依靠内容（文字、元素）撑开自身高度 |
| 内联元素 - 宽度高度设置都不会有效果 - 靠内容文字撑开 |
| 内联中的行内块 - 内联中的特殊元素行内块，一般都有自己的默认宽高 - img默认宽高就是自己图片的本身大小（一般设置图片的宽度即可） - button和input都有自己的默认宽高，一般需要重改 - 行内块的宽度高度均可以设置 |
（2）最大和最小宽高（响应式布局中细讲）
| max-width:最大宽度 max-height:最大高度 min-width:最小宽度 min-height:最小高度 优先级都高于普通设置的宽度高度 |
2.色值
色值应用非常广泛，如：背景色，字体色、边框色、阴影色、渐变色...
（1）英文颜色
在编辑器中提供了一些，如：red、blue、green...
元素的默认颜色transparent 透明色
（2）十六进制色值
#rr gg bb
范围：0-9 a-f
取值：rr红色范围，gg绿色范围，bb蓝色范围
如：#15b452 纯红#ff0000
缩写：三位 #f00 前提每两个色值范围必须都一样
大小写均可
day09
2.色值
色值应用非常广泛，如：背景色，字体色、边框色、阴影色、渐变色...
（1）英文颜色
在编辑器中提供了一些，如：red、blue、green...
元素的默认颜色transparent 透明色
（2）十六进制色值
#rr gg bb
范围：0-9 a-f
取值：rr红色范围，gg绿色范围，bb蓝色范围
如：#15b452 纯红#ff0000
缩写：三位 #f00 前提每两个色值范围必须都一样
大小写均可
（3）rgb色值
rgb()色值是一个函数，r代表红，g代表绿，b代表蓝
后面括号要写三个参数，取值范围是0-255之间的数字
rgba()a指的是透明度，范围0-1，0完全透明，1完全不透明
3.边框
边框在元素的外层，宽度和高度的外面。一般的元素没有边框，但个别元素自带边框input、button...
（1）边框的组成
边框宽度 border-width
边框样式 border-style: solid实线 dashed虚线 dotted点状线 double双线
边框颜色 border-color
简写：border:宽度 样式 颜色;
（2）边框的方向
四个方向的边框可以分开写
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框
（3）三角形
| .sjx { width: 0; border:50px solid transparent; border-top-color: blue; } |
（4）去除边框
border:0 所有边框都去掉
input标签,button标签有可能去边框
四、元素的特性
1.元素的显示
元素以一个什么样的形式显示在页面上
（1）display 元素显示的形式
| display:block 以块级元素形式显示 display:inline 以内联元素形式显示 display:inline-block 以行内块显示 所有的元素是可以变化自己的显示形式，同时改变了自己的属性 |
（2）幽灵空白节点
| 方法一： 把图片变成块级元素，display:block ,在布局里常用的方法 |
| 方法二： 如果父元素中只有图片没有其他的元素和文字，可以使用父元素中文字大小为0的方法 font-size:0 注意前提红字 |
（3）显示其他的属性值
| display:none 不显示 display:table 以表格形式显示 display:flex 弹性布局 |
2.显示和隐藏的相关属性
在项目中常会出现元素的展现和消失
要和元素的状态改变啊（伪类）一起使用
| display:none 不显示，元素在页面上完全消失，不占据页面位置 显示对应的是display:block |
| visibility: hidden;隐藏，还占据原位置 visibility: visible;默认不隐藏 |
| opacity: 0;元素透明度0-1 ,1完全不透明 调整元素透明度，所以遮罩不适合用透明度，可以使用背景色的rgba() |
3.溢出
元素里面的内容（子元素和文字）大于父级元素的宽、高，会超出父元素的范围
想要内部内容溢出父元素，一定要给父级设置范围（宽高），范围还要小于内部的内容
| /* 溢出部分隐藏 */ overflow: hidden; /* 元素出现双(x,y)方向的拖拽区域 */ overflow: scroll; /* 溢出方向出现拖拽区域 */ overflow: auto; /* 单方向的溢出 */ overflow-x: auto; overflow: hidden; |
overflow和BFC关系
| BFC Block Formatting Context "块级格式化上下文" 触发独立的渲染区域，让外部的元素以及子元素的变化都对自己不影响 overflow属性的三个值会触发BFC特性，scroll、auto、hidden 白话：只要元素有这三个属性值之一，就触发自身的BFC |
五、内外间距和盒子模型
1.内间距（内边距）
padding，宽度、高度以外，边框以内的区域
（1）语法
padding: 数字+单位; 数字不能为负值
内间距占元素的颜色，内间距里不能存在文字和子元素
（2）方向
内间距有四个方向分别是：上、右、下、左内间距
| padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; |
（3）简写
| 1个值：padding: 20px; 四个方向一样 2个值：padding: 10px 20px;上下 左右 3个值：padding: 10px 20px 30px;上 左右 下 4个值：padding: 10px 20px 30px 40px; 上 右 下 左 |
（4）内间距和盒子（元素）
在标准盒子模型中，内间距是占据元素空间的，增加内间距会让整个元素变大
2.外间距（外边距）
margin 指的是元素与其它相邻的兄弟元素之间的距离，位置在元素的边框以外。因为不属于元素本身，因此不会拥有元素的颜色
（1）语法
margin: 数字+单位; 数字可以为负值
一个元素左上角为原点，一切从左上角开始，参照物为原点左上角
元素向左移动，是x轴的负值
元素向右移动，是x轴的正值
元素向下移动，是y轴的正值
元素向上移动，是y轴的负值
（2）方向
内间距有四个方向分别是：上、右、下、左内间距
| margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; |
（3）简写
| 1个值：margin: 20px; 四个方向一样 2个值：margin: 10px 20px;上下 左右 3个值：margin: 10px 20px 30px;上 左右 下 4个值：margin: 10px 20px 30px 40px; 上 右 下 左 |
（4）四个方向的移动
四个方向的移动，被移动对象并不一样。外间距会产生元素的移动！位置发生变化！
| margin-top: 20px;上外间距移动是当前元素（自己） margin-bottom:50px;当前元素下方和相邻的兄弟产生距离会用自己的下外间距将相邻元素挤开（兄弟） margin-left:50px;从元素左侧发生移动，正值向右侧移动，负值向左侧移动（自己） margin-right:50px;当前元素右侧和相邻兄弟产生距离，会用自己的右侧外间距将相邻兄弟挤开（兄弟） |
总结：上左外边距移动自己，下右外边距挤开兄弟
（5）自带外间距的元素
如：body自带上下左右8px外间距（大部分浏览器）
ul、ol、p、h1-h6 都有外间距
| 在练习的时候可以,将所有元素的内外间距清零： *{ margin:0; padding:0; } |
（6）margin的auto属性值
margin:auto;指的是块级元素在其父元素中左右两侧外间距一样，就是在父元素中水平居中
pc端显示器分辨率越来越多，以谁为标准？目标客户群体的消费能力
凡是写pc端页面一定要有一个居中区域的宽度规划
该区域要在整个页面内水平居中
即使页面小范围缩小，也是左右空白区域变小不影响中部内容区域的显示
| 手写css不用任何框架的情况下可以单独设置一个类用于设置宽度和居中,如：就要1190 .center { width:1190px; margin:auto; } |
（7）外间距合并现象
当两个元素垂直相邻，两个元素都有外间距，并且渲染的是两个元素之间的距离，以最大的值为显示效果
| 如：d1和d2是垂直相邻的元素 .d1 { background-color: red; margin-bottom: 30px; } .d2 { background-color: blue; margin-top: 60px; } 最终两个元素之间的距离是60px |
（8）外间距重叠效果
父级元素的第一个块级子元素和最后一个块级子元素，都会和父元素的上下边贴合，因此当第一个和最后一个子元素有上下外间距时，因为贴合导致父元素发生移动而子元素并未移动也没有和父元素产生距离。
第一个子元素的margin-top会让父元素y轴移动
最后一个子元素的margin-bottom会让父元素的y轴移动。
解决方法：
| 1.给父元素加一像素边框线，让父子之间不贴合 |
| 2.给父级加子元素希望方向的内间距可以完成分开有距离的效果 |
| 3.BFC，给父级触发BFC特性后，不会受到子元素的影响，独立渲染，不会被子元素粘合，导致上下移动 父元素的overflow属性：scroll、hidden、auto 想使用BFC，父元素不要设置范围，不能小于子元素集合 |
| 3.在第一个子元素和最后一个子元素的前后增加空<table>标签，依靠table标签的特性让父子不重叠 table标签直接加影响结构效果，可以进化这种方法 给父级使用伪元素 .box::before{ content: ""; display: table; } 使用父元素的伪元素，模拟table打开粘合 |
（9）元素分类
块级元素：可以设置四个方向的外间距，并且生效
内联元素：上下外、内间距设置不生效，左右生效
行内块：可以设置四个方向的外间距，并且生效
五、内外间距和盒子模型
3.盒子模型
（1）标准盒子模型
| 最内部：内容，宽度高度（淡蓝色） | 占元素范围 |
| 内间距：padding四个方向（淡绿色） | |
| 边框：border 四个方向（鹅蛋黄） | |
| 外间距：margin四个方向（橙黄） | |
（2）重新计算盒子模型的宽度【怪异盒模型】
元素增加属性box-sizing盒子模型计算方法
| box-sizing: content-box;/*默认值，标准盒模型计算*/ 标准盒子模型：设置的宽+内+边=元素占位 |
| box-sizing: border-box; 重新计算盒模型 怪异盒模型：重新自算自动内减的宽+内+边=设置的宽度 |
例子：
| .aqy{ width: 186px; background-color: red; padding: 5px; /* box-sizing: content-box; */ box-sizing: border-box; border: 5px solid black; margin: 10px; } |
六、背景
1.背景颜色
| background-color: red;色值 元素的背景颜色会出现在元素的最底层 |
2.背景图插入
如果需要插入背景图，则必须元素有固定宽高
| background-image: url(./img/背景图.jpg); 背景图的大小和设置元素的大小一般情况下比例相同大小不同 所以插入背景图属性一般不会单独使用必须搭配其他背景属性一起使用 -如果元素范围小于图片大小会出现显示图片不全 -如果元素范围大于图片大小会出现x轴和y轴的重复显示 |
3.背景图的平铺（背景图重复）
默认x、y都会重复
| /* 不重复 */ background-repeat: no-repeat; /* x轴重复图像 */ background-repeat: repeat-x; /* y轴重复图像 */ background-repeat: repeat-y; |
4.背景图定位
背景图定位需要x轴和y轴的坐标
| x轴 y轴 background-position: 50px 50px; 还可以写百分比单位，元素的宽度高度的百分比 还可以写关键词： top、left、right、bottom、center |
精灵图
| .d6{ width: 32px; height: 32px; background-color: black; background-image: url(./img/sprite@2x.png); background-position: 0 -32px; } |
5.背景图尺寸
| background-size: 100% auto; 保证x轴优先完整显示 | x轴方向拉满100%，图片在x轴展示不会多也不会少 y轴auto自动按比例缩放，图片y轴重复或者y轴显示不全 |
| background-size:auto 100%; 保证y轴有限完整显示 | y轴方向拉满100%，图片在y轴展示不会多也不会少 x轴auto自动按比例缩放，图片x轴重复或者x轴显示不全 |
| background-size: cover; | 图片铺满整个容器，不留多余空间，除非比例刚好否则损失部分图像 |
| background-size: contain; | 保证一张完整的图片在容器中，一点不损失图像，出现多余空间时，会重复或者空白（no-repeat） |
6.背景简写
background:背景颜色 背景图 平铺 定位/尺寸
可以按照以上顺序去记，一定不会改位置的是定位和尺寸
| background: violet url(./img/hb.png) no-repeat center/contain; |
最简方式
| background: url(./img/hb.png); |
| background:color; |
若有需要评论区回复
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
