目录
解答：样式表分为三类：
【行内>内部和外部：内部和外部看书写顺序（就近原则），后面会覆盖前面相同部分】
1）行内【内联、行间】
2）外部 <link rel="stylesheet" href="css/reset.css">
3)内部<style>.......</style>
# 外部样式表的导入（扩展）
1.link是html代码@import是css代码
2.link引入的方式会和html同时加载，@import方式：是先等html加载完成之后才会加载css
3.link没有兼容问题，@import有兼容问题
4.link引入的js是可以控制的，@import引入的js是无法控制。
选择器权重排列：
通配符=======标志：*，权重0
标签==========直接写标签名字，权重1
类============标志：.点 权重10
伪类========标志：一个冒号，权重10
id============标志：# 权重100
行内样式表权重1000。
后代和子代权重：是所有选择器相加之和
伪元素======标志：两个冒号（有时候1个也能成功）权重：1
属性========标志：[],权重10
补充：
!important权重最高。这个是写在属性的后面的
优先级顺序：行内>id>类=伪类=属性>标签=伪元素>通配符
解答：作用-----实现元素的横向排列
特点：
1）元素一旦浮动就会不占位置，后面元素会向前补齐；
2）覆盖不了文字和图片
3）左浮动：从左到右依次横向排列；右浮动：从右到左依次横向排列；
4）一行放不下，会自动换行；
5）如果没有定义宽度，则元素宽度由内容决定；
6）无论从前是什么元素，只要加了浮动就可以加宽高了。
解答：
从外观上分类：单/双
从特点上分类：
块元素：block
1.能加宽高，独占一行，竖着排列
2.宽度默认和父亲同宽
常见标签：div、p、ol、ul、li、dl、dt、dd、form、hr、h1-h6、header、footer、nav、main
section、figure、figcaption、article、aside、hgroup、option等
行内元素：inline
1.不能加宽高，横着排列
2.宽度默认由内容撑开
3.有时候上下内外间距可能加不上
常见标签：span、a、i、em、b、strong、u、s、del、sup、sub等
行内块元素：inline-block【 置换元素就是行内块元素，其余为非置换元素。】
1.能加宽高，横着排列
2.默认有3-5px的间距
常见标签：img、input、button、textarea、select等
元素类型的转换：通过display转换
display：block;=====转块
display:inline;=====转行内
display:inline-block;====转行内块
如果让你说3种类型：块、行内（内联）、行内块
如果让你说2种：块、行内（内联）
解答：
margin:0 auto; /*将div水平居中*/
在“子绝父相”的条件下，水平方向：left:50%;margin-left:子盒子宽度的一半；
垂直方向：top:50%;margin-top:子盒子高度的一半；
div里的内容居中：text-align:center;line-height:高度；
解答：position-----调整元素位置，实现覆盖的效果。
1.静态定位（默认定位，相当于没写）static
2.相对定位relative
1）从文档流角度：不会脱离文档流（不脱标），依然占据位置
2）有层叠性，可以通过z-index来调整层，值越大越靠上，支持负数，不能带单位
3）参照物：自己原来的位置
3.绝对定位absolute
1）从文档流角度：会脱离文档流（全脱标），不会占据位置
2）有层叠性
3）参照物：有定位的父级元素，如果都没有定位，那就是浏览器窗口的第一屏
这里父级元素的定位可以是除了静态之外的任何一种。
推荐：子绝父相
4.固定fixed
1）从文档流角度：会脱离文档流（全脱标）
2）有层叠性
3）参照物：浏览器窗口
5.粘性定位sticky
不滚动是相对，滚动是固定
=====================================================================
层叠性：意思就是元素的堆叠顺序，默认后面的会覆盖前面的，如果想手动调整可以通过z-index来调整。
z-index这个属性必须结合定位才能使用。默认值0.
====================================================================
定位的主要作用是用来调整位置的，也可以实现覆盖，不同的效果使用的定位模式是不一样的。
可以通过偏移值来调整位置，也就是top、bottom、left、right来调整位置。
一般覆盖效果用绝对定位。
广告或者左右2侧导航用固定定位。
吸顶用粘性定位
单纯的简单调一下位置可以用相对。
<style>
/* 利用边框设计三角形 */
/* 设置宽度和高度为0，其他方位的边框颜色设置为transparent透明 */
div:nth-child(1){
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid red;
}
div:nth-child(2){
width: 0;
height: 0;
border: 10px solid transparent;
border-left: 10px solid red;
}
/* 导航栏里的三角形 */
div:nth-child(3){
width: 50px;
height: 30px;
background-color: yellow;
position: relative;
}
div:nth-child(3) span{
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 10px solid red;
position: absolute;
top: 10px;
}
</style>
<body>
<div></div>
<div></div>
<div>导航<span></span> </div>
</body>解答:作用------研究块级元素布局规则
特点（布局规则）：
1.BFC⾥的盒⼦会在垂直⽅向上⼀个接⼀个的放置（竖着排列）
2.盒⼦垂直⽅向的距离是由margin决定的
3.每个元素margin的左侧，与包含块border左侧相接触
4.BFC是一个独立的容器，子元素不会影响外面的元素。
5.BFC的区域不会和浮动的元素发生重叠（浮动的元素不会覆盖BFC的区域）====应用：左右2栏布局，双飞翼布局
6.计算BFC高度的时候浮动的元素也会参与计算：应用：高度塌陷问题（子元素浮动了，父元素没有高了）
7.属于同一个BFC的元素会发生外间距重叠
更新：
- 使 BFC 内部浮动元素不会到处乱跑；
- 和浮动元素产生边界。
触发规则：
1.html就是一个BFC
2.浮动
3.定位：绝对和固定
4.overflow:hidden、auto、scroll
5.display:inline-block、flex
1）宽度自适应：
a)宽度不写或者写width:auto;（推荐）
总宽和父元素保持一致。
b)宽度写100%。
只是内容区宽度和父元素保持一致
2）高度自适应：
a)高度不写或者写height:auto;或者写最小高：min-height。
b)高度100%
写最小高的好处：如果盒子没有内容或者内容比较少，也能保证这个区域是存在的，如果内容多，就随着内容撑开。
即：子元素浮动了，就漂浮起来了，导致不占位置，撑不开父盒子，父盒子的高度受影响了。
解决方案：
1）、给塌陷的盒子写：overflow：hidden。
缺点：如果有元素定位定到了盒子外面，那就会隐藏掉。
2）、隔墙法：在最后一个浮动的元素后面添加一个空的div标签，然后写一个行内样式：clear:both。
缺点：增加了多余的标签，造成代码冗余。
3）、万能清除法：【 哪个盒子塌陷了，就给哪个盒子用这个类名。】
.clearfix::after{
content:"";
display:block;
clear:both;
width:0;
height:0;
overflow:hidden;
visibility:hidden;
}
1）兄弟关系：
外间距不会累加求和，而是选择最大值去用。
2）父子关系：
给子元素加上外间距，会把父元素带下来
解决方式：
1.让父亲触发BFC：overflow：hidden
2.给父元素加边框线：border-top:1px solid transparent
1）盒子阴影box-shadow：
水平位置 垂直位置 模糊度 阴影大小 颜色 inset(不写就是外阴影，写就是内阴影)。
可以写多阴影：之间逗号隔开。
2）文本阴影text-shadow：
水平位置 垂直位置 模糊度 颜色。
可以写多阴影：之间逗号隔开。
1. 继承指的是子元素继承父元素的样式
2. 只要是和文字相关的属性基本上都可以继承
color：文字颜色
font-size:文字大小
font-family：字体
font-style：文字样式
font-weight：文字加粗
text-decoration：修饰线
text-align：水平居中
line-height：垂直居中，行高
text-indent：首行缩进
text-transform:大小写转换 = uppercase：转大写///lowercase:转小写///capitalize:首字母大写
letter-spacing：字间距
word-spacing：词间距
3.list-style
4.list-style-type
5.list-style-position
6.list-style-image
7.border-collapse：表格边框线合并
以上属性都是可继承的。
1. 有些标签默认自带一些间距。
2. 浏览器有兼容问题，不同的浏览器对标签的默认值是不同的。
所以为了统一管理，全部清除掉，有需要自己去设置。
```css
html和body都要设置成100%
html,body{
height:100%;
}
em是一个相对单位，是相对于该元素的font-size而言的。
如果该元素的字号是16px，那么1em=16px 2em=32px
如果改元素的字号是20px，那么1em=20px 2em=40px，依次类推
======================================================
rem是一个相对单位，是相对于html的font-size而言的
如果html的字号是16px，那么1rem=16px，依次类推。
======================================================
vw是相对于视口宽度而言的。
1vw=视口宽度的1%
如果视口宽度是320px，那么1vw=3.2px
======================================================
vh是相对于视口高度而言的。
1vh=视口高度的1%
如果视口的高度是1080px，那么1vh=10.8p
1.谷歌chrome======内核(webkit)========前缀（-webkit-）
2.苹果safari======内核（webkit）======前缀(-webkit-)
3.火狐firefox=====内核（gecko）=======前缀(-moz-)
4.欧朋opera=======内核（presto）======前缀（-o-)
5.IE=============内核（trident）=====前缀（-ms-)
更新：
Opera: 以前是 presto 内核，Opera 现已改用 GoogleChrome 的 Blink 内核
Chrome: Blink(基于 webkit，Google 与 Opera Software 共同开发)
1.固定布局：以像素为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸;
2.百分比布局(流式布局)：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果
3.响应式布局：检测设备的宽度发生改变，就显示不同的布局规则。这种布局需要兼容各种设备工作量大，效率低下，代码累赘，会出现隐藏无用的元素，加载时间加长
4.媒体结合rem的布局
5.vw结合rem的布局
6.混合布局：将各种布局方案混用，一个项目当中可能会用到像素、百分比、媒体、vw和rem等各种技术，总之只要达到我们的布局效果即可.
<style>
.box1{
width: 300px;
height: 200px;
background-color: pink;
float: left;
}
/* 双飞翼布局-----让box2变成BFC */
.box2{
height: 400px;
background-color: aquamarine;
overflow: hidden;
}
.box3{
width: 300px;
height: 200px;
background-color: yellow;
float: right;
}
.left{
width: 100px;
height: 600px;
background-color: red;
float: left;
}
/* 左右布局------右边盒子变成BFC */
.right{
height: 600px;
background-color:green;
overflow: hidden;
}
</style>
<body>
<!-- 双飞翼布局 -->
<div class="box1">双飞翼布局-左</div>
<!-- 先完成box1&box3的固定,再管box2 -->
<div class="box3">双飞翼布局-右</div>
<div class="box2">双飞翼布局-中</div>
<br>
<!-- 左右布局 -->
<div class="left">左右布局--左边固定</div>
<div class="right">左右布局--右边变化</div>
</body> <style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
/* 圣杯布局：顶部和底部的高度固定死，中间高度自适应(中间的高度跟随浏览器)。 */
body {
display: flex;
/* 改变轴向 */
flex-direction: column;
}
.top {
height: 100px;
background-color: pink;
}
/* 弹性盒子实现双飞翼布局 */
.center {
background-color: aqua;
flex: 1;
display: flex;
}
.left {
width: 100px;
height: 100%;
background-color: red;
}
.zhong {
flex: 1;
background-color: green;
}
.right {
width: 100px;
height: 100%;
}
.bottom {
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="top">top</div>
<!-- 中间是一个双飞翼布局 -->
<div class="center">
<div class="left">left</div>
<div class="zhong">zhong</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
</body>
鼠标滑过显示的内容。【每一个标签都有title属性】
1） thead：头、页眉
2） tbody：身体、主体
3） tfoot：脚、页脚
1）hidden：隐藏
2）auto：自动，当内有有超出才会产生滚动条（建议用）
3）scroll：滚动条（不太推荐）
4）visible：显示（默认值）
5） inherit:从父元素继承。（所有属性都有）
6）对于overflow我们可以只写x或者y
a) overflow-x b) overflow-y
<meta charset="UTF-8">
charset属性规定html的编码格式。有时候网页出现乱码就是因为没有设置这个属性。
DOCTYPE的作用：声明文档类型
alt: 图片加载不出来时候的提示文字，title是鼠标划过提示文字
内容（content）、内间距(padding) 、 边框（border）、外间距（margin）
书写方式：
内间距不可以写负数
外间距可以写负数
padding:10px；======一个值是，上下左右都一样。
padding:10px 20px;======两个值，分别是上下 左右。
padding:10px 20px 30px;====三个值，分别是上 左右 下。
padding:10px 20px 30px 40px;====四个值，分别是：上右下左
外间距同理。
1） 标准盒子模型（w3c盒子）：box-sizing:content-box;（默认值，不写就是标准盒子）
我们自己定义的width指的是内容区的宽度，加边框和内间距会撑大盒子
2） 怪异盒子模型(IE盒子)： box-sizing:border-box;
我们自己定义的width指的是：内容+左右内间距+左右边框线之和
加边框和内间距不会撑大盒子的
1.加宽度
2.超出隐藏：overflow:hidden;
3.不换行 white-space:nowrap;
4.加省略号：text-overflow:ellipsis
1.display:none;元素彻底不见了，不占位置
2.visibility:hidden;只是不可见，依然占位置
3.透明度：【rgba只能让背景色透明/// opacity可以让整体都透明】
opacity:0;透明度调整成0，只是不可见，依然占位置、取值区间0-1
IE浏览器opacity的写法：filter:alpha(opacity=值)，取值范围：0-100
rgba也可以调整透明度，取值区间0-1
用来实现页面中不同位置的快速跳转的。
核心就是利用超链接结合id选择器去用
```css
@media all and (min-width:640px) and (max-width:1024px)
{
body{
min-height:768px
}
}
查询所有的设备，如果设备大小在640-1024px之间，那么body的最小高度为768px.
标签中一个单词的颜色