html day10 第12课

margin子元素与父元素边框的距离：问题：

1.div若宽度自适应（不是100%，也不是具体值，根据内容自适：设置margin会变成,看里面内容展的空间变了；

2.若div设置了宽度100%设置margin会变成

3.若div设置了宽度（具体值）设置margin会变成

结论：当块设置了宽度（具体值或100%），margin不会影响块的宽度；当块没设置宽度，让她自适应宽度时，设置margin会使块的宽度减少2倍的margin值。margin

对aside进行测试margin：加了margin会变成

当加大margin值时，aside会掉下去，说明不能撑大父元素的宽度，所以得有充分的空间；

1.在切换效果时，不一定用a，如图所示，但在跳转时一定用a

2.z-index是同级元素之间设置层级顺序（离用户的距离），不能用于在子元素和父元素同时设置，实现不了，子元素永远在父元素的上面；

3.ul定义了下边框，但当点击li时，下边框少了一部分：用li的高度比ul的大1px，默认向下溢出会遮住ul的边框

4.text-area会自动带padding和margin值

nav表示导航

相当于div

IE的条件注释：希望只有ie8浏览器时才执行.js文件

autoplay在一些浏览器被屏蔽了，必须和muted（静音）一起使用才有效

不知道浏览器支持那种格式，用source，把多种格式的列出来，浏览器若不支持一地中格式会识别下一个，若都识别不成功，则显示最后的your br。。。

告诉浏览器你是什么资源，浏览器启用适当的应用程序来处理

清楚背景用background：none；

在浏览器搜索一个词，浏览器就会把搜索结果高亮

给元素设置右键弹出菜单

任何浏览器不支持command命令

hign=“80”，大于80的值显示时还是80，low同理

value定义当前值

反转，编号反序显示

ruby可以作注释标签，内部有rp和rt标签。

<ruby> 标记定义注释或音标。

<rp>　告诉那些不支持ruby元素的浏览器该如何显示。

<rt> 标记定义对ruby注释的内容文本。

浏览器认识会显示rt标签，不认识辉县市rp

只支持iframe框架

总结：

1. header footer nav aside main section article figure

2. 知道如何处理兼容（IE8-JS）

3. 语义化标签的重要性
1)，去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2)，搜索引擎优化：搜索引擎能够更好的理解你的站点，搜索者查询的内容就容易与你的内容匹配，因而你的网站列在搜索结果中的可能性就越大；
3)，无障碍性，方便其它设备解析（如屏幕阅读器、盲人阅读器、移动设备）渲染网页，让任何人都能无障碍的访问页面；
4)，便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
5)，未来的功能，如果正确使用语义元素，就能够创建更清晰的页面结构，能够适应未来浏览器和web编辑工具的发展趋势。

4. video : mp4 ogg wenm(src autoplay loop muted controls)
audio :mp3 ogg wav
source: src type(mime)

5. mark-高亮显示
datalist-给文本框添加下拉列表的
details

6. email
url
date(week month time datetime datetime-local)
tel
search
number
range
color

7. required:表单控件为空不能提交
placeholder:提示语
pattern：匹配正则表达式
autofocus：自动获得焦点
list：规定输入域的datalist
autocomplete：自动完成功能
min max step:设置数字输入域的最小值，最大值，数字间隔
novalidate：取消验证
multiple：设置输入多个值，中间用逗号分隔
form:规定输入域所属的一个或多个表单，属性必须引用所属表单的 id，此属性适用于所有<input>标签的类型

第13集

一. 总结

1.
E[att][attr=“x”]匹配所有具有att属性的元素。
E[att~="val"]匹配所有att属性具有多个空格分隔的值、其中至少有一个值等于“val”的元素(如果忽略了波浪号，则说明需要完成完全匹配)。
E[att|=“val”]匹配所有att属性具有多个连字号分隔(-)的值,其中一个值以“val”开头的元素，主要用于lang属性；
E[a^="def"] 选择 a 属性值以 "def" 开头的所有元素
E[a$="def"] 选择 a 属性值以 "def" 结尾的所有元素
E[a*="def"] 选择 a 属性值中包含子串 "def" 的所有元素

2. 相邻兄弟选择器（E+F）E和F是兄弟是同辈，F在E的后面，并且相邻
通用兄弟选择器（E~F） E元素后面的所有兄弟F

3. target:目标伪类选择符
not：否定伪类选择符
root：根伪类选择符
empty：空伪类选择符，内容为空的元素设置的样式
nth-of-type:匹配父元素内，同类型的第n个标签
nth-child：匹配父元素中的第n个元素，并且为e元素的标签
last-of-type
first-of-type
only-child
only-of-type
nth-last-of-type
nth-last-child

4. ui元素状态伪类选择符
E:disabled 设置该元素处于不可用状态的样式;
E:enabled 设置该元素处于可用状态时的样式；
E:read-only 指定当元素处于只读状态时的样式
E:read-write 指定当元素处于非只读状态时的样式；
E:checked 指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked)
E:default 指定当页面打开时默认处于选中状态的radio或checkbox控件的样式
E:indeterminate 指定当页面打开时,如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消;

5.
Trident内核：前缀为-ms
Gecko内核：前缀为-moz
Presto内核：前缀为-o
Webkit内核：前缀为-webkit

6. border-radius
text-shadow
word-break
word-wrap
7. box-shadow:x y 模糊扩展 color inset
8. background-size:
background:#f00 url(...) repeat scroll position/size
9. background-origin:padding-box border-box content-box
background-clip:padding-box border-box content-box text
text-fill-color:设置文本的填充颜色
10. 字体的设置
@font-face
字体图片库会用
三种图片的使用方式会用

