HTML连载39-外边距合并现象、盒子模型以及宽度和高度
一、 在默认布局的垂直方向上,默认情况下外边距是是不会叠加的,会出现合并现象,谁的外边距较大,就听谁的;但是在水平方向就不会出现这种状况,我们举个例子
span{ display: inline-block; width:100px; height:100px; border:1px solid red; } div{ width:100px; height:100px; border:1px solid green; } /*我们让span的两个盒子,相距100px*/ .hezi1{ margin-right:50px } .hezi2{ margin-left: 50px; } .box1{ margin-bottom:50px; } .box2{ margin-top:50px; } ..........省略代码.......... <span class="hezi1">我是span</span> <span class="hezi2">我是span</span> <div class="box1">我是span</div> <div class="box2">我是span</div>
二、盒子模型
1.什么是盒子模型
答:CSS盒子模型仅仅一个比较形象地比喻,HTML中所有的标签都是盒子,我们现实生活中的物品大多都是有位置区域划分的。
注意:在HTML中所有的标签都是可以设置:宽度高度、内边距、边框、外边距
2.举例:
<style> span,a,b,strong{ display: inline-block; width:150px; height:150px; padding:20px; border:2px dotted red; margin:10px; } </style> ........省略代码.......... <span>我是span</span> <a href="#">我是一个超链接</a> <b>我是加粗</b> <strong>我是强调</strong>
释义:通过谷歌开发者工具,我们可以查看,每个标签所属的区域,它们之间的数字,都是严格按照定义来的,F12下的有指导模型。
2.盒子模型的宽度和高度
(1)内容的宽度和高度:width\height设置的宽度和高度
(2)元素的宽度和高度:边框加内边距加内容的宽度和高度
(3)元素空间的宽度和高度:外边距加边框加内边距加内容的宽度和高度
三、源码:
d109_margin_merge.html
d110_box_model.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d109_margin_merge.html
https://github.com/ruigege66/HTML_learning/blob/master/d110_box_model.html
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
原文地址:https://www.cnblogs.com/ruigege0000/p/11588415.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python从入门到熟练(7):函数
- Django调用百度地图api在地图上批量增加标记点
- Spring Cloud Config - 统一配置中心
- 从头分析一则traceId穿透问题(附解决方案)
- openldap的介绍与安装
- docker搭建环境如何配置端口
- Go语言入门(二)-流程控制
- 【Java8新特性】02 函数式接口和Lambda表达式实战练习:环绕执行模式使行为参数化
- Go语言入门(三)数组和切片
- 一天一大 leet(回文数)难度:简单 DAY-10
- 如何使用docker搭建PHP环境
- Go语言入门(四)Map&函数
- 一天一大 leet(每日温度)难度:中等 DAY-11
- Go语言入门(五)结构体&练习
- 利用hexo和github或coding 搭免费个人博客