标签群组通配选择器
1.标签选择器
css：div{}
html：
使用场景：
1.去掉某些标签的默认样式时
2.复杂的选择器中，如：层次选择器
2.群组选择器（分组选择器）
css：div,p,span{}（用逗号隔开）
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用，让css写起来更加简单灵活
3.通配选择器
*{ }
使用场景：
1.去掉所有标签的默认样式时
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
层次选择器
1.后代：M N
2.父子：M>N
3.兄弟：M～N（当前M下面的所有兄弟N标签）
4.相邻：M+N（当前M下面相邻的N标签）
属性选择器
M[attr]：M元素选择指定为attr属性的集合
M[attr=（完全匹配）value]：M元素选择指定为attr属性与value值的集合
M[attr*=（部分匹配）value]：M元素选择指定为attr属性并且包含值为value的集合
M[attr^=（起始匹配）value]：M元素选择指定为attr属性并且起始值为value的集合
M[attr$=（结束匹配）value]：M元素选择指定为attr属性并且结束值为value的集合
M[attr1][attr2]组合匹配）：M元素选择满足多个属性的集合
hover等伪类选择器
伪类选择器1️⃣（M:伪类{}）
css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
1.link【访问前的样式】只能添加给a标签
2.visited 【访问后的样式】只能添加给a标签
3.hover【鼠标移入时的样式】可以添加给所有的标签
4.active 【鼠标按下时的样式】可以添加给所有的标签
如果四个伪类都生效，一定要注意顺序：L V H A
清理缓存：shift+ctrl+del
注：一般的网站都只设置 a{}（link visited active） a：hover{}
after等伪类选择器
伪类选择器2️⃣
after、:before 【通过伪类的方式给元素添加一些文本内容，使用content属性】
两个冒号表示伪元素
checked、:disabled、:focus（输入框鼠标进入时改变）【都是针对表单元素的】
结构伪类选择器
伪类选择器3️⃣
nth-of-type( ) :nth-child( )
first-of-type( ) :first-child( )
last-of-type( ) :last-child( )
only-of-type( ) :only-child( )
角表从1开始，1表示第一项，2表示第二项
n值 表示从0到无穷大
1.隔行换色
设置角标为2n：偶数行
设置角标为2n+1:奇数行
2.nth-of-type()和nth-child()之间的区别
type：类型（在相同标签下作用）
child：孩子（在同一级下按顺序作用于标签）
css的样式继承
1.文字相关的样式可以被继承（可以作用到副元素上，子元素是可以继承的）
2.布局（比如表格）相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性 inherit 值）
单一样式的优先级
相同样式的优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高
单一样式优先级
style行间 > id > class > tag（标签） > * > 继承
注：
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
important群组等优先级
1.！important
提升样式优先级，非规范方式，不建议使用。（无法提升继承的优先级）
2.标签+类与单类
标签+类 > 单类
3.群组优先级
群组选择器与单一选择器的优先级相同，靠后写的优先级高。
层次的优先级
1.权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100
不是累加比较，是根据等级比较
2.约分比较
ul和span优先级相同，.hello与.box的优先级相同，约去
则上方li p input{}，下方#elem{}，上方的权重大于下方的权重，所以第二个优先级大
尽量写三层以内，优化代码
css盒子模型
组成
content（物品）->padding（填充物）->border（包装盒）->margin（外边距 盒子与盒子之间的间距）
content：内容区域 width和height组成的
padding：内边距（内填充）
只写一个值number：30px（上下左右）
写两个值number：30px 40px（上下、左右）
写四个值number：30px 40px 50px 60px（上、右、下、左
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
margin：外边距（外填充）书写方式类似于padding
注：1、背景颜色会填充到margin以内的区域（其他部分也能被填充，且不能被修改，不包括margin区域）
2、文字会显示在content区域
3、padding不能出现负值，margin是可以出现负值
box-sizing改变盒模型
box-sizing属性允许您一以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）｜border-box
盒尺寸，可以改变盒子模型的展示形态。
1.默认值：content-box：width、height->content
2.border-box：width、height->content padding border
3.使用场景
1.不用计算一些值
2.解决一些100%的问题
<head>
<style>
#box{ width: 200px;height: 200px;background: red;border:10px blue solid;
padding: 30px;margin: 50px;
box-sizing:border-box;}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
盒模型之margin叠加问题
margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。（会取上下中值较大的作为叠加的值）
解决方案：
1、BFC规范
2、想办法只给一个元素添加间距。
<head>
<style>
#box{ width: 200px;height: 200px;background: red;margin-bottom: 30px;}
#box{ width: 200px;height: 200px;background: blue;margin-top: 20px;}
</style>
</head>
<body>
<div id="box1">这是一个盒子</div>
<div id="box2">这是一个盒子</div>
盒模型之margin传递问题
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。
解决方案：
1.BFC规范
2.给父容器加边框
3.margin换成padding（加给副元素，不是主元素）
<head>
<style>
#box1{ width: 200px;height: 100px;background: red;padding-top: 100px}
#box2{ width: 100px;height: 100px;background: blue;}
</style>
</head>
<body>
<div id="box">
<div id="box2"></div>
</div>
css盒子模型之扩展
1.margin自适应居中
margin左右自适应是可以的，但是上下自适应不行（会给其他样式产生冲突，若想实现上下自适应的话，需要在第二大部分进行学习）
<head>
<style>
#box{ width: 400px;height: 100px;background: red;margin:0 auto;}/*居中*/
</style>
</head>
<body>
<div id="box"></div>
</body>
2.不设置content的现象
width、height不设置的时候，对盒子模型的影响：会自动去计算容器的大小，节省代码
<head>
<style>
#box1{height: 300px;width: 300px;background: red;}
/* #box2{height: 100%;width: 100px;background: blue;color: white;padding-left: 30px;border-left: black solid;} */
#box2{height: 100%;background: blue;color: white;padding-left: 30px;border-left: black solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"> 这是一段文字 </div>
</div>
按类型划分标签
block：块（div、p、ul、li、h1…）
1）独占一行
2）支持所有样式
3）不写宽的时候，跟父元素的宽相同
4）所占区域是一个矩形
inline：内联（span、a、em、strong、img…）
1)挨在一起的
2）有些样式不支持，例如：width、height、margin（左右不支持，上下不支持）、padding
3）不写宽的时候，宽度由内容决定
4）所占的区域不一定是矩形
5）当两个内联标签写完后中间会有个空隙：换行产生空隙，可以通过修改样式解决
inline-block：内联（input、select…）
1)挨在一起，但是支持宽高
2)既有块的特性，又有内联的特性（存在空隙）
注：布局一般用块标签，修饰文本一般用内联标签
按内容划分标签
Flow：流内容（包含了以下所有内容）
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的
按显示划分标签
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容，如：image、input…
非替换元素：将内容直接告诉浏览器，将其显示出来（只写标签就可以，不需要通过属性来操作）如：div、h1、p…
display显示框类型
block
inline
inline-block
none（让指定标签不在页面中显示，不占空间的隐藏）
visibility：hidden（占空间的隐藏）
<style>
div{width:100px;height: 100px;display: inline;background: red;}
span{width:100px;height: 100px;display: block;background: red;}
</style>
标签嵌套规范
块标签可以嵌套内联标签
块标签不一定能嵌套块标签（绝大部分可以）
但是p标签里面不能嵌套div标签
内联标签不能嵌套块标签
特殊：a标签可以
但两个a标签不能嵌套在一起
overflow溢出隐藏
visible：默认
hidden（会对字进行剪切）
scoll（会出现滚动条x轴与y轴）
auto（只有y轴有滚动条，当内容多的时候出现，内容少不出现）
overflow-x，overflow-y针对两个轴分别设置
透明度与手势
opacity（占空间）
0（透明）～1（不透明）
0.5（半透明）
<head>
<style>
div{width: 100px;height: 100px;background: red;opacity: 0.5;}
</style>
</head>
<body>
<div>这是一个块</div>
<p>这是一个段落</p>
rgba（）：0～1
可以只针对背景操作，不针对文字，不影响其他样式
<head>
<style>
#div1{width: 100px;height: 100px;background: red;opacity: 0.5;}
#div2{width: 100px;height: 100px;background: rgba(255,0,0,0.5);;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<p>这是一个段落</p>
<div id="div2">这又是一个块</div>
</body>
cursor：手势
default：默认
point 手形
move可移动样式
help鼠标后面有问号
要实现自定义手势：
准备图片：.cur .ico
cursor:url(目标路径/xxx.ico),auto;
最大最小宽高
min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
%单位：换算->以父容器的大小进行换算的
一个容器怎么适应屏幕的高：容器加height：100%；body：100%；html：100%
写法：html,body{height:100%;}
. container{height:100%;}
css默认样式
有些标签有默认样式，有些标签没有默认样式。
1.没有默认样式：
div、span、…
2.没有默认样式：
body->margin:8px
h1…h6:->margin:上下 21.440px
p->margin:上下 16px
ul->margin:上下 16px padding:左 40px
默认点：list-style：disc
a->text-decoration:underline
css重置样式（css reset）
简单的CSS reset：
1.*{margin:0;padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body,p,h1,ul{margin:0;padding:0;}
2.ul{list-style:none;}
3.a{text-decoration:none;color:#666;}
4.img{display:block;}
问题的现象：图片跟容器底部有一些空隙。
原因：内联元素的对齐方式是按照文字基线对齐，而不是文字底线对齐的。
基线对齐方式，默认值：verlical-align:baseline；
img{vertical-align:bottom;} 解决方式是推荐的（或者display:block;)
5.写具体页面的时候或一个布局效果的时候：
1、写结构
2、CSS重置结构
3、具体样式
float浮动概念及原理
文档流
文档流是文档中可显示对象在排列时所占用的位置。
float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或者靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值
left
right
none（默认）
<head>
<style>
body{border: 1px black solid;}
#box1{width: 100px;height: 100px;background: yellow;float:left}
#box2{width: 200px;height: 200px;background: red;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
float注意点整理
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列（浮动元素在父容器当中排列不下的时候，就会折行排在下面）
主要给块元素添加，但也可以给内联元素添加
<head>
<style>
body{border: 1px black solid;}
#box1{width: 100px;height: 100px;background: yellow;}/* 下面的浮动不会影响上面的内容 */
#box2{width: 200px;height: 200px;background: red;float: left;}
#box3{width:300px;height:300px;background: blue;}
#box4{height:10px;background: green;float: left;}/* 浮动的默认宽根据内容长度来决定 */
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3">文字文字文字文字</div><!-- 内容默认高于背景 -->
<div id="box4">这个块没有宽度</div>
</body>
清除float浮动
利用clear属性清除浮动：(left,right,both)
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果
父元素浮动：不推荐，因为父容器浮动会影响到后面的元素
overflow：hidden(BFC规范），如果子元素想溢出，那么会受到影响
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素
设置空标签：不推荐，会多添加一个标签
after伪类：推荐，是空标签的加强版，目前各大公司的做法(clear属性只会操作块标签，不会影响内联标签）
<head>
<style>
#box1{width: 100px;height: 100px;background: red;float:left}
#box2{width: 200px;height: 200px;background: blue;clear: left;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
