css彻底研究(2)

一 . CSS 盒模型

1.盒子的结构

margin-border-padding 结构 + 内容 content 组成盒模型

注意

  1. width,height 取的是 content 区域的宽高,不包括 padding border margin,但是盒子实际所占高度要算上外面三个(padding border margin)
  2. 赋值顺序,顺时针,上(top)->右(right)->下(bottom)->左(left)
1
2
3
4
5
----top(1)----->|
| |
left(4) right(2)
| |
<---bottom(3)----

赋值,一个值,四个值都是这个,如margin : 10px;
赋值,两个值,两个值赋给 top right,也就是前两个,然后,bottom = top , left = right
赋值,三个值,分别赋值给 top right bottom,也就是前三个,然后 left = right
赋值,四个值,不用多说了…

  1. 在各浏览器中的表示
    html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在浏览器开发人员工具中的表示</title>
<style>
body
{
margin: 0;
background-color: cyan;
}

#test-div
{
padding: 10px;
border: 5px dotted yellow;
margin: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="test-div">
内部文字
</div>
</body>
</html>

chrome
偏红的 margin
偏 xx 色的 border(啥颜色,叫不出来)
偏青色的 padding
偏蓝色的 content
chrome表示


IE10,win8.1 浏览器
offset,见stackoverflow 问题,说是用 relative absolute 改变之后的偏移,同 chrome 里的 position

2.border

border : width(2px) color(green) style(dotted/dashed)

border-width/color/style 设置某一属性
border-left : width color style 设置一边的属性
结合起来可以 border-left-style : dotted;

边框与背景
对于 IE,background = content + padding
对于 FF,background = content + padding + border
小的差距,要注意

3.padding 与 margin

赋值规则,上面说了,总结起来就是:
从 top 开始,顺时针,将 N 个值赋给前 N 个,其他的依据 top-bottom left-right 配对拷贝这个原则即可,对于一个值得,表示四个全都一样

body 特殊的盒子,在默认的情况下,body 会有若干 px 的 margin,而且 body 的 background 会扩展到 margin 部分,也就是紧贴着浏览器,background-image 和 background-color 都会这样,其他的盒子 background 最多也就是到 border(FF 下).

二 . 标准文档流

1.简称标准流

指在不使用其他的与排列、定位相关的特殊 CSS 规则时各种元素的排列规则。

  1. 块级元素 block,典型的有 div ul li
    总是以一个块的形式表现出来,并且跟同级的兄弟块之间,依次竖直排列,左右撑满。
  2. 行内元素 inline,典型的有 span a 标签 标签。
    横向排列,最右端自动折行

div 能包含 span 样式,反之而不能,即 span 不能包含 div。

2.块间距

  1. 行内元素的水平间距
    间距 = 左侧元素的 margin-right + 右侧元素的 margin-left
  2. 块级元素的竖直间距
    竖直间距 = max(上面元素的 margin-bottom , 下面元素的 margin-top)
    这个就是所谓的塌陷原则,小的 margin 塌陷到大的 margin 里面去了
  3. 嵌套 div 的 margin
    子 div 的 margin 放在父 div 的 content 区域,合理的理想情况
  4. margin 设置为负值
    margin 其实是 border 距离外边界的距离,将 margin-left 设置为 -50px;盒子整体左移 50px;