前端基础-CSS
CSS
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
*** https://cdn.bootcss.com/normalize/8.0.1/normalize.css ### normalize 下载清除浏览器的默认设置 导入即可用
CSS引入
1.直接写在标签里面 style='样式1;样式2;'；# 行内样式；行内式是在标记的style属性中设定CSS样式，不推荐大规模使用；
2.在head中通过style标签定义；# 内部样式
3.把样式单独写在css文件中，然后在html文件中通过link标签导入；# 外部样式
CSS语法：
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
选择器{样式1；样式2}
CSS注释：
/*这是注释*/
CSS查找标签的方式(选择器)
元素选择器(标签选择器) # 适用于 批量的统一默认的样式
标签名{样式1；样式2；}
ID选择器 # 适用于特定标签设置特殊的样式
# ID{样式1；样式2；}
类选择器 # 适用于给某一些标签设定相同样式
.类名{样式1；样式2；}
使用：标签 class='类名'
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
通用选择器
*{样式1；样式2；}
组合选择器
后代选择器
选择器 子标签{样式1；}
儿子选择器
选择器>子标签{样式1；}
毗邻选择器#同级相邻
选择器+子标签{样式1；}
弟弟选择器#同级所有
选择器~子标签{样式1；}
属性选择器
# 也可以在属性选择器前加上标签名缩小范围
div[class="xxx"]{样式1;}
# 也可以同时选择多个属性
[class='xxx'][title='xxx']{样式1;}
[属性]{样式1；}#用于选取带有指定属性的元素
[属性='值']{样式1；}#用于选取带有指定属性和值得元素
/*找到所有title属性以hello开头的元素*/
[title^="hello"] {color: red;}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {color: yellow;}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {color: red;}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {color: green;}
伪类选择器
/* 未访问的链接 */
a:link {color: #FF0000}
/* 已访问的链接 */
a:visited {color: #00FF00}
/* 鼠标移动到链接上 并非a标签可用 */
a:hover {color: #FF00FF}
/* 选定的链接 并非a标签可用*/
a:active {color: #0000FF}
/*input输入框获取焦点时样式*/
input:focus {
outline: none;#外边框
background-color: #eee;}#背景色
结构性伪类选择器
/*父元素的第n个子元素*/
div:nth-child(num)
/*父元素的奇数个子元素*/
div:nth-child(odd)
/*匹配父元素的偶数个子元素*/
div:nth-child(even)
反选伪类选择器
/*匹配不符合当前选择器的任何元素*/
div:not(选择器) # 在div下反选 不符合选择器的内容
伪元素选择器
first-letter # 常用的给首字母设置特殊样式：
p:first-letter {
font-size: 48px;
color: red;}
before/*在每个<p>元素之前插入内容*/
p:before {
content:"*";
color:red;}
after/*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;}
before和after多用于清除浮动。
脱离文档流：float，absolute，fixed
补充:content
伪类选择器中Content属性值
# content属性一般用于::before、::after伪元素中，用于呈现伪元素的内容
content: '插入纯字符'
content: url('插入图片地址')
content: attr(插入元素属性)
content: 调用方法()
选择器的优先级
1.内联样式(直接在标签里面写style)优先级最高
2.选择器相同的情况下，谁靠近标签谁生效
内联样式的权重为1000
id选择器的权重为100
类选择器的权重为10
元素选择器的权重为1
通用选择器的权重为0
权重计算永不进位
CSS属性分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
选择器，选择器{样式1；}
CSS属性相关
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
补充:
line-height:容器高度保持一致 # 设置垂直居中
块级标签才能设置宽度，内联标签的宽度由内容来决定。
长度单位
rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。
# rem在根据指定html根元素的字符大小而定的，从IE6到Chrome中，默认根元素的font-size都是16px的。如果想要设置12px的字体大小也就是12px/16px = 0.75rem。
区别
由于px是相对固定单位，字号大写直接被定死，无法随着浏览器进行缩放。
em和rem都是相对单位，em是相对于其父元素的font-size，页面层级越深，em换算越复杂，麻烦。
rem直接相对于根元素html，避开层级关系，移动端新型浏览器对其支持较好。
box-shadow阴影用法
box-shadow:inset offset-x offset-y blur-radius spread-radius color,....;
box-shadow参数解释
@1：inset
有inset 则为内阴影，没有insert 则为外阴影，默认为外阴影。
@2：offset-x
横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。
@3：offset-y
纵向阴影的大小，值同offset-x。
@4：blur-radius
阴影的模糊程度，值越大，阴影越模糊。
@5：spread-radius
阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。
按钮实例 .shadowdemo{ display:inline-block; line-height:33px; height:36px; padding:0 2em; font-size:13px; background:#0C58A7; box-shadow:inset -3px -3px 2px #050533; text-decoration: none; color:#fff; border-radius: 4px; vertical-align:middle; } .shadowdemo:active{ line-height: 39px; box-shadow:inset 2px 3px 2px #050533; } <a href="javascript:;" class="shadowdemo">我是按钮</a>
字体属性
文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
例如：
body {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}
字体大小
font-size:num px;
如果设置成 inherit 表示继承父元素的字体大小值。
字体倾斜
font-style:
值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
字重(粗细)
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
文本颜色 color
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
#在浏览器检查 ctrl + shift +c 选中文本样式找color 可以找色盘
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
文字属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰
text-decoration 属性用来给文字添加特殊效果。
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
常用的为去掉a标签默认的自划线：
a {text-decoration: none;}
首行缩进
将段落的第一行缩进 32像素：
p {text-indent: 32px;}
img相关
clip 属性剪裁绝对定位元素。
# 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。
值 描述
shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto 默认值。不应用任何剪裁。
inherit 规定应该从父元素继承 clip 属性的值。
Ps: 需要先进行定位
背景属性
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
/*背景颜色*/
background-color: red;
***补充
background-color: red!important #设置优先级最高
/*背景图片*/
background-image: url('1.jpg');
/*背景图片尺寸*/
background-size: 100% 100%
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; #背景不重复
/*背景位置*/
background-position: right top; # 出现在右上角 根据不同情况调节 如果中间需要设置 center center
/*background-position: 200px 200px;*/ # 像素大小或百分比；
background-attachment:fixed; # 固定背景图片
支持简写：
background:#ffffff url('1.png') no-repeat right top;
边框
边框属性：
border-width # 宽度
border-style # 样式
border-color # 颜色
支持简写
# i1 {border: 2px solid red;}
边框样式
值 描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
}
border-radius # 用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。设置100%
display属性
用于控制HTML元素的显示效果
值 意义
display:"none" HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 快级标签默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。(菜单里面的a标签可以设置block)
display:"inline" 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
补充:
display:flex 布局
X轴 称为主轴
Y轴 交叉轴
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
flex的六个属性
flex-direction 决定主轴的方向（即项目的排列方向）
1：flex-direction:row; 主轴水平方向，起点在左端
2 : flex-direction:row-reverse；主轴水平方向，起点在右端
3：flex-direction:column; 主轴垂直方向，起点在上边沿
4：flex-direction:row-reverse;主轴垂直方向，起点在下边沿
flex-wrap 定义换行情况(默认不换行)
1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行 第一行在下方,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；
3 : flex-warp: warp-reverse; 元素换行 第一行在下方
justify-content 定义项目在主轴上的对齐方式
1：justify-content : center ; 居中对齐
2：justify-content : flex-start; 左对齐
3：justify-content : flex-end;右对齐
4：justify-content : space-between;两端对齐，项目之间间隔相等
5：justify-content : space-around;每个项目两侧的间隔相等，即项目之间的间隔比项目与边框的间隔大一倍
align-items 定义在交叉轴上的对齐方式
1：align-items : flex-start; 起点对齐
2：align-items : flex-end; 终点对齐
3：align-items : center; 中点对齐
4：align-items : baseline; 项目的第一行文字的基线对齐
5 : align-items : stretch ; (默认值) 如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content 定义多根轴线的对齐方式
如果项目只有一根轴线，该属性不起作用。
所以，容器必须设置flex-wrap：···；
1:align-content: flex-start; 与交叉轴的起点对齐。
2:align-content: flex-end; 与交叉轴的终点对齐。
3:align-content: stretch; 轴线占满整个交叉轴。
4:align-content: center; 默认值。与交叉轴的中点对齐
5:align-content: space-between;与交叉轴的两端对齐，轴线之间的间隔平均分布；
6:align-content: space-around;每根轴线两侧的间隔相等，即轴线之间的间隔比轴线与边框的间隔大一倍；
flex常见属性总结
Positional alignment
justify-content: center; :居中排列
justify-content: flex-start; /* 从行首起始位置开始排列 /
justify-content: flex-end; / 从行尾位置开始排列 */
CSS盒子属性 # 从里到外
Content(内容): 盒子的内容，显示文本和图像；
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
***不同的浏览器会自动留不同的padding，margin 所以我们需要在head设置
*{margin ：0；padding：0；}
padding内填充
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
推荐使用简写：
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序：上右下左
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；
margin外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
推荐使用简写：
.margin-test {
margin: 5px 10px 15px 20px;
}
顺序：上右下左
常见居中：
.mycenter {
margin: 0 auto;
} #上下为0 左右为自动
margin: auto # 用于容器居中 水平有效
补充: 居中
style="text-align: center;
float
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值：
left：向左浮动
right：向右浮动
none：默认值，不浮动
Ps: 浮动元素的重叠问题
1.浮动元素不会覆盖文字内容
2.浮动元素不会覆盖图片内容
# 因为图片本身也属于文本,可以将图片看做一个特殊的文字
3.浮动元素不会覆盖表单元素
# 输入框,单选按钮,复选框,按钮,下拉选择框等
Ps: 浮动元素在排列时,只参考前一个元素位置即可
clear
clear属性规定元素的哪一侧不允许其他浮动元素。
注意：clear属性只会对自身起作用，而不会影响其他元素。
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。
清除浮动
清除浮动的副作用（父标签塌陷问题）
主要有三种方式：
固定高度
伪元素清除法
overflow:hidden
伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;
}
overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
定位（position）
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
relative（相对定位）
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。