前端学习第2天

内联框架 <iframe src="图片的地址或者网页地址" frameborder="0"></iframe>

 

frameborder指定内联框架的边框

audio用来引入外部音频文件 controls是否允许用户播放 autoplay自动播放loop音乐循环播放

video标签用来引入视频

CSS样式

<style> 标签{ color:red; font-size:10px: } </style>

常用选择器 元素选择器 p{ } id选择器 #id名字{ }

class标签属性 它和id类似不同的是class可以重复使用 可以通过class属性进行元素分组

*.类名{ } 类选择器 class选择器 *{ } 通配选择器

复合选择器 交集选择器 写法 div .c{ } 作用就是选中同时复合条件的元素

并集选择器 写法 h1,span { } 作用就是同时选择多个选择器对应的元素

关系选择器   子元素选择器 div >span {} 后代选择器 div span {} 兄弟选择器p+span {} 

属性选择器 

伪类选择器 

超链接伪类 a:link {}表示没有访问过的链接  a:visited{}表示访问过的链接 a:hover { } 表示鼠标移动的地方的状态  a:active {}鼠标点击后的状态

伪元素div::before { content:'  ' }

样式继承  我们为一个元素设置样式的同时它的后代也会继承它的样式

注意并不是所有的样式都会被继承 例如背景相关的还有布局相关的等这些样式都不会被继承

样式冲突 当我们通过不同的选择器选择相同的元素是并且为相同的样式设置不同的值时此时就发生样式冲突。

分组选择器单独计算，选择器累加不超过最大的数量，类选择器再高也不会超过id选择器

如果优先级计算相同则会使用靠下的样式 。

通配选择器是0 继承的样式没有优先级

可以在某一个样式加!important则此获得最高的优先级甚至超过内联样式，注意要慎用

 em em是相对元素字体大小来计算的默认一个字体大小是16 px 10em=160px 

em会根据字体的大小改变而改变的

rem 是根据根元素的大小而改变的例如 改变html {font-size:20px}则10rem=200px 

 文档流

网页是一个多层结构域的，一层摞着一层

通过css样式来修饰

这些层中最底下的一层称为文档流，文档流是网页的基础

我们所创建的元素默认在文档流中排列

对于我们来说元素主要有两种状态

在文档流中和不在文档流中（脱离文档流）

元素在文档流有什么特点？

 块元素在页面会独占一行垂直排列，宽度默认父元素的宽度，高度由内容撑开。

 行内元素不会独占一行只占自身大小水平排列高度与宽度都是由内容撑开的。