CSS
CSS:层叠样式表（Cascading Style Sheets） 修饰网页，且能配合js对原有样式进行更改。
- css的层叠性：一个元素可能同时被多个css选择器选中，每个选择器都有一些css规则，这就是层叠。 这些规则有可能不矛盾的，自然这些规则将会同时起效，然而有些规则是相互冲突的。当发生冲突的时候必须选出一条最高特殊性(权重)的规则来应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入外部css rel用于定义文档关联，表示关联样式表 type定义文档类型 -->
<link rel="stylesheet" href="../css/1.css" type="text/css">
<!-- 内部编写css -->
<style>
div {
background-color: brown;
color: #fff;
font-size: 66px;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<div style="width:500px; height: 500px;">今晚月亮真美</div>
</body>
</html>
语法
选择器{
属性：属性值；
属性：属性值；
.....
}
引入方式
行内样式 直接在标签里面书写
<标签名 style=" 属性：属性值；属性：属性值；...."></标签名>
- 优点：
- 方便简介
- 缺点：
- 只能修饰一个标签，重复性高
- 结构和样式在一起，代码杂乱
- 不利于后期维护
内部样式 在head头部部分书写
<head><style>选择器{属性：属性值；属性：属性值；...}</style></head>
- 优点：
- 结构和样式分离，
- 缺点：
- 在同一个页面，不太方便操作
外部样式 在外面创建css文件，在html中引入css文件
<head><link rel="stylesheet" href="css文件名" type="text/css"></head>
- - 做到了结构和样式分离，方便后期维护；是日常开发中最常用的方式
特殊外部引入 在head头部书写
<head><style>@import url（"css文件名"）</style></head>
面试题: @import引入外部样式和通过link标签引入外部样式的区别?
0. @import的方式是属于css的语法，必须写在style标签里面。
0. 加载顺序不同，link引入的css样式表是同步加载的，而@import这种 方式是先加载页面，再加 载样式。在网速差的时候有区别。
0. 浏览器的支持情况不同。@import引入的样式在老版本浏览器(ie5以下)中不被支持
0. Dom操作不同。通过@import导入的样式，是不同通过Dom操作改变样式的
引入效果的权重 （就近原则）
- 同一个标签同时用三种样式表：行内>外部和内部
- 同一个标签同时用外部和内部：就近原则，css与对象直线距离最近
- 如何让外部样式比行内样式的权重？
- 在外部样式需要提升权重的属性值后，分号前写入 ！important
div{
background-color: green!important;
}
CSS选择器
基本选择器
- 标签选择器 div{color：red：}
- class选择器 <div class="box”></div> .div{color: brown;}
- id选择器(全局只使用一次) <div id="box”></div> #div{color: brown;}
- 通配符选择器 *{ }
- 群组选择器 .box,.box1,.box2{ }
层次选择器
- 后代选择器（包括所有叫div的子孙后代） .box div{}
- 子代选择器 所有叫div的儿子 .box>div{}
- 相邻兄弟 选择器1+选择器2{} 后面的一个兄弟 .div+.div1{}
- 通用兄弟 选择器1~选择器2{} .box .p1~.p6{}
伪类选择器
属性选择器
伪对象（伪元素）选择器
选择器权重
层叠性:当属性相同时，遵循就近原则。当属性不同时，进行叠加。
选择器的权重值：
* 0000
div 0001
.box 0010
#box 0100
行类样式 1000
！important 10000
.box div 10+1
- id选择器>标签选择器
- id选择器>class选择器
- class选择器>标签选择器
- 标签选择器>通配符选择器
伪类
a:link {
color: tomato;
}
a:visited {
color: gold;
}
a:hover{
color: green;
}
a:active{
color:aqua;
}
- 选择器:link{} 实现点击前效果
- 选择器:visited{} 实现点击后效果
- 选择器:hover{} 实现鼠标经过效果
- 选择器:active{} 鼠标点下到鼠标松开的效果
- 同时使用时，顺序不能改变l-v-h-a
- a标签点击前是蓝色，点击后是紫色
文字样式
文本无法复制
- ::selection{
background-color: transparent;
}
字母大小写转换text-transform
capitalize 将单词首字母转大写
文字大小 font-size：；
说明： 1） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。 2）单位还可以是pt，9pt=12px; 3）为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px; rem 4）使用绝对大小关键字 xx-small =9px x-small =11px small =13px medium =16px large =19px x-large =23px xx-large =27px
文字颜色 color: ;
- red
- 十六进制
- A-F 1-9进行6位数组合
- #ffffff
- #cccccc
- #123123
- #ff1122==>#f12
- rgba(red,green,blue,alpha)
- alpha 取值范围 0-1 0透明 1不透明
- red，green，blue取值范围0-255
文字字体：font-family：；
- 可以同时引入多个字体，字体之间用逗号隔开
- 默认从左边第一个开始识别，遇到能识别的字体就进行显示，如果都不能识别就显示浏览器默认字体（微软雅黑）
- 字体由多个单词构成或者中文字体需要用引号包括
- 中文字体和英文字体同时引入时，需要把英文字体靠左边
文字加粗： font-weight：；
- 关键词
- bold加粗
- bolder更粗（效果和bold一样，强调）
- normal 常规
- lighter 轻量的，细体
- 数值
- 取值范围100-900
- 400以下细体
- 600以上粗体
文字倾斜：font-style：；
- italic 倾斜
- oblique 倾斜（如果italic不生效就用oblique）
- normal 常规的
首行缩进：text-indent：；
- em是相对单位，相当于文本大小
- 如果文字大小为16px，则1em=16px
文本水平对齐: text-align:;
- left
- right
- center
- justify 两端对齐
- text-align-last:justify;单行两端对齐
行高： line-height：；（两行文字基线到基线的距离）
- 顶线
- 中线
- 基线
- 底线
- line-height：height； 只有一行文本时，行高=高可实现文本垂直居中
- 行高=1时可以清除行高
字符字间隙：letter-spacing：；
单词词间距：word-spacing：；
（上划，下划，删除）线 text-decoration：；
- overline 上划线
- underline 下划线
- line-through 删除线
- none 取消所有线
- 三线共行： text-decoration：overline underline line-through;
文字样式的复合写法：
- font：倾斜 加粗 字号/行高 字体样式；
- 例：font：italic bold 16px/16px '楷体'；
- 注意：不能改变其顺序，且最少需要同时设置字号和字体样式
背景
背景颜色background-color：；
- 关键词： red
- 十六进制
- A-F 1-9进行6位数组合
- #ffffff
- #cccccc
- #123123
- #ff1122==>#f12
- rgba(red,green,blue,alpha)
- alpha 取值范围 0-1 0透明 1不透明
- red，green，blue取值范围0-255
背景图片 background-image：url（）；
- 不会占据页面的位置
- 括号里面引号可写可不写
- 可以有多背景，用逗号隔开，先引入的显示在上面
背景图片平铺background-repeat：；
- repeat 平铺
- no-repeat 不平铺
- repeat-x 水平平铺
- repeat-y 垂直平铺
背景图片定位 background-positon：x y；
- 数值：
- backgroun-position：20px -50px;
- x越往左越大，x越往下越大
- 可取负数
- 关键词：垂直参数top center botton；水平参数 left center right
- backgrou-position：center center；==>background-position:center;
背景图片大小background-size：长 宽；
- 数值：可写一个值，也可以写两个值，也可以百分比
- 关键词：
- cover 将图片按比例放大填充满页面，多余的部分裁剪掉
- contain 将图片原本大小按比例放入页面
背景图片固定：background-attachment：；
- fixed 相当于浏览器窗口固定（默认效果）
- scroll 跟随页面滚动
背景图片的复合写法： background：yellow url（）no-repeat center top/cover fixed；
- 颜色 路径 平铺 位置/尺寸 定位
- 参数可以根据实际情况省略（写尺寸，必须搭配位置一起使用）
列表
表单 list-style-type：；
- disc
- circle
- square
- none
列表图片 list-style-image：url（）；
列表左边的小图标
列表图片位置 list-style-position：；
- outside 外面
- inside 里面
列表复合 list-style：；
- list-style：inside url（）disc；
- 常用：list-style：none；
表格
border-spacing：0；取消单元格与单元格的距离
border-collapse：； 合并边框线
- separate（默认）分开的
- collapse 合并线条
empty-cells：；隐藏空单元格（border-collapse会让它失效）
hide
table-layout：；表格大小算法
- fixed 固定 （固定宽度，不会随内容多少改变单元格宽度） 优点：固定，加快运行的速度,允许浏览器更快的对表格进行布局。 缺点：不够灵活），内容足够多的时候，会产生折行
- auto 自动的（列的宽度是由列单元格中没有折行的最宽的内容设定的。）
（优点：比较灵活，文本多的时候，可以直接撑开 缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。
浮动float
- float：；
- left
- right
- none
- 清除浮动clear：；
- clear：left；
- clear：right；
- clear：both；
浮动的特征:
1.原本纵向排列的元素会横着排列，兄弟关系的时候，前面的元素浮动，后面元素会进行补位
2.兄弟关系中，如果所有的元素都添加浮动，元素都会脱离文档流，然后挨着横向显示
3.如果行放不下:会折行显示
浮动带来的影响:
元素浮动.-=>脱离文档流，不占据页面空间，不参与高度计算---》如果父元素没有高度，则父元素的高度会产生塌陷效果。
如何解决高度塌陷问题?
1.添加一个空的元素(块级元素，比如div) ，给这个元素添加clear : both;就可以清除浮动带来的影响
2.给父元素固定的高度
3.添加伪类，给伪类设置清除浮动的样式
div:after{
content:"' ;
display:block;转化元素类型
clear：both;清除浮动
}
4.给父元素设置overflow:hidden;触发bfc(块级格式化上下文)
边框 border
复合写法border:1px solid red;
三个必须一起使用才有效果
- border-width
- border-color
- border-style
- solid 实线
- dashed 虚线
- double 双线
- dotted 点状线
- 练习：三角形和风车
间距
外间距margin：；
m0-20快速生成margin:0 20px;
- 负值，auto（使用前提：盒子要有宽度，不能有浮动和定位）（auto运用于页面版心）
- 单一外间距：margin-left：； margin-right：； margin-top：； margin-bottom：；
- 简写：
- margin：10px ； 上下左右外间距为10px
- margin；10px 20px; 上下10 左右20
- margin：10px 20px 30px ； 上10 左右20 下30
- margin： 10px 20px 30px 40px；上10 右20 下30 左40
- bug：
- 一、margin-top的传递问题： 父子关系中，一个父元素，当给子元素添加margin-top时，子元素的margin-top会传递给父元素。 解决办法： 1.给最近的父元素添加溢出隐藏overflow：hidden；触发bfc 2.给父元素添加border：1px solid transparent；（ transparent透明的实线）
3.将子元素margin换成父元素padding
- 二、margin外间距重叠问题： 兄弟关系中，两个上下相邻的盒子，给上面盒子添加margin-bottom，下面添加margin-top，这两个盒子垂直方向外间距会取最大值（水平方向会相加两个值） 解决办法：给下面盒子创建一个父元素并声明overflow：hidden；
内间距padding：；
- padding会把盒子撑大
- 没有负值和auto
- 单一写法和简写和margin一样
盒子模型 组成content+padding+border+margin
标准盒子模型box-sizing：content-box；
- 标准盒子模型的width（自己设置的width:10px;）===content
- 盒子大小=content（10px）+padding+border
- 实际占据空间：content+padding+border+margin
怪异盒子模型box-sizing：boder-box；
- 怪异盒子模型（自己设置的width：10px；）===content+padding+border
- 盒子大小： 设置的值（10px）
- 占据空间：设置的值+margin
盒子溢出overflow:；
- overflow:;
- visible 可见的（默认）
- hidden 隐藏
- auto 自动判断，超出时出现滚动条
- overflow-x：scroll；超出后水平方出现向滚动条
- overflow-y：scrol；
- 隐藏滚动条 ::-webkit-scrollbar { display: none;}
单行文本溢出显示小圆点：（overflow:hidden; white-space:nowrap；text-overflow:ellipsis;+宽度）
p{
width:200px;
height: 200px;
line-height: 16px;
background-color:brown;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
white-space：；剩余空间
- normal 折行（默认）
- nowrap不折行
- pre 不折行保留空格（回车会有折行效果）
- pre-wrap 折行保留空格
- pre-line 折行清除空格
text-overflow：ellipsis；小圆点（搭配overflow：hidden；）
多行文本溢出显示小圆点：
p{
width:200px;
line-height: 16px;
background-color:brown;
overflow: hidden;/*溢出隐藏*/
text-overflow: ellipsis;/*溢出小圆点*/
display: -webkit-box;/*将对象设置为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical;/*从上到下排列元素 还有个值horizontal水平的*/
-webkit-line-clamp: 2;/*不属于css规范属性，必须结合上面两行代码才有效果，表示显示的行数*/
}
width（不写高度）
overflow：hidden；
text-overflow：ellipsis；
display：-webkit-box；
-webkit-box-orient：vertical；
-webkit-line-clamp：2；
元素类型
行内（内联）元素
span，a， b ，strong，em，del，u
- 多个行内元素横向排列，设置宽高不生效
- display：inline；
块元素
p，div，h1-h6，hr，ul，ol，li，dl，dt，dd，form，fieldset，legend
- 纵向排列，独占一行，可以设置宽高
- display：block；
行内块元素（内联块）
img，input,textarea select
- 横着排列，可以设置宽高
- display：inline-block；
- img的display的值是inline，但表现特征是行内块元素
其他分类：置换元素（替换元素）与非置换元素
置换元素（相对于行内块元素）
含义：一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。
``特征：在不使用css修饰时，元素的标签和属性也会影响元素的显示
``可以近似理解成：内联块元素就是置换元素
img/input/textarea/canvas/select/iframe/object
非置换元素：除了置换元素以外的元素就是非置换元素
- inline 行类
- block 块
- inline-block 行内块
- list-item 列表
- none 隐藏
- table 表格
- table-cell表格单元格/row表格的行/row-group表格的行分组
行内块元素的对齐方式：
- vertical-align：；
- baseline 基线对齐（默认）
- middle 中线对齐
- bottom 底线对齐
- 两个行内块文本为兄弟时，如果第一个行类块文本是多行，第二个行内块会按照第一个行类块最后一行文本排列
图片的居中对齐：
vertical-align：middle；给图片父元素 line-height：height；text-align：center；
图片和块元素之间存在3-6px的间距：
原因：1.行内块元素的对齐方式是基线对齐。2.本质而言是元素类型不同
解决：1.vertical-align的值不为baseline。2.将图片的display的值为block；
元素类型分为：块元素、行内元素 其中img标签属于行内元素但也属于置换元素， 置换元素本身一般拥有固有尺寸（宽度，高度，宽高比），这些元素往往没有实际的内容，即是一个空元素,置换元素就是浏览器根据元素的属性和属性值，来决定元素的具体显示内容，大部分的置换元素的元素类型为inline-block;被称之为置换元素，所以置换元素可以直接设置大小。
定位 position：；
配合方位属性使用，值为0，也将方位属性写上
相对定位relative
参照物：原来的位置（原位置仍然保留）
固定定位fixed
参照物：浏览器窗口（脱离文档流）
静态定位static (默认值)
参照物:正常文档流
使用方位属性不生效
粘性定位sticky
参照物：初始情况下在正常文档流中，达到一定条件（top值）则参照浏览器窗口（原位置保留） 特征：当页面向上滚动时，当前元素始终停留在页面窗口内
绝对定位：absolute
参照物：相对于最近一级有定位（除static定位）的祖先元素，如果所有祖先元素都没有定位的话就相对于浏览器窗口。（脱离文档流）
注意：如果使用了margin：auto；再使用absolute，auto会失效。
绝对定位脱离文档流是全脱离，可以触发bfc（解决margin-top的传递问题）
定位（fixed和absolute）和浮动的区别：
- 浮动：半脱离文档流（文字环绕效果）可以触发bfc（解决margin-top的传递问题）
定位：全脱离文档流（文字遮挡效果）可以触发bfc（解决margin-top的传递问题）
<!---->
- 浮动：让纵向排列的元素横向排列
定位：通过某种方式让元素进行位置移动
- fixed/absolute/float都会让margin：auto；失效
<!---->
- 都会让行内元素变成块元素（效果：宽高生效）
父相子绝（父绝子绝/父固定定位子绝）
为什么要父亲相对定位，儿子绝对定位：因为父亲用绝对和固定定位会导致margin：auto失效
定位后的层叠顺序：
- z-index 层叠顺序 z-index属性不带单位，默认值为auto 理解为0，可以给负值。（定位以后才能使用）
- 没设置z-index时，最后写的对象会显示在最上面，
- 设置后，设置后数值越大越靠上
利用定位让元素居中
1.使用absolute/fixed（用relative的话left：50%参照物会有问题），top和left：50%；再margin-top：元素高度的一半；和margin-left：元素宽度的一半；
2.div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
3.calc 计算函数 支持+- 注意点：符号周围必须添加空格
.box {
width: 400px;
height: 300px;
background-color: red;
text-align: center;
line-height: 300px;
position: absolute;
/* calc 计算函数 支持+-
注意点：符号周围必须添加空格 */
top: calc(50% - 150px);
left: calc(50% - 200px);
}
宽高自适应
- 宽度自适应：
- 不给盒子设置宽度就是宽度自适应，默认情况下会找父元素或浏览器窗口的100%
- 宽度取值 auto和100%的区别：
- 元素没有添加盒子模型：效果一样
- 元素添加了盒子模型：
- 设置100%的情况
- 实际宽度：100%+盒子模型 =100%+padding+border
- 设置auto的情况
- 实际宽度：父元素或浏览器窗口的100%
- 高度自适应：
不给盒子设置高度就是高度自适应，由内容（文字，padding，border，图片）撑开。（默认值为auto）
- 设置固定高度缺点：
- 1.如果内容再次增加，会产生溢出，需要重新设置高度
- 2.如果内容很少，会有大量留白，页面不美观
解决办法：使用高度自适应
- min-height：；最小高度
- max-height：；最大高度
- min-width：；最小宽度
- max-height：；最大宽度
窗口自适应:
效果：窗口放大缩小不会有滚动条
`html，body{height：100%；}`
布局
左右布局：
- 左固定右边自适应
- 左边宽高固定，右边宽100%，高固定；左边左浮动，右边margin-left：左边盒子的宽；
- 使用 calc（）函数 +-*/都可计算
作用：动态计算高度或者宽度的剩余
- 左边宽高固定，右边宽calc（ 100% - 左边的宽度），左右都浮动
- 注意：运算符左右需要用空格隔开
上下布局：
上面固定，下面自适应
左中右布局：
- 左右固定，中间自适应
- 左右设置宽高且分别左右浮动。中间设置高度，不设置宽度，margin：左右盒子的宽度;
- 注意：需要把中间盒子要放在最后面
- 全部左浮动，左右设置固定宽度，中间用calc（100% - 左右的宽度）
BFC 块级格式化上下文（block formatting contexts）
概念：
特征：
1. 盒子内部不影响外部元素影响，也不影响外部
2. 触发bfc，里面的浮动元素也会参加高度计算
- 触发bfc的方法：（解决高度塌陷和子元素的margin-top作用于父元素问题）
1. html本身就是一个bfc
2. overflow的取值不为visible；可以取值hidden/scroll/auto
3. float的值不为none；可以取值left/right
4. 能够脱离文档流的定位absolute/fixed
5. display取值不为none；可取：inline-block；flex；inline-flex；inline-flex；table-cell，table-caption，
万能清除法：给父元素
父元素：：after{
content：；
display：block；
clear：both；
width：0；
height：0；
transform：scale(0)；
opacity：0；
visibility：hidden；
width：0；
height：0；
}
为什么不推荐overflow：hidden；解决高度塌陷问题
因为overflow：hidden；会使元素溢出后隐藏看不见，容易导致盒子里面的元素被隐藏。
隐藏元素的区别:
- display：none；不占位隐藏
- opacity：0；占位隐藏
- visibility：hidden；占位隐藏
- transform：scale(0); 占位隐藏 scale缩放
重置样式
@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body{
font-size:16px;
font-family: '微软雅黑';
}
ul,ol,li{
list-style:none;
}
h1,h2,h3,h4,h5,h6{
font-size:16px;
font-weight: normal;
}
b,strong{
font-weight: normal;
}
i,em{
font-style: normal;
}
a,u{
text-decoration: none;
}
img{
border:0;
display:block;
}
input,fieldset{
outline: none;
border:0;
}
.clear_fix:after{
content:'.';
clear:both;
height:0;
overflow:hidden;
display:block;
visibility: hidden;
}
.clear_fix{
zoom:1;
}
