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设置为负值
会使被设为负数的块向相反的方向移动,甚至覆盖在另外的块上。当块是父子关系时 可以将子块从父块中分离。