手记

进击的哈士奇-框模型的学习

一、框模型的定义:
(1).框:html中,所有的元素都可以认为是框。框中可以盛装内容。
(2).框模型:指的是 框与框、框与内容之间的关系,定义了:外边距、内边距、边框
注意:
元素的实际宽度=左外边距 + 左边框 + 左内边距 + 内容区域(width) + 右内边距 + 右边框 + 右外边距
二:外边距:
(1)外边距定义:
在元素边框周围的一些空白区域,该空白区域,正常情况下是不允许有其他元素显示的。
(2).外边距的属性:
例:margin:1px;
表示上下左右四个方向的外边距为10px
单边设置:margin-方向:
方向:top,bottom,left,right。
例:marign-top:10px;
margin的上外边距为10px
注意:取值可以为px、%、负值、auto。
三:内边距
(1).内边距的定义:
框内的内容与框之间的距离控件
注意:增加内边距后会扩大元素边框所占的区域。
(2).内边距的属性:
padding : value;
取值:像素、%、不能取负值
padding:a1; 四个边的距离都为a1
padding:a1 a2; 上下的距离是a1 左右的距离是a2
padding:a1 a2 a3; 上的距离是a1 左右的距离是a2 下的距离是a3 padding:a1 a2 a3 a4;上的距离是a1 右的距离是a2 下的距离是a3 左的距离是a4

0人推荐
随时随地看视频
慕课网APP