标签选择器(TAG选择器)
css：div{}
html：
<div></div>
应用场景：1.去掉某些标签默认样式时
2.复杂选择器（如层次选择器）
群组选择器(分组选择器)
css：div,p,span{}
可以通过都好的方式给多个不同的选择器添加统一的css样式，达到代码的复用
通配选择器
*{}
给所有标签添加css样式
慎用（去掉所有标签的默认样式时可使用）
层次选择器
后代：M N
父子：M>N
兄弟：M~N
相邻：M+N
编写尝试2
后代
<head>
<style>
ul li{ 样式}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
后代选择器将只选择ul标签下的li标签也包括li标签内ul的li标签（父亲（ul）的孩子（li）的孩子（ul）的孩子（li））
父子
<head>
<style>
ul > li{ 样式;}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
父子选择器将选择ul标签下的li但不包含li中ul的li
（父亲（ul）的孩子（li））
兄弟
<head>
<style>
div ~ h2{ 样式;}
</style>
</head>
<body>
<h2>标题a</h2>
<div>块</div>
<h2>标题b</h2>
<h2>标题c</h2>
</body>
兄弟选择器会选择div标签下方的所有h2标签
如上所写则标题a没有样式而标题b和标题c有
相邻
<head>
<style>
div + h2{ 样式;}
</style>
</head>
<body>
<h2>标题a</h2>
<div>块</div>
<h2>标题b</h2>
<h2>标题c</h2>
</body>
相邻选择器会选择div标签下方的相邻的h2标签
如上所写则标题a标题c没有样式而标题b有
属性选择器
M[attr]（有该属性）
M[attr=value]（属性的值完全符合）
M[attr*=value]（属性的值包含value）
M[attr^=value]（属性的值的开始为value）
M[attr$=value]（属性的值的结束为value）
如：id="a-b"则a是开始b是结束
M[attr1][attr2]（同时拥有多个属性）
M为选择器
attr为属性
value为属性的值
如
<style>div[id=a]{ }</style>
就会选择div标签中拥有id属性且值为a的
伪类选择器
css伪类用于向某些元素添加特殊的效果，用于初始样式无法添加的情况。
:link（只对a标签）
:visited（只对a标签）
:hover（对所有标签）
:active（对所有标签）
若四个都生效则按顺序 L V H A
一般网站这样设置：a{} a:hover{}
:after（向后添加内容）
:before（向前添加内容）
通过伪类的方式给元素添加一段文本内容，用content属性
:checked（标签具有checked（选中）属性时改变样式）
:disabled（标签具有checked（选中）属性时改变样式）
:focus（输入框有光标时改变样式）
都是针对表单元素的
编写尝试3
a标签
<head>
<style>
a:link{color: red;}
/* 链接在未访问时为红色 */
a:visited{color: green;}
/* 链接在访问后时为绿色 */
a:hover{color: blue;}
/* 鼠标移到目标时修改属性 */
a:active{color: yellow;}
/* 鼠标按下时修改，抬起时还原 */
</style>
</head>
<body>
<a href="链接地址">链接文字</a>
</body>
一般情况下网站只设置
a{} （link visited active） a：hover
link visited active可以作为属性添加进选择器样式
hover和active
<head>
<style>
div{width: 100px;height: 100px;background-color: red;}
div:hover{background-color: blue;}
/* 鼠标移到目标时修改属性 */
div:active{background-color: yellow;}
/* 鼠标按下时修改，抬起时还原 */
</style>
</head>
<body>
<div></div>
</body>
after和before
<head>
<style>
div:before{content: "aaa";}
div:after{content: "ccc";}
</style>
</head>
<body>
<div>bbb</div>
</body>
显示效果为aaabbbccc
使用这个办法可以省去span标签的使用单独给aaa，ccc添加样式
清除浮动，添加小图标等（后面会讲）
：：两个冒号表示伪元素（后面会讲）
结构性伪类选择器
:nth-of-type()
:nth-child()
角标从1开始，1表示第一项，2表示第二项
n 表示从0到无穷，2n表示偶数项可做类似运算如3n，4n
<style>
li:nth-of-type(2){background-color: red;}
/* 如此则第二个li标签背景变红 */
li:nth-child(2){background-color: red;}
/* 如此则不变红 */
</style>
<ul>
<li></li>
<div>aaa</div>
<li></li>
<li></li>
</ul>
child选择的是从第一个li开始数的第二项，若第二项不是li则无效
type选择的是所有li中的第二个故生效
:first-of-type(对第一项生效)
:last-of-type（对最后一项生效）
:onle-of-type（若只有一项则生效，有两项则不生效）
样式继承
文字相关的样式可继承
布局相关的样式不可继承
<div>
<p></p>
</div>
如上则p标签内的内容可以继承选择器中div标签的样式
但仅限文字相关，布局相关不行
可以通过设置属性使布局相关继承（inherit）
在style中添加p{border:inherit;}使p标签继承
CSS优先级
- 相同样式（若重复则后面的优先级高）
- 内部样式和外部样式（优先级相同，如果设置了相同的样式则后写入的优先级高）
- 单一样式（style行间>id>class>tag>*>继承）
style行间指
<div style="样式"></div>这种形式
注：style行间权重1000，id 100 ，class 10， tag 1
!important提升样式优先级，但不合规
如
div{background-color: red !important;}则此时背景颜色为红优先级最高。
不能对继承属性优先级进行提升。
- 标签+类与单类
标签+类的优先级比单类高
如.box{color:red;}div.box{color:blue}两者之间后者优先级高
- 群组
在同一个等级下，群组选择器与单一相同，靠后写的优先级高）
- 层次（权重比较与约分比较）
权重比较
约分比较
尽量避免，写三层以内
盒子模型
组成：content（物品）
paading（填充物）
border（包装盒）
margin(盒子之间的间距)
content：width与height组成
padding：内边距（内填充）
padding-（left，right，top，bottom）可以单独设置一边
只有一个值时表示上下左右，两个值为上下/左右，四个值为上右下左
border：边框
margin：外边距（外填充）与padding类似
背景色填充到margin以内的区域
文字在content区域
padding不能为负但margin可以
margin为负时可能会出现两个盒子叠加的情况
box-sizing（57）
盒尺寸，可以改变盒形态
该属性可以以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认）|border-box
content-box：width、height（针对content）（默认）
border-box：width、height（content padding border）
不用计算一些值了
解决一些百分比的问题
margin叠加（58）
上下margin同时存在时会出现margin叠加问题
此时取值较大的作为叠加值
解决方案：
1.BFC规范
2.只给一个元素添加间距
margin传递（59）
其只会出现在嵌套结构中，只有margin-top会出问题
解决方案：
1.BFC规范
2.添加边框（泛用性不强）
3.用margin换成padding（里面的盒子动不了就动外面的盒子）
margin自适应居中
margin-left:auto;margin-right:auto可以实现居中（只能左右不能上下）
若想实现上下适应，以后会学
对宽和高不设置时，继续计算容器大小
小练习：61
标签分类
按类型：
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.内联标签之间会因换行产生间隙
注：span是用来修饰文本的，不用它来做布局，布局一般用块标签，修饰文本一般用内联标签。（块默认是上下布局）
(实现左右布局的解决方案：找到这两个元素的富容器)
inline-block：内联块（如input、select……）
1.挨在一起且支持宽高
2.内联标签之间会因换行产生间隙
3.支持所有样式
4.所占区域是一个矩形
按内容
Flow：流内容（有一些内容是会叠，表示网页中能够感知到的一些标签）
如：标题、块和区域可以感知到，大部分标签都为Flow的特点
Metadata：元数据（如：设置网页中的一些编码。）
如：title、link、style……一部分是可以感知到的，还有一部分是感知不到的。
Sectioning：分区（表示划分区域，除了常见的div标签以外，还有很多划分区域的）
Heading：标题（h1~h6）
Phrasing：措辞（对文本的一个修饰）
如:strong、em……基本为内联标签
Embedded：嵌入的
如：通过src引入图片，添加视频等的
Interactive：互动的（指用户和界面进行一些交互操作。—）
比如：输入框、下拉菜单等
按显示
替换元素（替换标签）：浏览器根据元素的标签和属性，来决定元素的具体显示内容。如img、img等
非替换元素：将内容直接告诉浏览器，将其显示处理。
如div、h1、p等
显示框类型
display
显示框类型：block、inline 、inline-block、none
注:
1.display:none→不占空间的隐藏
2.visibility:hidden→占空间的隐藏
标签嵌套规范
一些组合标签可以嵌套使用
ul、li
dl、dt、dd
table、tr、td
- 块标签可以嵌套内联标签：
<div>
<span></span>
<a href=“#”></a>
</div>
- 块标签不一定能嵌套块标签
块嵌套块：
<div>
<div></div>
</div>
3.内联标签不能嵌套块标签
a标签例外
<a href=“#”>
<div></div>
</a>
溢出隐藏
overflow：
visible:默认
hidden：隐藏
scroll：滚动条（一直显示）
auto：内容多时滚动条，少时没有
x轴、y轴：overflow-x、overflow-y 针对两个轴分别设置
透明度与手势
opacity（对整体进行透明操作）
opacity:0（透明）占空间~1（不透明）
0.5（半透明）
注：占空间、所有的子内容也会透明
rgba（对背景进行透明操作）
rgb : 0~1
注：可以让指定的样式透明，而不影响其他样式
cursor（手势）
default：默认箭头
move可移动的、pointer手型、help带问号
自定义鼠标样式
实现自定义手势：准备图片：.cur、.ico
cursor：url（./img/cursor.ico）,auto
最大、最小宽高
min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
百分比单位→换算：以父容器的大小进行换算
一个容器怎么适应屏幕的高：容器加height:100%; body:100%; html:100%
html,body{height:100%;}
.contrainer{height:100%;}能够自适应屏幕
默认样式
有些标签有默认样式，有些标签没有默认样式。
1.没有默认样式：
div、span……
2.有默认样式：
body、h1~h6、p、ul、……
body→margin：8px
h1→margin：上下 21.44px
h1→font-weight：bold（加粗）
p→margin：上下 16px
ul→margin：上下 16px padding：左 40px（默认点：list-style：disc）
a→text-decoration:underline;（下划线）
CSS重置样式（71）
CSSreset：
1.*{margin:0;padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body,p,h1,ul{margin:0;padding:0;}
2.ul{list-style:none;}（没有点）
3.a{tex-decoration:none;color:#666;}
默认颜色是蓝色
4.img{disply:block;}
图片和容器底部有一些空隙。
内联元素是对齐方式是按照文字基线对齐的，而不是文字底线对齐
vertical-align:baseline;基线对齐方式，默认
解决方案：img{vertical-align:bottom;}
写具体页面的时候或者写一个布局效果的时候：
1.写结构
2.CSS重置样式
3.写具体样式
float浮动
文档流
文档中可显示对象在排列时所占用的位置。
标签分为块内联，块标签的默认的排列方式是从上到下，内联标签的默认的排列方式是从左到右
float特性
加浮动的元素，会脱离文档流，会延着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
float取值
left：向左浮动
right：向右浮动
none：不浮动（默认）
浮动的元素可能会叠加在正常的文档流元素
float注意点
- float只会影响下方的元素
- 文字默认提升半层（可以实现图文混排效果）
文字不会被覆盖而会被挤开
- 不设置宽时由内容决定宽
- 换行排列（浮动元素排列不下会折行）
- 主要给块元素添加，也可给内联元素添加
float浮动的清除
上下排列：clear表示清除浮动（left清左浮动，right清右浮动，both全部清除）
嵌套排列
解决方案：
1. 固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
2. 父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
3. overflow:hidden（BFC规范），不推荐，父容器会影响到后面的元素。
4. display:inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
5. 设置空标签：不推荐，会多添加一个标签。
6. after伪类：推荐，是空标签的加强版，目前各大公司的做法。
如
clear:after{ content:'';clear:both;display:block;}
after伪类添加的内容默认为内联形式，需要转换成块
82.83为制作页面小练习
2212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
