3.深入理解盒子模型

1.border属性  3个   color , width ,style(重要  其中hidden可以解决边框冲突问题)
2.属性简写形式  以border-color为例
2个属性值  上下边框
3个属性值   前者为上边框    中间的为左右边框     后者为下边框
4个属性值  依次为上  右  下  左边框的属性  即顺时针排序
3.单个边框 属性的设置    border-left:1px  red  solid
border-left-color:red
4.边框和背景    background-color   ie作用域为content+padding     firefox是content+padding+border   。将border设置为粗虚线时 表现得特别明显 。在ie中虚线空白的地方露出来的事padding部分的背景,而在firefox中虚线空白的地方露出来的是 margin部分的背景。
5.内边距    padding
     当一个盒子设置背景图像后,默认情况下背景图像覆盖的范围是padding和内容组成的范围,并以padding的左上角为基 准点平铺背景图像。
6.外边距   margin     元素与元素之间的距离
body是一个特殊的盒子   背景色会延伸到margin的部分,而其他盒子的背景色只会覆盖  padidng+内容   ie浏览器 ;或者 者border+padding+内容部分   firefox浏览器中
body盒子的宽度由浏览器窗口决定   不是由其内部的内容决定的
margin用于控制块与块间的距离
7.盒子之间的关系
1.dom文档对象模型   网页所有蒜素组织在一起   就构成了一颗  dom树
#document是整个文档的根节点     css控制网页的表现形式    html控制网页的内容结构   
2.标准文档流     简称标准流  指在不使用其他的与排列和定位相关的特殊css规则时,各种元素的排列规则。
元素的分类(1).块级元素   占据着一个矩形的区域,并且和相邻的元素数值排列, 不会排在同一行中。因此被称 为块级元素,以一个块的形式表现出来,并且跟同级的兄弟块一次竖直排列,左右撑满
ul  li
  (2).行内元素  inline  对文字类元素   各个字母横向排列,到最右段自动折行,这就是另一种元素称 为“行内元素”
<strong></strong>标记  ,本身不占有独立的区域,仅仅是在其他元素的基础上指出了一定的 范围。a元素也是行内元素     css中块级元素拥有自己的区域,行内元素则没有。
3.<div>标记与<span>标记
(1).<div>块级容器可以容纳段落,标题,表格,图片,等等
<span>是行内的元素 同样可以容纳各种html元素
8.盒子在标准流中的定位原则
要对margin有更深入的了解 。padding只存在于一个盒子的内部。所以不涉及与其他盒子之间的关系。
(1)行内元素之间的水平margin
第一个元素的margin-right加上第二个元素的margin-left
(2)块级元素之间的竖直margin
上下两个块级元素中margin-bottom和margin-top中的较大者,称为塌陷现象。
(3)嵌套盒子之间的margin
父子关系  父padding+子margin=父子边框间的距离
(4)将margin设置为负值
会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。当块是父子关系时   可以将子块从父块中分离。
 
原文地址:https://www.cnblogs.com/dongguolei/p/7902949.html