最近刚开始学习web前端，html和css,对于遇到的边框变粗的问题，用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 list-style: none; ...这里就可以用margin -1px(取决你边框的宽度）来解决。...加入这行代码的样式，如下图 下面我们就来分析这就话，对于边框的top,和left向上和向左移动一个而对于right和bottom它们会把紧跟其后的元素拉过来。...其实每个li都向上和向左在原来的基础上移动了1px,对于bottom边框把下方紧随其后的top边框拉过来之后，top边框也要向上移动1px，刚好重合。...还有其他的解决方法，就是重合的边框你可以设置：border-top(bottom或left或right):none;这样的话也可以取消边框。
margin的使用分为三种情况： （1）如果在RelativeLayout中使用，则是指代这个TextView距离整个屏幕的上下左右的距离。...由于RelativeLayout中默认是从屏幕左上角显示组件，所以margin的距离是距它的左边和上边的距离。...如果事先设置了android:layout_alignParentRight=”true”， android:layout_alignParentTop=”true”，则margin的距离是指距离右边和上边的距离...（2）在LinearLayout中使用，如果使用垂直布局(vertical)，margin则指代这个TextView距离它上下最近的组件的距离，如果使用水平布局(horizontal)，margin则指代这个...如果在上述垂直和水平布局中并没有其他组件，则margin的用法和padding用法相同。 android:layout_margin：本组件离上下左右各组件的外边距。
DOCTYPE html> <meta name="viewport" content...float: left; width: 200px; height: 100px; margin-left...li> 3 4 5 </html
这 7 个属性的值加在一起要等于元素容纳块的宽度。 这 7 个属性中，只有 margin-left、width、margin-right 能设置为 auto。...[1个auto] 如果把 margin-left、width、margin-right 其中一个设置为 auto，另外两个设为具体值，那么设为 auto 的那个属性的具体长度要能满足元素框的宽度等于父元素的宽度...这 7 个属性的值加在一起必须等于块级的容纳块的高度。 这 7 个属性中的 margin-top、height、margin-bottom 可以设置为 auto。...两个都是正数，取较大的值； 两个都是负数，取绝对值较大的值； 一正一负，取两个值相加的和； 对于行内非替换元素，margin-top、border-top、padding-top、margin-bottom... 示例2：百分比margin、padding都是相对于父元素的width； ? <!
最近复习html和css的内容，想起来一个之前没想明白的问题，为什么块级元素margin：0 auto可以实现水平居中，而margin:auto不能实现水平垂直双居中呢？...margin:0 auto居中的原理 #parent{ height: 200px; width: 200px; background: black; margin: 0 auto; } #child...{ height: 100px; width: 100px; background: red; margin: 0 auto; } 块级元素设置居中的前提是设置了width，若在css中没写width...auto是相同的，当只有一条边被设置了auto时 #parent{ height: 200px; width: 200px; background: black; margin: 0 auto...divmargin:0 auto 0 0，只给了右边设置了auto相当于让右边自己平分剩余空间，即把父div的剩余空间全都给了右侧； 怎么实现垂直方向居中 为什么margin:auto不能实现在垂直方向上的居中呢
用途 margin 规定标签中四个方向的外边距属性。四个外边距属性表示分别为: margin-top, margin-right, margin-bottom,margin-left。...: top horizontal bottom; /*三值语法 */ margin: top right bottom left; /*四值语法 */ 值 值 描述 此关键词指定一个固定的外边距高度... 此关键词表示相当于包含该标签的块的i外边距(即相当于该块的百分比)。若块未明确的指定，则该百分比相当于none auto 此关键词会被替换为一个适当的值。...例子 /* HTML */ Hudaokeji.... #red { width: 50%; margin: auto; background: red; text-align: center; }
用途 margin-bottom 规定性用于设置标签的底部外边距，可设置负数值。 该属性对设置了 non-replaced 的行内标签无作用,例如： 或 。...语法 /* value */ margin-bottom: 2.5em; /* value */ margin-bottom: 95%; /* Keyword...values */ margin-bottom: auto; 值 值 描述 此关键词定义了一个确定的宽度值。... 此关键词表示 始终同包含该元素的容器宽度有关。 auto 此关键词会被替换为一个适当的值。且可以用于讲一个块级元素居中。...参考 margin 例子 /* HTML */ </div
我们知道Hard Margin SVM的优化目标函数为： ? 这种可以解决一部分的情况，但是如果存在以下的情况： ? 红色和绿色的线哪一个更好呢？...有一个绿色的方块离红色方块很近，如果按照上面的hard margin的方法很有可能找到的决策边界是红色的线。但是这样的决策边界，泛化能力可能存在问题。...大多数绿色的点离红点是比较远的，而因为一个点，对决策边界造成了很大的影响，这么的点很可能是一个离群点甚至是错误的点，并不能代表一般情况。...而绿色的决策边界线，虽然将其中一个点进行了错误的分类，但是在真实情况下预测的时候，可能会更好，这样的决策边界泛化能力会更好。...C是一个权重控制参数，它在使得||w||^2尽量大并且保证绝大多数数据样本点的函数间隔至少为1两个要求之间维持一个平衡。这其实是一种L1正则化。 与Hard Margin的对比： ?
用途 margin-right 规定该属性用于设置与元素相关联的盒子模型的右外边距，可为负值。 竖直排列相邻的两个盒子模型的外边距会重叠，称为 margin collapsing....语法 /* value */ margin-right: 2.5em; /* value */ margin-right: 95%; /* Keyword...， e.g. in em, 或者相对视窗的大小，e.g. in vh.... 此关键词表示始终同包含该元素的容器宽度有关。 auto 此关键词表示auto关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。...例子 /* HTML */ /* CSS */
左边的内容...哈哈哈哈哈 #main{ overflow:hidden; width:500px; margin...left; width:390px; background:#eee;}#right{ float:right; width:100px; background:#ccc;}#left,#right{ margin-bottom...:-1000px; padding-bottom:1000px;} overflow:hidden; margin-bottom:-1000px; padding-bottom:1000px...; 很巧妙的利用了 margin 做到了等高布局。。...仅仅是隐藏了超出的部分 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/116434.html原文链接：https://javaforall.cn
CSS将HTML的每一个元素都当成一个盒子，而且它进一步的认为每一个盒子里面都有一套正常的语法规则或者叫渲染规则，它能根据这个规则将写的HTML元素绘制出来，但是我们可以通过一些特定的手段触发BFC，让其所符合的语法规则和原来的语法规则有点不一样...我们发现这两个元素之间，他们的margin-bottom和margin-top合并了，并且显示的是较大值。这种现象被称为margin合并。...因为margin合并和margin塌陷不一样，margin塌陷只添加了CSS，margin合并除了添加CSS，还修改了HTML结构。...我们知道一般html结构是不能乱改动的，所以我们通过数学计算来解决这各margin合并的问题。...比如上面的例子，我们只要设置前面元素的margin-bottom为200px或者后面元素的margin-top为200px即可 以上就是关于margin塌陷和margin合并的小结，如有问题烦请留言告知
问题 设置margin-top为负值时，前面的浮动元素也跟着向上移动移动，代码如下： html: 浮动元素 ...: -25px; } 注：浮动元素在前面，后面是标准元素，然后对标准元素,设置了margin-top:-25px , 然后会发现浮动元素跟着向上了 margin负值的作用 margin-left...和margin-right为负值的时候都可以增加元素的宽度 而margin-top为负值的时候,不会增加高度,而是会让元素上移. margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度...总结，不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流 对浮动影响 负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面 上面的问题，就是由于这个原因产生的 解决方案...或者让受影响的元素不浮动，不脱离文档流 对定位影响 对于绝对定位的元素,设置了margin负值之后,会根据它定位的位置进行再位移。
/archive/2009/04/22/1441358.html Margin 与 Padding 的区别 1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 2.Padding...用来设置元素内容到元素边界的距离。...{ width:580px; height:50px; background-color:Red; margin-bottom... Div1这里 height:60px;需要用60px-10px(减除 padding-top的内边距距离)，才能高度和DIV2的60ox保持一致。.../body>
负margin在布局中往往起到意想不到的效果，比如在多栏等高布局中就是用该技巧。 ...虽说网络上关于负margin的实践有很多，但对margin负值为什么会出现这样的效果却没有多少讲解，本篇的目的就是阐述负margin 产生或者作用的原因。 ...margin负值之所以起到了意想不到的作用，主要是因为该公式的各种计算导致了一些属性值的改变所引起。 ...有些人会发现当元素的width属性设置为auto，或者不设置width时，margin-left或者margin-right为负值可能改变元素的大小，这种说法不严谨。...老方法，还是根据上述万能公式，左右margin的值（不论正负），在其父元素宽度(即ParentWidth)给定的情况下，会根据margin值的改变，来响应改变元素的width值，有些类似所谓的控制变量法
CSS Margin塌陷（重叠） #1 说明 #1.1 什么是Margin塌陷 在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的...margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。...#2.1 父子关系的盒子 正常情况,margin=0的时候 <div class="box" style="height: 300px;width: 300px;background-color...即无论给子元素设不设置<em>margin</em>-top值，其都不发生作用，都会作用于父元素身上 解决方法: 为父盒子设置border，为外层添加border后父子盒子就不是真正意义上<em>的</em>贴合 为父盒子设定padding...值，抵消掉子元素设置<em>margin</em>值<em>的</em>方式 为父盒子添加overflow：hidden 为父盒子添加position：fixed 为父盒子添加 display：table 利用伪元素给子元素<em>的</em>前面添加一个空元素
用途 margin-top 规定设置标签的顶部外边距，可用负值。 这个属性对于不可替换的 inline 标签没有效果，比如 或者 。...> value */ max-height: 2.5em; /* value */ max-height: 95%; /* Keyword values */ margin-top...: auto; 值 值 描述 此关键词设置固定长度 参考 来查看合适的值.... 此关键词表示百分比值 总是相对于 父元素块的宽度 auto 此关键词表示不限制高度。...例子 /* HTML */ /*CSS*/
用途 margin-left 该属性用于设置与元素相关联的盒子模型的左外边距。这个值可以为负值。 竖直排列相邻的两个盒子模型的外边距会重叠 margin collapsing。...语法 /* value */ margin-left: 2.5em; /* value */ margin-left: 95%; /* Keyword...values */ margin-left: auto; margin-left: inherit; margin-left: initial; margin-left: unset;... 此关键词表示百分比值 最近的块容器的宽度 width 。 auto 此关键词表示在当前布局模式下，浏览器根据接收的左边距自动计算出外边距。...例子 /* HTML */ /* CSS *
条件 产生折叠的必备条件：margin必须是邻接的 而根据w3c规范，两个margin是邻接的必须满足以下条件： 必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中。...margin-top 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom...一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。...BFC是不相同的，因此也不会产生margin的折叠。...margin-top的折叠，并作为间距存在于元素的margin-top的上方。
异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法，我就是这个现象了 两个层box1和box2，box1...这是网上的解决方法（并不适用我的情况）http://developer.51cto.com/art/201008/222728.htm 本文向大家描述一下margin-top失效的解决方法，margin-top...，这时候设置box2的上边距margin-top没有效果。...网上能找到的两种比较靠谱的解释： 1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…” 2：当第一个层浮动，而第二个没浮动层的margin会被压缩，详见--...浮动元素后非浮动元素的margin的处理。
/div> 兄弟元素的上下margin发生了重叠 2.父级和第一个/最后一个子元素 demo 1: <!...对最后的子元素设置的margin-top：80px；等同于为父元素设置了margin-top：80px；（父元素的margin-top=0，最后的子元素的margin-top=80px，发生了外边距重叠...3.空的block元素margin重叠： Paste_Image.png 空的block元素发生margin重叠，也需要一些条件限制： Paste_Image.png 去掉空的block元素的margin...html> 可以看出它的垂直方向是没有margin的，是无效的。...4.position：absolute与margin，绝对定位元素非定位方向的margin值“无效”，定位方向的margin值是有效的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
