html

在css的标准当中,css认为所有标签都是一个规则的矩形盒子;


【盒子模型】

盒子模型主要可以用来布局,或者处理网页制作中很麻烦的距离部分的工作;

(1)别管是内边距padding还是外边距margin;都是在原有尺寸上增加;

(2)内边距和外边的用法完全相同;所以只要理解其中一个即可;如果你希望观察到内边距和


外边距的范围需要在火狐里面firebug中观察;

(3)在firebug中浅蓝色的范围表示的是实体范围=宽度和高度的范围;与它比较接近的颜色紫


色表示内边距的范围;颜色上反差很大的黄色表示外边距的范围;

(4)盒子一共有两种尺寸,1 总尺寸, 2 实体范围

(5)盒子两种尺寸的计算方法;

1.实体高度 =盒子高度+上下内边距高度+边框线上下高度;

2.总高度 = 盒子高度+上下内边距高度+上下外边距高度+边框线上下高度;

换句话说内边距也算作实体的范围;

(6)padding的4种简写形式;


1. 一个值的时候表示上下左右都是相同的距离;

2. 两个值  表示 上下 和 左右的距离;

3.三个值 表示 上 左右 下;

4.四个值 表示 按顺时针进行设置 上 右 下 左;


特点:第二个值永远是设置的左右的距离;



设置盒子模型居中的方法: margin:0 auto;

但是要注意:盒子居中的条件;1.一定要有宽度;2.必须是块级元素;其他类型无效;



外边距塌陷规则;首先外边距塌陷是一个普遍存在的浏览器现象;

外边距 只会在垂直之间产生塌陷;水平之间不受影响;

垂直之间塌陷的原则是以两方最大的外边距为准;


(水平外边距是相加;而垂直外边距取最大值;)




list-style:none; 1默认disc黑点;2 circle 空心圆; 3 square 矩形方;none表示没有;




背景图本身是不占位置不占空间的,但是如果希望背景图片有自己独立的空间,必须给元素指定一个


padding值;
























html,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。