提供网站建设课程代码,江西锐安建设工程有限公司网站,湖口县建站公司,当当网网站建设步骤盒子模型 类比月饼#xff1a;礼盒是最外层#xff0c;里面的月饼#xff08;伍仁#xff09;是页面元素#xff0c;比如一个div#xff1b;伍仁本身是盒子的内容#xff08;可以是文字、图片、另一个标签元素#xff09;#xff0c;月饼和月饼盒之间的距… 盒子模型 类比月饼礼盒是最外层里面的月饼伍仁是页面元素比如一个div伍仁本身是盒子的内容可以是文字、图片、另一个标签元素月饼和月饼盒之间的距离称为盒子模型的内边距padding盒子与盒子之间的距离在样式表里叫外边距margin盒子的边框在样式表里叫border内填充、外边距、边框都有四个方向padding-toppadding-rightpadding-bottompadding-left顺序不能乱。 如果把padding-top改小整个月饼就会往上移如图 如果给这块月饼一个高度那么它的实际高度月饼高度内填充高度内边框高度边界如图 边框盒子模型的边框就是围绕着内容及补白的线这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框
div{ border:2px solid red;} 上面是 border 代码的缩写形式可以分开写
div{ border-width:2px; border-style:solid; border-color:red;} 注意 1、border-style边框样式常见样式有 dashed虚线| dotted点线| solid实线。 2、border-color边框颜色中的颜色可设置为十六进制颜色如:border-color:#888;//前面的井号不要忘掉。 3、border-width边框宽度中的宽度也可以设置为thin | medium | thick但不是很常用最常还是用象素px。 只在一个方向设置样式 div{border-bottom:1px solid red; border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red; 宽度和高度 盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的css内定义的宽width和高height指的是填充以里的内容范围。 因此一个元素实际宽度盒子的宽度左边界左边框左填充内容宽度右填充右边框右边界。 元素的高度也是同理。 比如 css代码 div{width:200px;padding:20px;border:1px solid red;margin:10px;
} html代码 bodydiv文本内容/div
/body 元素的实际长度为10px1px20px200px20px1px10px262px。在chrome浏览器下可查看元素盒模型如下图 填充元素内容与边框之间是可以设置距离的称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码 div{padding:20px 10px 15px 30px;} 顺序一定不要搞混。可以分开写上面代码 div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;
} 如果上、右、下、左的填充都为10px;可以这么写 div{padding:10px;} 如果上下填充一样为10px左右一样为20px可以这么写 div{padding:10px 20px;} 边界: 元素与其它元素之间的距离可以使用边界margin来设置。边界也是可分为上、右、下、左。如下代码 div{margin:20px 10px 15px 30px;} 也可以分开写 div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px;
}如果上右下左的边界都为10px;可以这么写 div{ margin:10px;} 如果上下边界一样为10px左右一样为20px可以这么写 div{ margin:10px 20px;} 总结一下padding和margin的区别padding在边框里margin在边框外。 —————————————————————————————————————————————————————————————— 以上内容参考自慕课网http://www.imooc.com
