【外边距塌陷】【设置浮动都会变成行内块级元素】【行内元素本身能设置内外边距】...

最新推荐文章于 2023-02-22 20:34:26 发布
最新推荐文章于 2023-02-22 20:34:26 发布
阅读量284 收藏
点赞数
文章标签： python
原文链接：https://my.oschina.net/u/2949632/blog/783455
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

1、两个同级元素，垂直排列，上面的盒子给margin-bottom，同时下面的盒子给margin-top,那么他们两个盒子的
外边距就会重叠，以最大的那个值进行计算；
2、两个父子元素，内部的盒子给margin-top，然后其父级也会受到影响，同时产生上边距,不会得到想要结果，

解决的办法

1、在父级元素上添加overflow:hidden;    左右外边距不受影响

2、给父元素设置透明边框

 

块级元素和行内元素只要设置float，都会变成行内块级元素属性

行内元素及行内块级元素要在页面居中，需要在外层套块级元素

行内元素本身能设置内外边距

转载于:https://my.oschina.net/u/2949632/blog/783455

weixin_33910460
关注
CSS行内块级元素布局与定位
learning_web的博客
04-28 2967
1.行内块级元素布局 上一节里面我们讲到了float浮动布局以及它的一些使用方法，在这一节里会将到行内块级元素布局的方法。 html的元素最开始是只有行内元素和块级元素两种，大多数元素都是块级元素，其特点是独占一行，会尽量占满浏览器的宽度。 但这两种元素在布局上比较无力，因此人们开始利用float浮动，这一最开始用于文字环绕的属性来进行布局。 这样的布局方式时至今日依然有不少的使用场景，但它的缺点...
从零学前端第二讲：CSS行内块级元素布局与定位
IT修真院：初学者转行到互联网的聚集地
05-20 1951
修真院Web工程师零基础全能课 本节课内容： CSS行内块级元素布局和定位 主讲人介绍 沁修，葡萄藤技术总监 项目经验丰富，擅长H5移动项目开发。 专注技术选型、底层开发、最佳代码实践规范总结与推广。 直播录屏版 传送门：https://v.qq.com/x/page/l0675tsgywz.html 1.行内块级元素布局 上一节里面我们讲到了...
关于浮动遇到的高度塌陷和外边距塌陷
weixin_52079958的博客
08-04 375
众所周知，浮动会脱离文档流，因此会出现一些问题，今天我来给大家提供一些解决方案 一、浮动造成的高度塌陷 <head> <style> .box1 { border: 1px solid black; } .box2 { float: left; height: 200px; width: 400px;
一个例题：浮动引起元素变成行内块元素-display:inline-block
weixin_34293246的博客
10-27 1227
题目：span标签的width和height分别为多少？ A. width = 0px，height = 0px B. width = 400px，height = 200px C. width = 100px，height = 50px D. width = 0px，height = 200px <div style="width: 400px;hei...
元素外边距的问题
qq_45329460的博客
02-22 458
主要说明了元素设置外边距时需要注意的一些问题！
CSS 框的生成：块级元素和块框
歪脖先生的博客
02-19 2721
框的生成在盒模型中，一切皆为框，即页面上的每个元素会生成一个矩形框。默认情况下，一个元素的类型，决定了该元素生成框的类型。块级元素生成块级框，行内级元素生成行内级框，没有被任何元素所包含的文本生成匿名框。也可以通过元素的 display 属性，来改变框的显示类型。可以把块级元素的 display 属性设置为 inline 或 inline-block，让它生成行内级框；也可以把行内块级元素的 di...
CSS之 块、行内、行内块元素
weixin_45707229的博客
07-02 1060
CSS之块级元素，行内元素，行内块元素
理解CSS文档流：块级元素与内联元素解析
而块级元素如段落和标题，会各自开始新的一行，它们可以设置宽度、高度和内边距，而内联元素通常无法设置这些属性。 Clear属性用来清除浮动的影响。当`clear:right`时，意味着元素右侧不允许有浮动元素，因此它会...
div外边距塌陷问题
sinat_19594515的博客
09-19 473
块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。 外边距塌陷有以下三种情况： 同级相邻元素 同级相邻元素之间的外边距会塌陷，塌陷后的间距等于两个元素外边距的较大值（如果后者被清除浮动，不遵循此规则），例如： h1 { margin: 0 0 25px 0; background: #cfc; } p { margin: ...
前端面试常见问题规整.pdf
最新发布
04-13
- **边距折叠**：相邻块级盒子的垂直外边距会发生折叠，但不影响外部盒子。 - **不与浮动元素重叠**：BFC 内部的块级盒子会根据浮动元素的位置重新排列，避免重叠。 - **包含浮动元素**：BFC 会包含其内部所有浮动...
专题 | 块级元素 行内元素 行内块元素
A123ppleQueen的博客
08-27 1198
要写的点 1.是否换行 2.能否设置宽高 3.能否设置内边距 外边距 上下左右 4.它们本身的宽度如何计算 高度如何计算 5.是否会随网页自动缩放 6.能到嵌套 7.多个排列一起默认方式 块级元素 1. 块级元素的高是由内容撑起，宽度默认100%，网页有多大，宽度就有多大。 ...
第四章 样式初始化 元素类型转换 外边距合并
syon的博客
10-07 256
一、样式初始化清除浏览器默认样式，以避免造成不必要的兼容性问题。body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;} ol,ul{margin:0;padding:0;list-style:none;} a{text-decoration:none;} img{border:none;} *{margin:0;padding:0} 二、元素类型 块级元素：单独占据一行，
内外边距对行内元素块级元素的影响
PethZhang的博客
10-19 2378
1、内边距对父级元素的影响 当块级元素里面还是块级元素且没有定义宽高时，子块级元素的内边距会将父块级元素撑开； 但是当子元素为行内元素的时候，内边距对父级元素是无影响的。 如下例： div和span的内边距对父级div的影响 .d1{ border: solid 1px red; } .d2{ border: solid
浅谈行内元素的内边距padding和外边距margin
筱葭的博客
03-08 1万+
行内元素的内边距对左、右、下起作用。 行内元素的外边距只对左、右起作用。 *{ margin: 0; padding: 0; } .span1{ background: red; margin: 20px; } .span2{ background: red; padding: 20px; }
CSS 浮动元素对块级元素和行内元素的影响
Vrainy的博客
04-23 4212
我们可能听说过，float元素是脱离了文档流的元素，其他元素将无视它的存在。但当我们实际应用中，实际效果并不完全是这样的。
关于浮动元素float使其父元素高度塌陷的原因及解决方法
热门推荐
前端成长之路
03-23 2万+
浮动元素使其父元素高度塌陷 我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 从以上两张图中可以看出添加浮动元素后，li元素按照规则横向排列，但是父元素却消失不见了。 为父元素添加一个5px的边框，在li元素添加浮动后，边框并
行内元素在设置浮动后可以设置高宽
赵圆圆
03-21 1818
平时经常给这样的行内元素设置浮动float:left or float:right，浮动了之后还可以给它们设置高度啊宽度啊。这点大家都知道，但是为什么呢？为什么行内元素在浮动之后就可以设置高宽了呢。 引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话： position：absolute和float会隐式地改变display类型，不论之前什么类型的元素（display:n
给行内元素设置padding和margin是否有效
qq_42874319的博客
06-23 5295
给行内元素设置padding和margin是否有效 1.行内元素拥有盒子模型么 答案是是的。没错，行内元素跟块级元素一样，同样拥有盒子模型。 2. 行内元素的padding和margin值的设置是否有效 块级元素的padding和margin值的设置都是有效的。那么行内元素的padding和margin值的设置是否有效呢。 2.1 margin值 首先看margin值的设置： 可以看出margin-top和margin-bottom并没有起作用。下面看左右外边距： 可以看到行内元素的margin-le
DIV盒子浮动、内外边距
wenzhenqing的博客
07-07 1437
浮动属性的使用 1.作用:可以元素在网页中的位置(如果盒子默认是上下排列的可以改为水平的) 2.属性:float 使xx漂浮/浮动 3.属性值:left、right、none(默认值,不浮动) 4.浮动的特点 - 浮动只能控制元素在水平方向上移动 - 浮动会使元素脱离文档流,初始位置不存在,破坏正常的网页布局 - 浮动停止漂浮的条件 - 碰到父级的包含框就会停止浮动 - 碰到前面一个含有浮动属性的元
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值