11.前端笔记-CSS盒子模型-外边距margin
1、margin
1.1 margin的语法
盒子与盒子之间的距离
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: pink;width: 100px;height: 100px;}.one{margin-bottom: 20px;}.two{margin-top: 20px;margin-bottom: 20px;margin-left: 20px;margin-right: 20px;}</style>
</head>
<body><div class="one"></div><div class="two"></div>
</body>
</html>
1.2 margin复合写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: pink;width: 100px;height: 100px;}.one{margin: 20px;}.two{margin-top: 20px;margin-bottom: 20px;margin-left: 20px;margin-right: 20px;}</style>
</head>
<body><div class="one"></div><div class="two"></div>
</body>
</html>
1.3 margin外边距典型应用
(1)使块级盒子水平居中
条件:
(1)盒子必须指定宽度(width)
(2)盒子左右外边距设置为auto
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: pink;width: 100px;height: 100px;}.one{margin: 0 auto;}</style>
</head>
<body><div class="one"></div><!-- <div class="two"></div> -->
</body>
</html>
对行内元素和行内块元素无效,但要实现水平居中的效果,可以其父元素添加text-align:center属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{background-color: pink;width: 200px;height: 200px;text-align: center;}.one{margin: 0 auto;}</style>
</head>
<body><div class="one"><span>行内元素的居中对齐</span></div><!-- <div class="two"></div> -->
</body>
</html>
1.4 外边距合并和塌陷
使用margin定义块元素的垂直外边距(top和bottom)时,可能会出现外边距的合并和塌陷
主要有两种情况:
(1)相邻块元素垂直外边距的合并(兄弟关系的)
(2)嵌套块元素垂直外边距的塌陷(父子关系的)
什么是外边距合并:
one盒子设置下边距为10,two盒子设置上边距为20.但实际两个盒子的距离不是10+20。而是取的两值间的较大值,这种现象就算相邻块元素垂直外边距的合并
** 浮动的盒子不会有外边距合并塌陷问题**
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: green;}.one{margin-bottom: 10px;}.two{margin-top: 20px;}</style>
</head>
<body><div class="one"></div><div class="two"></div>
</body>
</html>
解决方案:
尽量只给一个盒子添加margin值
什么是外边距的塌陷
对于嵌套关系(父子关系)的块元素,父元素有margin-top的同时,子元素也有margin-top,此时父元素会塌陷两者中较大的margin-top值
期望的效果:
实际的效果:
如何解决:
(1)父元素加上边框top(颜色可以设为transparent)–恩断义绝框,影响盒子大小
(2)父元素定义上内边距top。影响盒子大小
(3)给父元素加上overflow:hidden,不影响盒子大小
(4)其他方法:浮动、固定、绝对定位的盒子不会有塌陷问题
执行第(1)种:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.farther{width: 200px;height: 200px;margin-top: 20px;border-top:2px solid black;background-color: green;}.son{width: 50px;height: 50px;margin-top: 50px;background-color: pink;}</style>
</head><body><div class="farther"><div class="son"></div></div>
</body>
</html>
执行第(2)种:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.farther{width: 200px;height: 200px;margin-top: 20px;padding-top: 50px;background-color: green;}.son{width: 50px;height: 50px;margin-top:50px;background-color: pink;}</style>
</head><body><div class="farther"><div class="son"></div></div>
</body>
</html>
(3)执行第(3)种:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.farther{width: 200px;height: 200px;margin-top: 20px;background-color: green;overflow: hidden;}.son{width: 50px;height: 50px;margin-top: 50px;background-color: pink;}</style>
</head><body><div class="farther"><div class="son"></div></div>
</body>
</html>
1.5 清除内外边距
不同的网页元素(如ul),即使没有设置内外边距,但有的自身默认会有内外边距(不同浏览器默认的也不一致),因此在布局前,首先最好先清除网页元素的内外边距
//可以将这段代码放在css的首行去写
*{margin:0;padding:0;
}
注意:
行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内块元素就可以了
ul没有设置padding-left,但实际看浏览器是由一个40px的padding-left
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>aaa</li></ul>
</body>
</html>
清除自带的内外边距:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}</style>
</head>
<body><ul><li>aaa</li></ul>
</body>
</html>
行内元素设置上下边距:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}span{margin: 20px;}</style>
</head>
<body><ul><li>aaa</li></ul><span>span</span>
</body>
</html>
11.前端笔记-CSS盒子模型-外边距margin相关推荐
- 前端笔记 | CSS盒子模型
CSS盒子模型 一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距 二.特殊样式 2 ...
- CSS - 盒子模型 - 外边距
文章目录 一.外边距 属性 二.margin的简写方式 三.外边距可以让块级盒子水平居中 四.行内元素和行内块元素水平居中 五.外边距合并 相邻块元素垂直外边距的合并 六.嵌套块元素垂直外边距的塌陷 ...
- CSS之布局(盒子模型--外边距)
盒子模型--外边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
- html定义盒子距离顶底端像素,css - 盒子内外边距
css - 边距 元素内边距 内边距是指元素包含的内容离元素边框之间的间距,内边距不能设负值.内边距(padding).(边框)border都会撑大盒子,在浏览器中显示的元素的尺寸可能包含了盒子的pa ...
- 程序媛老张前端Day3———CSS盒子模型
Day4--css盒子模型 网页中的布局可以看成事一个一个盒子组成,排在网页中. 属性: 宽度:width:px.%.auto(%是该元素相对于父级盒子宽度的%) 高度:height:px.%.aut ...
- 11. 前端基础--CSS盒子定位
文章目录 前端基础--CSS盒子定位 1. 再看CSS 布局的三种机制 2. 为什么使用定位? 3. 定位详解 3.1 边偏移 3.2 定位模式 (position) 静态定位(static) -了解 ...
- html改变元素外边距,CSS 简明教程 - 外边距 ( margin ) 属性
CSS margin 属性用于在 HTML 元素周围创建 「 空白 」,这些空白在元素的边框之外创建 我们可以单独设置元素的上边距,下边距,左边距和右边距,也可以使用 margin 属性同时设置所有边 ...
- 【web前端】CSS盒子模型
居然隔了一个星期了,啊我到底在干嘛. 使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 框架 一.盒子模型 ...
- 从零开始学前端:CSS盒子模型属性 --- 今天你学习了吗?(CSS:Day14)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:伪元素和盒子模型 - 今天你学习了吗?(Day13) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
最新文章
- ubuntu linux下解决“no java virtual machine was found after searching the following locations:”的方法
- 任意两点最短路floyd算法matlab,多源最短路——Floyd算法
- hibernate 映射四多对一双向映射
- Java常见Jar包的用途
- linux sleeping进程多_Linux下找出吃内存的方法总结
- 计算机组成原理第四版蒋本珊课件_2020北理计算机考研813回忆(刚考完新鲜出炉)...
- ORACLE中CONSTRAINT的四对属性
- 基于Visual C++2010与windows7 SDK开发传感器应用(触觉传感器,温度传感器等等)
- 中美深度对比,资产管理行业的核心是什么?
- 使用拉普拉斯算子锐化图像
- 关于一些初级ACM竞赛题目的分析和题解(九)
- 什么软件可以让头发变黑_吃什么可以让头发变黑?
- 与老外打交道必知英文缩写400个
- the little schemer 笔记(4)
- Android+SpringBoot+Vue实现安装包前台上传,后台管理,移动端检测自动更新
- 使用md5+salt+hash散列查询
- Netty高级进阶之Netty解码器
- Centos7 进入紧急模式Emergency Mode处理办法
- MediaPlayer+TextureView实现视频播放器
- VS Code自定义snippets