web前端开发技术教学第三周 10.30

一 CSS

1 CSS选择器

1 标签选择器（TAG选择器）

使用场景：
1.去掉某些标签的默认样式
2.复杂的选择器中，如：层次选择器

2 群组选择器

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。

3 通配选择器

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

4 层次选择器

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

 div h2{background-color: red;}
 div~h2{background-color: red;}
 div+h2{background-color: red;}
       

5属性选择器

M[atter] {}
=:完全匹配
*=：部分匹配
^=:起始匹配
$=:结束匹配
[][][]:组合匹配
示例：

div[class=box]{background-color: blue;}
div[class*=search]{background-color: blue;}
div[class^=search]{background-color: blue;}
div[class][box]{background-color: blue;}

6 伪类选择器

css伪类用于像某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。
格式：M：伪类{}
：link 访问前的样式（只能添加给a标签)
：visited 访问后的样式 （只能添加给a标签)
：hover 鼠标移入时的样式 (可以给所有标签添加）
：active 鼠标按下时的样式 (可以给所有标签添加）
注意：一般的网站都只设置a{} （link visited active）a：hover{]
示例：

div{background:red }
div:hover{background-color: blue;}
div:active{background-color: brown;}
a:link{color: red;}
a:visited{color: blue;}

：after ，：before 通过伪类的方式给元素添加一段文本内容，使用content属性
：checked，：disabled，：focus 都是针对表单元素的
示例：

div:after{content:"world";color: blue;}

结构性伪类选择器
nth-of-type（） nth-child（）
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大
first-of-type
last-of-type
only-of-type

li:nth-of-type(2n+1){background-color: red;}
li:first-of-type{background-color: red;}
li:last-of-type{background-color: red;}

2 css继承

文字相关的样式可以被继承，布局相关的样式不能被继承（但可以设置继承属性）

3 css优先级

1.相同样式优先级
当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的清况。
2.内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级更高
3.单一样式的优先级
style行间>id>class>tag>*>继承
style行间 权重1000
id 权重100
class 权重10
tag 权重1
4.！mportant 提升样式优先级，非规范操作，不建议使用（不能针对继承的属性进行优先级的提升）
5.标签+类与单类 标签＋类>单类
6.群组优先级 群组选择器与单一选择器优先级相同，靠后写的优先级高。
7.层次优先级
1.权重比较
ul li .box p input{ } 1+1+10+1+1
.hello span #elem{ } 10+1+100
2.约分比较
ul li .box p input{ } li p input{ }
.hello span #elem{ } #elem{ }

4 css盒子模型

1.基础知识

组成：content（物品）→padding（填充物）→border（包装盒）→margin（盒子与盒子之间的间距）
content：内容区域 width和height组成的
padding：页边距（内填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下，左右）
写四个值：30px 40px 50px 60px(上，右,下，左）
单一样式只能写一个值：padding-left
padding-right
padding-top
padding-bottom
margin：外边框（外填充）
只写一个值：30px（上下左右）
写两个值：30px 40px（上下，左右）
写四个值：30px 40px 50px 60px(上，右,下，左）
单一样式只能写一个值：margin-left
margin-right
margin-top
margin-bottom
注意：1.背景颜色会填充到margin以内的区域
2.文字会在content区域
3.padding不能出现负值，margin是可以出现负值的
示例：

 #box{width:200px;height:200px;background:red;border:10px blue solid;
    padding:30px 50px;
    margin:10px}

2.box-sizing

box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素，取值为content-box(默认值）|border-box
使用场景：1.不用再去计算一些值
2.解决一些100%的问题

3.margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题只在上下有，左右是没有叠加问题的。
解决方案：1.BFC规范
2.想办法只给一个元素添加间距

4.margin传递

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

5 标签分类、

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.挨在一起，但支持宽高
注意：布局一般用块标签，修饰文本一般用内联标签

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

按显示：
替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容(img，input…)
非替换元素：将内容直接告诉浏览器，将其显示出来。（div，h1，p…)

6.标签嵌套规范

块能够嵌套内联

 <div>
        <span></span>
        <a href="#"></a>
    </div>

块嵌套块

<div>
        <div></div>
    </div>

特殊：错误写法

<p>
        <div></div>
    </p>

内联是不能嵌套的。错误写法：

<span>
        <div></div>
    </span>

特殊：正确写法

 <a href="#">
        <div></div>
    </a>

7 溢出隐藏

overflow：
visible:默认
hidden
scroll
ayto
x轴，y轴：overflow-x，overflow-y针对两个轴分别设置

8 透明度与手势

opacity:0(透明）~1（不透明）
注意：占空间，所有的子内容也会变
rgba（）：0~1
注意：可让指定的样式透明，而不影响其他样式
cursor;手势
default：默认箭头
要实现自定义手势：
准备图片：.cur, .ico
cursor:url(./img/cursor.ico),auto;
示例：

 #box{width:200px;height:200px;background:red;opacity:0.5;}
    #box{width:200px;height:200px;background:red;rgba(255,0,0,0.5);}

9 最大最小宽高

min-width max-width min-height max-height
%单位换算;以父容器的大小进行换算
一个容器怎么适应屏幕的高：容器加height：100%；body：100%；html：100%

 html,body{height:100%}
    .contrainer{height:100%}

10 css默认样式

没有默认样式：div，span…
有默认样式的：body,h1…h6,p,ul…

二 float浮动

1 float浮动的概念及原理

文档流：文档流是文档中可显示对象在排列时所占用的位置
float特性：加浮动的元素会脱离文档流，会沿着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列
取值：left，right，none（默认）

2float浮动注意点

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

3 清除float浮动

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