CSS中margin属性详解
margin属性概述
margin是CSS层叠样式表中用来规定围绕在元素边框周围空白区域范围的属性.
该接受任何长度单位,可以是像素、英寸、毫米或 em。
相关属性
margin 可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。
属性 描述 margin 简写属性。在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素的右外边距。 margin-top 设置元素的上外边距。
使用语法
1.使用单独属性设置四边的距离
#d2 { border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
margin-top: 20px; /*上边距为20px*/
margin-right: 30px; /*右边距为30px*/
margin-bottom: 40px; /*下边距40px*/
margin-left: 50px; /*左边距为50px*/
}
效果:
2.直接使用margin属性设置所有外边距:
#d2 { border: 1px solid blue; /*为了显示效果,所以让d2有了边框 */
margin: 20px 30px 40px 50px; /*和上图所示效果完全一样,相当于上个案例的简化写法*/
}
3.使用margin简化写法注意事项:
如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。
如果只提供一个,将用于全部的四边。
如果提供两个,第一个用于上、下,第二个用于左、右。
如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。
margin合并(折叠)
注意,在使用CSS的margin属性时,会出现margin属性的合并(折叠)的现象.
这种合并分为两种: 并列元素的合并和嵌套元素的合并
1.并列元素的合并:
具体表现为:
当两个元素并列时,两者相隔的外边距,取的是两者所设置margin的最大值。
例如:
2.嵌套元素的合并:
具体表现为:
当两个元素嵌套到一起,并且没有内边距或边框把外边距分隔开时,它们的外边距也会发生合并
例如:
3.margin折叠注意事项:
margin折叠只发生在块级元素上;
浮动元素的margin不与任何margin发生折叠;
设置了属性overflow且值不为visible的块级元素,将不与它的子元素发生margin折叠;
绝对定位元素的margin不与任何margin发生折叠;
根元素的margin不与其它任何margin发生折叠;
注意事项
注意,在实际开发中.margin-bottom和margin-top需要特别说明
替代(Replaced)行内元素可以应用这两个属性。
非替代(non-Replaced)行内元素要使用该属性,则必须先使该对象表现为块级或行内块级。
外延边距始终透明。
也就是说,普通的行内元素是无法使用该属性的.
例如:
<html> <head> <meta charset="UTF-8"> <title>关于margin-bottom和margin-top</title> <style> div{ border: 1px solid red; } span{ border: 1px solid blue; margin-top: 20px; margin-top: 20px; } </style> </head> <body> <div>内容体</div> <span>我是span</span> <div>内容体</div> </body> </html>
结果: -->完全没有任何效果
解决方案:
当元素是行内元素时,不使用该属性
把该元素转换为块级元素或者行内块级元素
扩展-块级元素和行级元素
块级元素
总是在新行上开始,占据一整行;
高度,行高以及外边距和内边距都可控制;
宽度与内容无关;
它可以容纳任何元素。
行级元素
和其他元素都在一行上;
不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,宽高只与内容有关,
行内元素只能容纳文本或者其他行内元素。
可以设置外边界margin,但margin不对上下起作用,只能对左右起作用,
转换
行级元素与块级元素之间可以通过css的display属性进行转换
扩展-替换和不可替换元素
从元素本身的特点来讲,元素可以分为替换元素和不可替换元素。
替换元素:
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如:
<img src="cat.jpg"/> 浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来. 而如果查看HTML代码,则看不到图片的实际内容;<input type="submit" value="提交"/> 浏览器是根据<input>标签的type属性,来决定是显示输入框,还是单选按钮等所以,HTML中的
<img>、<input>、<textarea>、<select>、<object>
都是替换元素。这些元素往往在源代码中并没有实际的内容,而是要通过浏览器的解析才能显示出不同的效果.,
不可替换元素
不可替换元素指的是内容直接表现给用户端(例如浏览器)的元素。
例如:
<p>段落的内容</p>
就是一个不可替换元素,浏览器上显示的内容就是标签
CSS中margin属性详解相关推荐
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
- CSS中float属性详解
首先我们了解到,CSS网页布局的原理,就是按照HTML代码中对象声明的顺序,以流布局的方式来显示它,而流布局就不得不说到float浮动技术..在HTML中的所有对象,默认分为两种:块元素(block ...
- css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性 发布时间:2020-09-23 14:26:58 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍css中如何使用counter-reset属性, ...
- html怎么设置左偏移量,CSS中margin属性的偏移量详解(代码示例)
本篇文章给大家介绍一下CSS中margin属性的偏移量,有感兴趣的朋友可以看一看. 话不多说,我们直接进入正题~ 我们先来看一个具体的例子(相关推荐:CSS学习手册) 代码入下:HTML文件和CSS文 ...
- CSS margin属性详解
CSS margin属性详解 我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
- (图文详细)最通俗易懂的CSS 浮动float属性详解
(图文详细)最通俗易懂的CSS 浮动float属性详解 声明:本文属于搬砖大神的文章到自己的博客上,原文地址为:https://www.cnblogs.com/iyangyuan/archive/20 ...
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
最新文章
- 急!!!求从字符串中提取形如: div([MC0010000000006],此若干个字符或数字,0) 的正则表达式...
- python读取txt文件代码-Python实现读取txt文件并画三维图简单代码示例
- redis压力测试详解
- linux qt 添加动态链接库_Qt 连接MySql数据库
- C#:RichTextBox 追加其它颜色的行列
- 写入接口c语言_PYNQ: 使用CFFI嵌入C语言
- 本地虚拟机上的docker安装mysql_linux下利用Docker安装mysql的步骤
- java时间戳龙_Java时间戳与日期格式字符串的互转
- android 快捷方式代码片段随记
- Qt中图片调用(2)
- Linux Unix shell 编程指南学习笔记(第二部分)
- 正交设计 python算法_正交设计 - SegmentFault 思否
- Android OTA升级
- 【Python】京东自动下单抢购脚本——双十一购物小技巧
- ps4如何通过虚拟服务器联机,PS4联机路由电信用自定义host
- 高解析APNG(动画PNG). 2D. 3D APNG's的动态图
- 用Python进行数据分析之金融和经济数据应用
- 问道手游服务器找不到,问道手游安卓苹果互通服怎么不显示 鹊桥相会不能互通解决方法...
- 原生js插件(超详细)
- ubuntu重新获取IP地址