吾爱乐享
个人学习网站

php学习之div+css盒子模型(二)

说明:

在html中的每个元素都是一个以盒子的形状来存在的,盒子模型

盒子特点:由“内容或元素”+内填充+边框+外边距

属性:

border属性:

  • border-top:    上边框              属性值:  border-top:粗细 样式 颜色  比如:border-top:1px dashed red;
  • border-right:  右边框              属性值: border-right:粗细 样式 颜色  比如:border-right:1px dashed red;
  • border-bottom:  下边框          属性值:粗细 样式 颜色  比如:border-bottom:1px dashed red;
  • border-left:       左边框            属性值:粗细 样式 颜色  比如:border-left:1px dashed red;
  • border:          简写四边           属性值:粗细 样式 颜色  比如:border:粗细 样式 颜色

案例:

padding属性:

  • padding-top:上内填充            属性值:数值   如:padding-top:10px;
  • padding-right:右内填充          属性值:数值   如:padding-right:10px;
  • padding-bottom:下内填充       属性值:数值   如:padding-bottom:10px;
  • padding-left:左内填充               属性值:数值   如:padding-left:10px;
  • padding:简写形式                  属性值:数值          有四种形式:1.padding:10px;四边相等   2.padding:10px 10px;第一个10代表上下内填充,第二个10代表左右内填充        3.padding:10px 20px 30px;第一个代表上内填充,第二个代表左右,第三个代表下        4.padding:10px 20px 10px 20px 表示上右下左顺序

案例:注意padding是占背景的

margin属性:

  • margin-top: 上外边距        属性值:数值      如:margin-top:10px;
  • margin-right:  右外边距          属性值:数值      如:margin-right:10px;
  • margin-bottom:下外边距       属性值:数值      如:margin-bottom:10px;
  • margin-left:左外边距         属性值:数值      如:margin-left:10px;
  • margin  :        简写形式            属性值:数值      如:同上padding属性一样

案例:

赞(0) 打赏
未经允许不得转载:吾爱乐享 » php学习之div+css盒子模型(二)

评论 抢沙发

评论前必须登录!

 

推荐免费资源共享,个人经验总结学习

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