欢迎来到悦新教育集团官方网站!

悦新教育

集专本科学历教育,全日制中职教育,电子商务实训营
职业培训为一体的教育机构

全国报读热线

0471-3321797

当前位置:首页 » 电商学院动态新闻 » 网页制作-CSS中盒模型用法技巧

网页制作-CSS中盒模型用法技巧

文章出处:呼和浩特市悦鑫电子工程职业技术学校 人气:-发表时间:2016-12-09 15:13:00

  悦鑫电子工程职业技术学校电子商务专业开设了网页制作课程,网页制作我们主要用到的是DIV+CSS,下面我们介绍一下CSS三大样式之一:盒模型。

  CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

  元素边框(border)以外的是外边距,我们用margin表示,边框以内的空白是内边距,我们用padding表示。以下是四者之间的关系。

悦鑫电子工程职业技术学校电子商务专业

  1、 边框:

  (1)每个边框有 3 个方面:宽度、样式,以及颜色。

  例如:border:1px solid red;下边框1像素 实线 红色

  (2)可以单独设置边框不同方向的样式

  例如以下案例:

  border-bottom:1px solid red;下边框1像素 实线 红色

  border-top:1px dashed red; 上边框1像素 虚线 红色

  border-left:1px dotted red; 左边框1像素 点状线 红色

  border-right:1px dotted red;右边框1像素 点状线 红色

  (3)去掉边框

  有些元素会自带边框,比如input标签会自带边框,想要去除可执行border:none; 如果只想去掉某一方向的边框则可单独定义,例如border-bottom:none; 去掉底边框

  border:none; 去掉边框

  border-bottom:none;去掉下边框

  2、 内边距(padding)

  定义:padding 属性定义元素边框与元素内容之间的空白区域,我们也叫填充。内边距可以根据需求为上右下左四个方向来设置。

  例如以下案例:

  padding-bottom:10px;

  padding-top:10px;

  padding-left:10px;

  padding-right:10px;

  备注:不可以是负值。

  3、 外边距(margin)

  设置元素边框以外的空白距离。

  margin-bottom:10px;底部内边距10像素

  margin-top:10px; 顶部内边距10像素

  margin-left:10px; 左边内边距10像素

  margin-right:10px; 右边内边距10像素

  备注:允许使用负值。

  margin-left:-10px;

悦鑫电子商务培训老师将继续分享电子商务专业中网页制作课程知识点。

(悦鑫学校 张新霞老师)

>>>相关阅读

悦鑫电子商务培训网页制作流程-大干货

此文关键字:教育资讯,北京师范大学网络学历教育呼市学习中心,中国石油大学网络教育内蒙古学习中心,电大文凭