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 条评论
登录 后参与评论

相关文章

来自专栏前端杂货铺

清除inline-block元素之间的空白

一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质。被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高...

30850
来自专栏我的博客

安卓开发之布局

一、LinearLayout(线性布局) android:orientation=”horizontal”(从左到右) android:orientation=...

31670
来自专栏mukekeheart的iOS之旅

iOS扩展——颜色相关的知识

1 颜色的基本组成     - 一种颜色由N个颜色通道组成 2 颜色通道     - 1个颜色通道占据8bit     - 1个颜色通道的取值范围       ...

38860
来自专栏前端说吧

css - 美化效果 代码汇总

24410
来自专栏十月梦想

背景属性

8330
来自专栏小工匠技术圈

[Java小工匠]CSS背景1-概述

background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。 默认地,背景图像位于元素的左上角...

8020
来自专栏JavaEdge

CSS 全解析实战(三)-CSS 基础1 选择器(1)背景非布局样式(边框)非布局样式(滚动)非布局样式(文本折行)非布局样式(装饰性属性)hack和案例(1)hack和案例(2)面试题

6810
来自专栏Java成神之路

Android基础_2 Activity线性布局和表格布局

在activity的布局中,线性布局和表格布局是最简单的,这次分别从线性布局,表格布局以及线性布局和表格混合布局做了实验,实验中只需要编写 相应的xml的代码,...

8420
来自专栏蜉蝣禅修之道

android控制view的大小和位置(二)

13910
来自专栏康怀帅的专栏

CSS

CSS <style type="text/css"> </style> 注释 /*注释*/ 内联式 <p style="color:red"> </p> 嵌...

29440

扫码关注云+社区

领取腾讯云代金券