本节简介:讲解css样式盒子模型中内部填充值和外边距属性及实际应用时值的设置技巧
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
要让一个元素居中显示,只需在上下加个值,左右加 auto,例如:h1{ background :#F93 ;width:300px;height:300px; margin:100px auto}
简约的代码: 尺寸width :300px; 颜色 background:#3cC; 内边距padding:100px 50px 10px 30px ;
盒子模型的外边距margin:如果margin有一个值,分别代表的是上下左右都是一样的(margin:30px) ; 如果margin有两个值,分别代表的是 第一个值负责:上下,第二个值负责左右(margin:30px 90px); 如果margin有三个值时,第一个值代表的是:上,第二个值代表的是:左右,第三个代表的是:下边距; 如果margin有四个值的时候,第一个值代表上,第二个代表右,第三个代表下,第四个代表左,呈顺时针方向。
部分css样式不想被显示,可以用 /* */ 把不显示的代码包裹起来。
为盒子模型增加边距: 1、增加外边距: margin-top(上):20px; margin-left(左边):40px; margin-bottom(底部的):60px; margin-righ(右边):80px ;
给指定内容定义宽高:例如: <head> <style> div {width(宽度):300px; height(高度):300px;} </style> </head>
css样式 <style> </style>是在 <head> </head> 之间写的。
盒子模型的内间距和外边距: 外边距margin ;内间距 padding ;外层的边框 border 。
margin:30px;如果margin有一个值,分别代表是上下左右都一样;有两个值,分别代表的是第一个值负责上下 第二个值左右(margin:30px 90px);有三个值,第一个值是上,第二个值是有左右间距,第三个值是下边距;有四个值,按顺时针方向走,第一个代表上,第二个右,第三个下,第四个代表左;
margin外边距 padding内间距 border边框
如果想让元素居中显示 可以使用margin上下添加一个值 左右auto例如 margin:100px auto
如果margin有四个值:第一个代表上,第二个代表右,第三个代表下,第四个代表左右,按照顺时针方向
如果margin有三个值,分别代表的是 第一个值负责:上,第二个值负责:所有 第三个值负责:下
如果margin有两个值,分别代表的是 第一个值负责:上下 第二个值负责:左右
如果margin有一个值,分别代表的是上下左右都一样的
外边距:margin-right右边 margin-left左边 margin-top上边 margin-bootom下边
盒子与盒子的外边距叫margin,图片与盒子边框的留白叫内间距padding,盒子边框叫border