盒子模型的两种方式:
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;}