hc学习平台

 找回密码
 立即注册
搜索
热搜: 活动 交友 javakc
 › 学习交流 › CSS › 介绍一下CSS的盒子模型
查看: 2233|回复: 0
打印 上一主题 下一主题

介绍一下CSS的盒子模型

[复制链接]

2249

主题

0

帖子

0

博客

admin

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

跳转到指定楼层
楼主
发表于2015-02-01 19:59:08 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1181

帖子

2

博客

yjz123456

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-19 15:02:47 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

CSS盒子模型具备 内容、填充、边框、边界等属性

内容就是盒子里装的东西,边框就是盒子本身了,边界说明盒子拜访的时候不能全部堆在一起,药流一定空隙保持通风,同时也是为了方便取出

0

主题

1451

帖子

0

博客

gaoye

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 18:02:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

盒子模型的内容范围包括: margin、border、padding、content部分组成

0

主题

1636

帖子

0

博客

renmihe

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 18:12:51 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式


外边距margin

边框border

内边距padding

沙发
发表于2016-08-31 18:31:24 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1450

帖子

0

博客

Sarbr

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 18:32:48 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1510

帖子

0

博客

zhangjialong

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 18:43:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

盒子模型的内容范围包括:

margin、border、padding、content  部分组成

(1)外边距margin:围绕在内容边框的区域就是外边距。

margin margin-top margin-right margin-bottom margin-left

(2)边框border

border border-width border-style border-color

(3)内边距padding

padding-top  padding-right  padding-bottom  padding-left


0

主题

1576

帖子

0

博客

liufangyuan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 18:42:23 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

盒子模型的内容范围包括: margin、border、padding、content部分组成


外边距margin
围绕在内容边框的区域就是外边距。 margin margin-top margin-right margin-bottom margin-left


边框border

border border-width border-style border-color


内边距padding


内容content


0

主题

1700

帖子

0

博客

song

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-08-31 19:07:28 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

盒子模型的内容范围包括:

margin、border、padding、content部分组成


围绕在内容边框的区域就是外边距。 margin margin-top margin-right margin-bottom margin-left

边框borde      r border border-width border-style border-color



0

主题

1721

帖子

0

博客

XIAOC

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-03 10:14:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
 CSS的盒子模型是内容、border(边框)、padding(内边距)和margin(外边距)这4部分之间的关系:
    (1)border是设定边框线条,盒子的其他部分是相对border而言的。
     (2)padding是指内容与border之间的距离,padding是透明的。
     (3)margin是border到图中的最外边虚线的范围,也是透明的。
     (4)最中间是盒子中显示的内容。
      一个盒子的实际宽度(或高度)是由内容(高度或宽度)+padding(两边)+border(两边)+margin(两边)组成。

0

主题

1402

帖子

0

博客

马鹏磊

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-01 10:24:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

0

主题

1518

帖子

0

博客

Cracia

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-01 17:14:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

盒子模型有两种:IE盒子模型和标准W3C模型

盒子模型的范围包括margin、border、padding、content;

外边距 margin
围绕在内容边框的区域就是外边距。
margin
margin-top   
margin-right
margin-bottom
margin-left
边框 border 
border-top
border-bottom
border-left

内边距padding

padding-bottom
padding-right
padding-top
padding-left


0

主题

1458

帖子

0

博客

梦紫菱0124

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-01 19:09:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
盒子模型的内容范围包括:

margin、border、padding、content 部分组成


WR

0

主题

1674

帖子

0

博客

WR

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2016-09-02 08:57:18 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
盒子模型的内容范围包括: margin、border、padding、content部分组成

 

0

主题

1902

帖子

0

博客

王之神判

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-11 10:55:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

0

主题

1932

帖子

0

博客

740317431

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-11 11:48:57 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

DIV主要用于网页的结构设计

可以用div的嵌套来做网页的布局,比table写起来更简单

 

gym

0

主题

647

帖子

0

博客

gym

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-12 08:43:41 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

css的盒子模型英文称box model, 一般div+css用来设计网页的布局加样式,

css盒模型本质上是一个盒子,封装周围的HTML元素,包括外边距margin、边框border、内边距padding、内容content四个部分

0

主题

1694

帖子

0

博客

wulinan

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-14 09:13:04 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

div定义块元素,对一个区域进行操作,有定义颜色、边框、边距、内衬距、字体等属性

0

主题

461

帖子

0

博客

Peanut

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-08-28 11:22:56 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型

0

主题

997

帖子

0

博客

lijiaxing

Rank: 9 Rank: 9 Rank: 9

积分

IP 编辑 禁止 帖子 清理

沙发
发表于2017-10-24 18:43:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模式;

当做生活中的盒子来说,有内容content  填充padding  边框border  边界margin等属性



站点统计|举报|Archiver|手机版|小黑屋|Comsenz Inc.

GMT+8, , Processed in 0.195171 second(s), 9 queries .

Powered by javakc! X1.0

© 2004-2014 javakc

f1208.com 备案号:京ICP备14030918号-1

返回顶部