css样式中margin(css的选择器类型有哪些)
CSS理解之margin
margin重叠通常特性:
margin重叠三种情况:
demo 1:
1.相邻兄弟元素margin重叠
兄弟元素的上下margin发生了重叠
2.父级和第一个/最后一个子元素
demo 1:
inline元素(内联元素,像图片、文字这样的东西)
块状格式化上下文元素(BFC元素)
同样可以利用父子margin重叠条件来去除margin重叠:
demo 2:
demo 2 :
demo 2:
去掉margin-bottom重叠与上面类似。
3.空的block元素margin重叠:
空的block元素发生margin重叠,也需要一些条件限制:
去掉空的block元素的margin重叠也是利用上面的条件:
3.margin重叠的计算规则:
1、正正取大值:
2、正负值相加:
3、负负最负值(取绝对值大的):
首先理解margin atuo的作用机制 ,先看一些事实例子:
1.元素有时候,就算没有设置width或height,也会自动填充外部容器
例1:
例2:
以上两个例子是比较常见的,没有设置宽高也会自动填充所在容器。
若刚才的两个例子,如果设置了width或heigth,自动填充特性就会被覆盖。
总之一句话,auto就是用来分配。
通过以上的例子,很多事情就很好理解了,比方说:
1.为什么图片设置了 margin:0 auto 不水平居中?
如上图,设置了 margin auto ,图片为什么还是不居中呢?
因为图片是inline水平的,它占据的空间并没有撑满整个容器,如果没有设置宽度值。所以它就不满足 margin auto 用来填充剩余空间的条件,因为他根本就没有剩余空间。要想让它居中也很简单:
2.为什么明明容器定高,子元素也定高了, margin auto 0 无法垂直居中?
上图水平方向剧中了,但是垂直方向不剧中,父级元素高度有了,子元素高度也有了,为什么还是不垂直居中呢?
因为他不满足占满整个容器这个条件,想一下,如果,没有为.son设置高度值,它之前满足占满整个容器这个条件吗?很显然不满足,也就没有剩余空间,所以设置 height:100px margin auto 不会垂直居中。
还需要注意一点:用 margin:auto 来实现居中,它计算后的值必须是正直,比如说你的父容器宽度1000px,子元素宽度2000px,这时设置 margin:auto 它是不居中的。
那么如何实现垂直方向上的剧中呢,方法很多不止一种:
1.writing-mode与垂直居中:
更改流为垂直居中之后,内容会自动撑满垂直方向的高度。这时宽度不会自动撑满容器,所以宽度的水平居中就失效了。
2.绝对定位元素实现垂直居中:
子元素设置了 top:0;right:0;bottom:0;left:0; 之后,没有设置宽高,absolute元素也自动填满了容器。
1.margin负值下的两端对齐(主要利用了margin可以改变元素尺寸这一特性:正直变小,负值变大)
由于 div class="ul"/div 没有设置宽度,所以设置了 margin-right:-20px; 后,改变了它的宽度,增大了20px,变为1220px。这时我们再把 li 的宽度设置为计算好的386.66666px,就可以实现没有间隙的两端对齐。 主要利用了margin负值增加它的空间 。
demo:
可以看出它的垂直方向是没有margin的,是无效的。
2.第二种常见的无效是margin重叠,比如你设置了margin-top当发现没有效果,这就是margin重叠带来的影响。
3.display:table-cell与margin
demo:
可以看出设置的margin是无效的。
但是对替换元素设置table-cell是可以发生作用的,但平时我们不会给替换元素设置table-cell,这是没有任何意义的,所以记住这点就行。
4.position:absolute与margin,绝对定位元素非定位方向的margin值 “无效” ,定位方向的margin值是有效的。
CSS属性margin是什么意思?
margin:0 auto 0px表示上外抄边距为0px,左右外边距自动,下外边距为0px。
margin跟padding一样,也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。
扩展资料:
“margin:20px 40px;”表示top为20px,right为40px;由于bottom和left缺省,所以自动将它们分别设为20px和40px。转化为第4种写法为:“margin:20px 40px 20px 40px;”。
“margin:20px 40px 60px;”表示top为20px,right为40px,bottom为60px;由于left缺省,所以自动将它设为40px。转化为第4种写法为:“margin:20px 40px 60px 40px;”。
需要注意的是一种情况不能写为缺省写法:“margin:20px 40px 20px 60px;”。该例中,由于top和bottom相同,但right和left不同,所以不能将bottom缺省,否则会等同于“margin:20px 40px 60px 40px;”。
CSS中margin与padding的区别?
CSS中margin和padding的区别如下:
margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。
从图示中看得就会比较直观,可以很容易理解了
CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS中margin和padding的区别
CSS中margin和padding有以下三方面区别。
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。
1、语法结构。
padding:
padding-left:10px; 左内边距、padding-right:10px; 右内边距、padding-top:10px; 上内边距、padding-bottom:10px; 下内边距。
margin:margin-left:10px; 左外边距、margin-right:10px; 右外边距、margin-top:10px; 上外边距、margin-bottom:10px; 下外边距。
2、可能取的值。
padding:length规定具体单位记的内边距长度、%基于父元素的宽度的内边距的长度、auto浏览器计算内边距、inherit 规定应该从父元素继承内边距。
margin:length? 规定具体单位记的外边距长度、%基于父元素的宽度的外边距的长度、auto浏览器计算外边距、inherit 规定应该从父元素继承外边距。
3、浏览器兼容问题。
padding:所有浏览器都支持padding属性、任何版本IE都不支持属性值“inherit”。
margin:所有浏览器都支持margin属性、任何版本IE都不支持属性值“inherit”。