CSS -- 盒子模型 margin 的特点
margin在使用过程中具有如下的两个特点:
1.垂直外边距塌陷
--给子元素设置margin-top的时候,如果父元素也随着margin-top改变位置
解决方式:
- 给父元素设置边框
- 给父元素设置overflow:hidden;
- 让子元素脱标(浮动| 定位)
2. 垂直外边距合并
--如果给元素设置上下margin,那么最后的margin值会以最大值为准
解释:
- 如果有上下两个盒子,给上面盒子设置margin-bottom:100px;给下面的盒子设置margin-top:50px;那么两个盒子上下之间的间距为100px.(即:margin值在垂直方向会合并).
- 如果有左右两个盒子,给左面盒子设置margin-right:100px;给右面的盒子设置margin-left:50px;那么两个盒子左右之间的间距为150px.(即:margin值在水平方向不会合并).
CSS -- 盒子模型 margin 的特点的更多相关文章
- day67-CSS字体属性、文字属性、背景属性、css盒子模型
1. 字体属性 1.1 文字字体:font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. * {font-fa ...
- css盒子模型的宽度不包括margin
看到教程上和一些博客上盒子模型的宽度 = content + padding + margin + border,应该是不包括margin的 <!DOCTYPE html> <htm ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS盒子模型的理解
标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 标准的CSS盒子模型?与低版本IE的盒子模型有什么不同的?
CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
随机推荐
- LNMP架构及应用部署!(重点)
LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构. WNMP代表的就是:Windows系统下Nginx+MySQL+PHP这种网站服务器架构. WAMP代表的就是: ...
- P4710 平抛运动
题目:https://www.luogu.org/problemnew/show/P4710 $$ v_x = v_{x_0} = v \ sin \ \theta, \ v_y = v_{y_0} ...
- burpsuite使用--暴力破解
测试靶机:dvwa 浏览器开启代理,使用burpsuite拦截: 并将拦截到的内容发送到intruder进行暴力破解 右边的Add$和Clear$都是选择爆破范围的操作,一个是选择,一个是清除,这里只 ...
- nginx 的四层代理
需要编译四层模块 [root@python vhast]# cd ~/nginx-1.15.9/ [root@python nginx-1.15.9]# ./configure --prefix=/d ...
- http://www.yyne.com/python使用-urllib-quote-进行-url-编码小技巧/
http://www.yyne.com/python使用-urllib-quote-进行-url-编码小技巧/
- ab的压力测试(转)
其中-n代表请求数,-c代表并发数 返回结果: ##首先是apache的版本信息 This is ApacheBench, Version 2.3 <Revision:655654> Co ...
- 【转载】CentOS和Ubuntu的区别
CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释出的源代 ...
- shell脚本中执行shell脚本
1.a.sh #!/bin/sh name="hello" ./b.sh $name 2.b.sh(这里把b.sh与a.sh放在同一目录下,便于演示) #!/bin/sh ech ...
- C 语言入门第八章--C语言预处理命令
例如:#include ,这种以#号开头的命令称为预处理命令. ===C语言宏定义(#define的用法)==== #define 叫做宏定义命令,它也是C语言预处理命令的一种.所谓宏定义,就是用一个 ...
- python学习 —— 使用QRCode包生成二维码
我使用的是python3,最简单的方法就是使用QRCode,如果没有安装QRCode package,那么可以使用下面命令进行安装: pip3 install QRCode 然后,测试一下: from ...