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