web学习第三周

1.css选择器

1.标签选择器(TAG选择器）

1.div{}——< div>< div>
使用的场景：
1.去掉弄些标签的默认样式
2.复杂选择器中，如层次选择器

2.群组选择器 (分组选择器）

可以通过逗号的形式，给多个不同的选择器添加统一的css样式，来达到代码的复用。
用法：div，#text，.title{——]

3.通配选择器

*{} ~~~~div,ul,li,p,h1,h2,…
注意：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
1.去掉所有的标签默认样式

4.属性选择器

1M【atter】{}
=：完全匹配
=*:部分匹配
^=：起始匹配
$=:终止匹配
【】【】【】【】可以一起组合使用

5.伪类选择器

M;伪类
：link访问前的样式（只能给a标签加）
: visited访问后的样式（只能给a标签加）
：hover 鼠标移入是的样式
：active鼠标按下时的样式
注意:一般的网站都只设置
a{}（link，visted，actine）a：hover{}
：after，：before 通过伪类的方式给元素添加一个文本内容。
：checked，;disabled,；focus(在光标落的地方变色)都针对表单元素。（都是表单的一个属性)

6.结构伪类选择器

nth-of-type()
nth-child（）
区别：一大一小
角标是从1开始的，1表示第一项//2表示第二项//n表示从0到无穷大

2.css样式的继承

1.文字可以被继承
2.布局相关的不能被继承
实操：

注意;可以在头文件中改变添加一个< P>中border:inherit；

单一样式的优先级

1.当在同一个stytle中设置两个不一样的颜色样式，下边显示的是第二个样式（相同样式的优先级）
2.内部样式和外部样式的优先级
后面的优先级高于前面的
3.在单一样式1优先级中：stytle>id>class>tag>*>继承

最后显示出来的是red
注意：stytle权重~1000
id~100
class~10
tag~1

4. importment群组优先级

！importment不建议使用（不能对继承的提高）
在之前的优先级中添加这个，就会使此样式变得优先

标签+类>单类
群组优先级和单一的一样，靠后的优先级大。

层次优先级

1.权重比较
ul li .box p input{}（进行权重比较）
.hello span #elem{}
2.月份比较
ul li .box p input{}
.hello span #elem{}

4.css盒子模型

一.组成：content(物品）------padding（填充物）-------border（包装盒）------margin（盒子和盒子之间的距离）
2.content：内容区域 width和height组成的
padding:内边距（内填充）number：30px注意:上下左右都可以用英文来变化。
1.只写一个值**：上下
2.两个😗*上下左右。
3.写三个值不建议
4.四个值30px 40px 50px 60px(上、右、下、左、）

二.magin：外边距（外填充）

2.box-sizing

注： 盒尺寸，可以改变盒子模型的展示形态
默认值：content-box：width、height->content
border-box :width、height->content padding border
使用场景：（box-sizing：border-box）
不用再去计算一些值
解决一些100%的问题

盒子模型的问题.margin叠加问题

1.出现上下margin同时存在时，会取上下中值较大的作为叠加的 值。

解决方案：只设置一个margin的值

2. margin的传递（只在嵌套结构中，只针对margin-top结构中)

解决方案：加一个边框。或者将margin换成padding。
扩展：1.margin左右自适应都是可以的，但是上下自适应是不行的（第二大部分解释上下）。9margin：auto。
2.width ，height不设置的时候，对盒子模型的影响，会自动计算容器的大小，节省代码。
练习：

五.标签分类

1.类型（block;块inline：内联；inline-block：内联块）

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. 内容

3.显示
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
非替换元素：将内容直接告诉浏览器，将其显示出来。

显示框类型（display）

1block：可以改变显示框的类型，首先宽高啥的，inline都不支持，但是在使用一个，display:block或者为display：block-inline(这些都可以使它换一个属性）
display：none 不占空间的隐藏
visibility:占空间的隐藏

标签嵌套规范

ul、li
dl、dt、dd
table、tr、td
块标签，块标签可以嵌套内联标签。
块标签不一定能嵌套块标签。
内联标签不能嵌套块标签。
（a标签是一个列外）

溢出隐藏

overflow：默认
hidden
scroll(出现滚动条）
auto（只有右侧有滚动条，当内容多的时候自动显示滚动条）
x轴y轴
overflow-y
overflow-x
针对两个轴分别进行设置

透明度与手势

opacity：0(透明)~1(不透明）（占空间）
0.5：半透明
特点：占空间，所有的子内容也会透明。
如果只想让块透明，rgba操作可以（专门针对背景）
手势操作
cursor:move、
default：默认箭头
要实现自定义鼠标样式
准备图片：.cur、.ico
cursor：url（./img/cursor.ico），auto

最大最小宽高！

min-width、min-height
max-width、max-height
%单位：以父容器的单位进行换算
注意;一个容器怎么适应屏幕的高：容器加height：100%；body：100%；html100%
html、body（height100%)
.contrainer（height100%)

css默认样式

1.没有默认样式的;div、span、
2.有默认样式的：
body-> marign；；8px.
h1->margin:上下21.44px
p——>marign：16px
ul——>margin；上下16px；padding：左40px

css重置样式（cssreset）

1.通配的优点：一般和hover搭配使用。

float浮动

注意;

清除浮动float

1.一般用clear：both