找第二个li的后面那个兄弟

找第一个li标签的后面所有兄弟元素

后面：

（1）属性值完整匹配

1。E[att]匹配所有具有att属性的元素。
2.E[input=“text”]匹配所有具有input属性并且属性值时text的元素。
input[type="text"]{background:#FC0}
3.E[att~="val"]匹配所有att属性具有多个空格分隔的值、其中至少有一个值等于“val”的元素(如果忽略了波浪号，则说明需要完成完全匹配)。
input[class~="p"]{background:#0C0} （会匹配下面第二个）

<input type="text" class="val pp">
<input type="password" class="val1 p">

（2）属性值部分匹配
4.E[att|="val"]匹配所有att属性具有多个（或0个）连字号分隔(-)的值,其中第一个值以“val”开头的元素，主要用于lang属性；
input[class|="p"]{background:#0C0}

5.E[a^="def"] 选择 a 属性值以 "def" 开头的所有元素
input[class^="v"]{background:#0C0}成功匹配
6.E[a$="def"] 选择 a 属性值以 "def" 结尾的所有元素
input[class$="v"]{background:#0C0}
7.E[a*="def"] 选择 a 属性值中包含子串 "def" 的所有元素
input[class*="v"]{background:#0C0}属性值中只要有v就行

找匹配type为text的input标签

~大约比较；

多个属性中至少有一个类名为tx1就匹配了；

练习：从左向右滑动，利用的是在下面添加一个div'来实现

background-position:200px 0===表示背景图距离标签左边的水平距离

不给a设置成块元素，定位会不成功；

z-index不生效：原因是没和positive一起使用，所以不生效；

利用伪元素给标签添加计数器：

1. counter-reset: xx 0 定义一个计数器xx,初始值为0；注意：counter-reset一般定义在其他元素上
2. counter(xx,type);在微元素的content中引用1的计数器名xx
3. counter-increment:xx 1 对计数器xx设置递增参数*/

content中可以放入多个内容，以空格分开

content中还可以放入多个计数器；

引用标签

q系统自动添加了

设置float：left会下来

lang没有翻译的功能，只是具有语义化，让浏览器知道

来匹配哪些标签有lang属性的，执行此代码

:not(span){border:2px solid #0F3}除了span之外的所有有型元素会执行

只能这样使用root，前面不能加html：root

nth-child(n){}匹配父元素所有孩子设置样式，n有具体意义
nth-child(3){}匹配父元素的第三个孩子设置样式
nth-child(2n-2){}
nth-child(odd){奇数}
nth-child(even){偶数}
li:nth-child(even){border:2px solid #C63}
li:nth-child与li:nth-of-type的不同：
li:nth-child 在计算个数时，会把非li标签也计算在内
li:nth-of-type 在计算个数时，只计算li标

只要是child，先看数再看类型
only-child:表示父元素中只能有一个子元素，并且匹配为e元素，执行代码
only-of-tyoe：表示父元素中要匹配的那个类型的只能有一个，有其他类型标签，没关系，执行代码

E:disabled 设置该元素处于不可用状态的样式;
E:enabled 设置该元素处于可用状态时的样式；
input:enabled{width:300px;height:300px}
input:disabeld{width:100px;height:100px}

E:read-only 指定当元素处于只读状态时的样式
E:read-write 指定当元素处于非只读状态时的样式；
input:read-write{background:#F39}
input:read-only{width:300px;height:10px;}
E:checked 指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked)
E:default 指定当页面打开时默认处于选中状态的radio或checkbox控件的样式
input:checked{width:300px;height:300px}
input:default{width:300px;height:300px}

E:indeterminate 指定当页面打开时,如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了一个单选框，则该样式被取消;

E:in-range 用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。 number
E:out-of-range用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。-number

E:required 用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。 input
E:optional 用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式. input

ms微软，moz火狐，o opera

只有webkit浏览器才能识别，其他浏览器是不能识别的

文本换行方式

word-break:break-all/*空间不够就换行

有中文和单词在一起时，放不下换到下一行，下一行还放不下才换行

stroke

按角来

内半径和外半径，有边框时，当border-radius大于边框boreder时，会出现内边距圆角，圆角的半径为border-radius-border

宽是高度的两倍，border-radius:50% 50% 0 0/100% 100% 0 0

这种效果，水平/垂直都为0，给个模糊半径，扩展也为0

/*
默认是外阴影
x: + 右 -左
y: +下 -上
模糊半径：
扩展半径：
默认是内阴影（inset）
x: +左 -右
y: +上 -下
*/

ccs3可以对一个元素设置多张背景图

高度会根据宽度变化而变化，保留宽高比；不能保证高度覆盖整个容器

cover:在不改变背景图宽高比的情况下，用宽高中最小的那个数值进行放大背景图，使背景图覆盖容器，

1.去网上下载字体，导入代码如下

2.导入字体iconfont图标字体

（1）先把所要的字体加入购物车，再一起下载，选择“下载代码”，放到代码中

（2）下载后解压缩，有三种显示方式，选一种打开，里面有如何引用的方法，照着做就行了

第1种unicode引用（兼容性最好，支持ie6+，及所有现代浏览器）

第一步：拷贝项目下面生成的font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

第2种.font-class引用：（font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题）

第一步：引入项目下面生成的fontclass代码：

<link rel="stylesheet" type="text/css" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

第3种.symbol引用（多色图标必须使用svg和use标签，兼容性较差，支持 ie9+,及现代浏览器。）

第一步：引入项目下面生成的symbol代码：

<script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

可在样式里改字体大小，它是一个字