day13

知识点回顾

1.BFC

触发条件：overflow,flat,定位，display

应用场景:布局【双飞翼【三个div排布 左 右 中间】、

自适应两栏的布局

【1.骨架 有两个div 2.css样式 第一个div浮动而且具有固定的宽度 另外一个div不设置宽度，overflow:hidden】

【1.骨架 有三个div，其中两个是兄弟关系，另外一个div是最后一个div子元素 2.css样式操作 第一个div浮动 第二个div不设置宽度 作为子元素的div设置margin-left属性值等于第一个div的宽度】

[BFC不会与浮动的区域发生重叠]】

解决网页中常见的问题【margin-top值传递问题，相邻两个盒子外边距合并问题，高度塌陷[bfc会计算浮动元素的高度]】

2.选择器

a.基础选择器:标签选择器、id选择器、类选择器、通配符选择器、!importan[提高权重]

b.动态选择器: :link、:visitied、:hover、:active、:focus

c.伪类选择器

语义化标签

含义	语法书写
头部	<header></header>
尾部	<footer></footer>
导航	<nav></nav>
媒体文件引入	<embed src=“”></embed>
内容块	<section></section>
辅助信息	<aside></aside>
文章	<article></article>

含义	语法书写
独立内容块	<figure>   <figcaption>这个是熊大小动物</figcaption>   <img src="xiongda.png" /> </figure>	类似dl  dt   dd
高亮显示文字	<mark></mark>	一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词
标题组	<hgroup></hgroup>	<hgroup> 标签被用来对标题元素进行分组
对话框	<dialog open>这是打开的对话窗口</dialog>	目前只有 Chrome 和 Safari 6 支持 <dialog> 标签
定义图形	<canvas> </canvas>	只是图形容器，必须使用脚本来绘制图形。

 音频导入

属性 

示例

视频导入

属性

示例

预加载

运行

 

文字阴影

属性

示例

 

盒子阴影

属性

 

示例

 

 

 圆角

属性	含义	用法说明
border-radius	设置圆角	① border- rad i us ： 20px/30px;  如果反斜杠符号“/”存在，“/”前面的值是设置元素圆角的水平方向半径，“/”后面的值是设置元素圆角的垂直方向的半径； ② border- rad i us ： 30px;  如果没有“/”，则元素圆角的水平和垂直方向的半径值相等

 示例