html-盒子模型及pading和margin相关
margin:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*margin 外边距 元素与其他元素的距离（边框以外的距离）一个值的时候： 代表四个方向值一样 上右下左（顺时针）二个值的时候： 上下 右左三个值的时候： 上 右左 下四个值的时候： 上 右 下 左margin: auto; 快速左右居中垂直方向： margin-bottom,margin-top 取两者之间的较大值水平方向： margin-left,margin-right 取两者的和overflow:hidden; 解决内边距重叠问题*/div{width: 300px;height: 200px;background: antiquewhite;/*border: 1px solid red;*//*margin: 50px;*//*margin: auto;*//*display: inline-block;*/overflow: hidden;}.box{/*margin-top: 100px;*/}p{width: 50px;height: 50px;background: aqua;/*margin: 100px;*/margin: 100px;}</style>
</head>
<body><div><p></p></div><div class="box"></div>
</body>
</html>padding:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*padding 内边距，边框与内容之间的距离一个值的时候： 代表四个方向值一样 上右下左（顺时针）二个值的时候： 上下 右左三个值的时候： 上 右左 下四个值的时候： 上 右 下 左*/div{width: 300px;height: 200px;border: 1px solid red;/*padding: 20px;*//*padding-left: 50px;*//*padding-top: 50px;*/padding: 50px 0 50px;}</style>
</head>
<body><div>padding 内边距，边框与内容之间的距离一个值的时候： 代表四个方向值一样 上右下左（顺时针）二个值的时候： 上下 右左三个值的时候： 上 右左 下四个值的时候： 上 右 下 左</div>
</body>
</html>盒子大小：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}div{width: 150px;height: 150px;background: aqua;border: 10px solid red ;padding: 20px;margin: 50px;}/*盒子大小=样式宽 + 内边距 + 边框盒子宽度=左border+右border+width+左padding+右padding盒子高度=上border+下border+height+上padding+下padding*/</style>
</head>
<body><div></div>
</body>
</html>转载于:https://www.cnblogs.com/cxhzy/p/10095212.html
html-盒子模型及pading和margin相关相关推荐
- 盒子模型之外边距margin(HTML、CSS)
盒子模型之外边距margin(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
- css盒子样式有哪些,css盒子模型 css3盒子相关样式
1.内边距(内边距在content外,边框内) 内边距属性: padding 设置所有边距 padding-bottom 底边距 padding-left ...
- css盒子模型margin和padding
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.padding和margin定义 二.举例 前言 盒子模型中padding和margin是前端页面常用到的属性,简 ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
转载自:http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html 盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们 ...
- web前端入门学习 css（4）（盒子模型）
文章目录 盒子模型(box model) 盒子模型的组成 边框 border 边框的简写,边框的分开写法(分别写上下左右边框) 利用边框的层叠性简化书写代码(小技巧) 给表格table和单元格td和表 ...
- 【CSS3】一文搞懂盒子模型（知识点加案例）
看透网页布局本质 行内元素比如文字类似牛奶,需要一个盒子把他们装起来,我们所学过的双标签都是一个盒子.有了盒子,我们就能任意的,自由的摆放位置了. 看透网页布局的本质:把网页元素比如文字图片等等,放入 ...
- CSS盒子模型学习-02
1.文档流 网页是一个多层结构,一层叠加一层:通过CSS可以分别为每一层来设置样式:作为用户来讲只能看到最顶上一层:这些层中,最底下的一层称为文档流,文档流是网页的基础. 我们所创建的元素默认都是在文 ...
- 阿ken的HTML、CSS的学习笔记_CSS盒子模型（笔记五）
走的越远你就越会发现 真正能在危难之时拉你一把的人 只有你自己 前段时间跟家里打视频电话 每每看到家人关怀的目光以及她们逐渐苍老的面庞 就不忍心再对他们言哭言累 有时午夜辗转反侧脑海里一想到他们 就会 ...
- html5盒子模型作业,HTML5盒子模型。
盒子模型. 盒子由 margin.border.padding.content 四部分组成. margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content: ...
最新文章
- 你是否能判断电机损毁风险?
- Django 基础教程
- python verilog顶层连线,如何在Verilog中连接两个模块？
- Java学习笔记53（网络编程：TCP协议案例）
- 用C++实现的壳(基础版)
- 大道至简伪代码（第一个博客）
- 存根类 测试代码 java_有关为旧版代码创建存根的更多信息–测试技术7
- 川职院单招计算机考什么专业,四川单招考什么科目
- 第十四周学习进度报告
- Django之modelform
- [导入]OGRE中用到的设计模式
- db模块未绑定 Uncaught TypeError: Cannot read property 'openDatabase' of undefined
- 人体静止存在雷达探测，雷达感应模组技术，物联网智能化发展
- Java——时间日期格式化
- 大华服务器系统配置图,大华磁盘阵列配置说明指南.doc
- php在线电子小说网站毕业设计源码
- 特网云 DirectAdmin 安装SSL
- Win32gui 无效窗口句柄
- 指尖菜谱App从0到1-项目开发准备
- 易飞erp系统服务器怎么启动,如何使用易飞ERP系统