web前端学习——3

一.拨云见日

42.CSS选择器

标签选择器（TAG选择器）
css：div{}
html：< div>
1.去掉某些标签的默认样式时
2.复杂的选择器中，如层次选择器

群主选择器（分组选择器）
css：div，p，span{}
可以通过逗号的方式，给多个不同的选择器添加css样式，来达到代码的复用

通配选择器
*{}


注意：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用
使用场景：
1.去掉所有标签的默认样式

后代：M N { }
父子：M>N { }
兄弟：M~N { }当前M下的所有N标签
相邻：M+N { } 当前M下面相邻的N标签

属性选择器
= :完全匹配
*= :部分匹配
^=：起始匹配
$=结束匹配
[ ][ ][ ] ：组合匹配

43.伪类选择器

CSS伪类用于想某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

M：伪类{}

:link 访问前的样式 （只能添加给a标签）
:visited 访问后的样式 （只能添加给a标签）
:hover 鼠标移入前时的样式 （添加给任何标签）
:active 鼠标按下时的样式 （添加给任何标签）
注：
1.link、visited只能给a标签添加，hover、active可以给所有的标签加。
2.如果四个伪类都生效，一定要注意顺序：L V H A
3.一般的网站只这样去设置：a{} a:hover{}

:after、：before 通过伪类的方式给元素添加一个文本内容，使用content属性

:checked、:disabled、:focus 针对表单元素

结构性伪类选择器

:nth-of-type（） :nth-child()
角标是从1开始的，1表示第一项|n值 从0到无穷大
可以利用n进行隔行运算

:first-of-typr、:first-child 第一项
:last-of-type、last-child 最后一项
:oniy-of-type、only-child 只有一项时
区别：
type：类型
child：孩子

##44.CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承（默认是不能继承的，但可以设置继承属性 inherit值 ）

45.CSS优先级

相同样式的优先级:

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

其文本的样式会优先呈现蓝色

内部样式与外部样式

内部样式与外部样式的优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式的优先级

style行间>id>class>tag>*>继承

注：
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1

！improtant
提升样式的优先级，非规范方式，不建议使用（不能针对继承的属性进行优先级的提升）
标签+类与单类
标签+类的优先级>单类

群组优先级
群组选择器与单一选择器的优先级相同，靠后写的

层次优先级

1.权重比较

2.约分比较

46.CSS盒子模型

组成：

content 物品
content：内容区域 width和height组成的
padding 填充物
padding：内边距（内填充）
margin：外边距（外填充）

border 包装盒
margin 盒子与盒子之间的间距
注：
1.背景颜色会填充到margin以内的区域
2.文字会出现在content区域
3.padding不能出现负值，margin是可以出现负值

box-sizing：盒尺寸，可以改变盒子模型的展示形态
box-sizing属性允许你以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）|boder-box
使用场景：
1.不用再去计算一些值
2.解决一些百分比的问题

盒子模型的一些问题

margin叠加
当给两个盒子同时添加上下外边距的时候，就会出现叠加问题。
这个问题只有在上下有，左右是没有这个叠加问题的。

回取上下的中比较大的值作为叠加的值。
解决方法
1.BFC规范
2.想办法只给一个元素添加间距

margin传递
margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的。

解决方案
1.BFC规范
2.给父容器加边框
3.margin换成padding

margin自适应居中


扩展：
1.margin左右自适应是可以的，但是上下自适应是不行的。

不设置content的现象
会自动去计算容器的大小，节省代码

46.标签分类

按类型

block：块
比如：div、p、ul、li…
特性：
1.独占一行
2.支持所有样式
3.不写宽的时候，与父容器相同
4.所占区域是一个矩形

inline：内联
比如：span、a、em、strong、img…
特性：
1.挨在一起的
2.有些样式不支持，例如 width、height、margin、padding
3.不写宽度的时候，与内容决定
4.所占的区比一定是矩形
5.内联标签之间会有空隙，原因是换行引起的

inline-block：内联块
比如：input、select…
特性：有块的特性，也有内联的特性
1.挨在一起，支持宽高

注：
布局一般用块标签，修饰文本一般用内联标签

按内容

Flow：流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的

按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
例如：img、input…
非替换元素：将内容之间告诉浏览器，将其显示出来
例如：div、h1、p…

47.显示框类型

display
block
inline
linline-block
none

注：display:none与visiblity:hidden区别
display:none是不占空间的隐藏
visiblity:hidden:是占空间的隐藏

48.标签嵌套的规范

ul、li
dl、dt、dd
table、tr、td

块标签可以嵌套内联标签
块标签不一定可以嵌套内联标签

内联不能嵌套块

特殊：a标签

49.溢出隐藏

overflow
visible：默认
hidden：隐藏
scroll：出现滚动条
auto：自适应
x轴、y轴:overfiow-x、overflow-y针对两个轴分别设置

50.透明度与手势

透明度
opacity：
0（透明）~1（不透明）
0.5半透明
注：占空间，所有的子内容也会透明

rgba（）：0~1
注：可以让指定的透明

手势
cursor：
defaut：默认
自定义鼠标样式
准备图片：文件的后缀名为.cur、.ico

51.最大、最小宽高

min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
换算：以父容器大小进行换算

52.CSS默认样式

有些标签有默认样式，有些标签没有默认样式
没有默认样式：
div、span…
有默认样式：
body、h1…h6、p、ul、…
默认值：

52.CSSreset（重置样式）

{margin：0;padding：0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
更好的：
body、p…{margin：0;padding：0;}
ul{ list-style：none; }
去掉默认的点
a{ text-decoration:none;color:#666;}
img{ display:block; }
图片的现象：图片跟容器底部有一些空隙。内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐。
vertical-align:baseline; 基线对齐方式（默认值）
img{ vertical-align:bottom;} 底线对齐
写具体页面的时候或一个布局效果的时候：
1.写结构
2.CSS重置
3.写具体样式

53.float浮动

文档流：
文档流是文档中可显示对象在排列时所占用的位置

float特性
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值
left
right
none（默认）

float注意点：

1.只会影响后面的元素。
2.内容默认提升半层（图文混排效果）。
3.默认宽根据内容决定。
4.换行排列。
5.主要给块元素添加，但也可以给内联元素添加。

利用clear属性清楚float浮动

如何清除浮动
上下排列：clear属性，标识清楚浮动的，left、right、both

1.固定宽高： 不推荐，不能把高度固定死，不适合做自适应的效果
2.父元素浮动： 不推荐，因为父容器浮动也会影响到后面的元素
3.overflow : hidden(BFC规范) , 如果有子元素想溢出，那么会受到影响。
4.display: inline-block(BFC规范),不推荐，父容器会影响到后面的元素。
5.设置空标签：不推荐，会多添加一个标签。
6.after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签对内联标签不起作用）