html第三天

盒子模型的两种方式:
1.标准模式:
一个盒子的总宽度=width+margin(左右)+padding(左右)+border(左右)

2.怪异模式:
一个盒子的总宽度=width+margin(左右)
说明:IE浏览器  width已经包含了宽度和内边距.

width:200px;
margin-left:20px;
padding:40px;
border-left:10px;
?

width: 300px;
10px   4
padding:20px
width:300-10*2-20*2

全局样式:
*{ margin:0px; padding:0px; font-size:12px; font-family:"微软雅黑";}
放在css样式的最上侧

什么原因造成div脱离标准文档流?
标准文档流:是按照一定规矩排列的,默认就是元素从左到右,从上到下排列,块级元素独占一行,行内元素共享一行

本来在标准文档流下,各个元素相安无事,可突然有一天,某个元素心想,我这么优秀,不该出现在这里,于是它成精了,它发现了一道大门,走向新的空间.

原因:浮动   float  

position 定位      布局方式之一
1.固定定位(根据浏览器定位)
  position:fixed;
  top   left    right   bottom

2.相对定位(根据自身定位)
  position:relative;
  top   left    right   bottom

3.绝对定位(根据父类定位)
  position:absolute;
  top   left    right   bottom

层: z-index  
注意:
必须结合定位使用.
值可以随便给    是数字
数字越大层数越高

position:relative 
原始的位置依然占用,不会有其他元素填充.
其真实位置依然是原位置,用margin使其原盒子下方盒子移动,本质上说其物理位置依然是原位置,新位置是渲染出来的一个位置,也可以理解为是一个影子.

超文本链接
<a></a>    行内标签

href    路径

路径:
本地:index.html
外部:http://www.baidu.com/
../

锚点:
1.设置一个锚点
  <a name="dd"></a>
  <div id="dd"></div>

2.返回顶部
<a href="#dd">返回顶部</a>

<a href="index.html#aa"></a>

复合型选择器
1.交集选择器
 由两个选择器组成,第一个是标签选择器,第二个是类选择器,两个选择器中间不能有空格.
 p.int{    }

2.并集选择器
.a1,.a2{   样式能同时加在a1和a2里   }

class="a1 a2"

3.后代元素选择器
查找所有符合条件的后代,儿子,孙子和重孙子都是后代.
.new li{
        color: blue;
       }

4.子代选择器
查找所有符合条件的子代,只查找儿子辈.
     .ban>p{
           color: pink;
       }

 <div class="ban">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <span><p>4</p></span>

    </div>

5.兄弟元素选择器
紧跟其后的第一个标签(只查找后面标签,前面的标签不管,就查找一个)
div+p{  }

6.相邻元素选择器
紧跟其后的所有标签(只查找后面标签,前面的标签不管,查找所有)
div~p{ }

属性选择器
a[href]{ }
a[href][title]{ color: red; }
a[href="index.html"]{color: red;}