为了账号安全,请及时绑定邮箱和手机立即绑定
  •       【垂直居中+文字垂直流】

     .father{height:200px;width:400px;background:#f0f3f9;writing-mode:vertical-lr;}

           .son{height:100px;width:200px;background: lightblue;margin: auto;}

           【垂直+水平居中】

           .mother{height:200px;width:400px;background:#f0f3f9;position: relative;}

           .daughter{height:100px;width:200px;background: lightblue;position: absolute;top:0;bottom: 0;left:0;right:0;margin: auto;}


    查看全部
  • 实线部分是可视尺寸-clientWidth(标准); 虚线部分是占据尺寸,可以理解为outerWidth(jquery)
    查看全部
  • auto的计算规则

    查看全部
  • 绝对定位元素的百分比margin

    是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的

    查看全部
  •  1、普通元素的百分比margin都是相对于容器的宽度计算的。

     2、绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/ absolute /fixed)的宽度计算的。

     3、宽高2:1自适应矩形:  子div设置margin:50%(子div加文字则便正方形)

    查看全部
  • 一、margin无效 1、inline水平元素的垂直margin无效。2个前提: (1)非替换元素,例如,不是<img>元素。 (2)正常书写模式:<span >设置margin</span> 2、margin重叠。 3、display:table-cell与margin: display:table-cell/ display:table-row等声明的margin无效。 (1)可以通过display:table-cell实现两栏布局,但是无法通过table-cell添加margin撑开间距。 (2)firefox:返回table-cell,实质是inline-block,margin不会重叠。 ie:返回table-cell,实质是table-cell,margin会重叠。 4、position:absolute与margin (1)绝对定位元素非定位方位的margin值“无效”。 (2)对定位没有影响,但是对占据空间有影响。绝对定位的margin值一直有效,只是不像普通元素那样,可以对兄弟元素产生影响。 5、鞭长莫及导致的margin无效。 (1)浮动和绝对定位是破坏性属性,会破坏整个页面元素的布局。(第11分钟) 6、内联特性导致的margin无效。 内联元素默认基线对齐。 图片受文字的影响,文字不能在div外面,图片为了和文字对齐,在与文字的基线对齐后,margin-top:-300,值的绝对值再往上升的时候,margin也不会对图片起作用。
    查看全部
  • 六、善用margin重叠 1、(1)一般列表都只写: .list{ margin-top:15px; } 但是,更合理的写法是: .list{ margin-top:15px; margin-bottom:15px; } 写列表或垂直布局时,浏览器会将margin-top,margin-bottom重叠,如果上下都写,最后删除最后一个元素时,margin-bottom也还是生效的。
    查看全部
  • 这时再margin:auto自动平分被变更的尺寸空间,实现水平垂直居中
    查看全部
  • margin-start/margin-end
    查看全部
  • margin无效 1、inline水平元素的垂直margin无效 2、margin重叠 3、display:table-cell时margin不起作用 4、absolute与margin 绝对定位元素非定位方向的margin的margin值"无效" 为父容器设置relatvie后,absolute的margin值会起作用(因为absolute时margin是脱离文档了) 5、鞭长莫及导致margin无效 <div > <img src="abc.jpg" > <div style ="overflow:hidden; margin-left:254px;"></div>//图片的margin值移动是相对于整个父容器的,而不是相对于图片的边缘,所以改变较大时才能有效 </div> 6、内联特性导致margin无效 margin负值小到一定程度不会再起作用,因为 ###内联特性:相对于基线对齐,margin超过数值部分不起作用。
    查看全部
  • 水平垂直居中
    查看全部
  • writing-mode与垂直居中
    查看全部
  • 百分比margin的计算规则 普通元素的百分比margin都是相对于容器的宽度计算的 绝对定位元素的百分比margin 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度计算的
    查看全部
  • 元素尺寸 1、可视尺寸-clientWidth(标准) 2、占据尺寸-outerWidth(only yy) margin与可视尺寸 1、适用于没有设定width/height的普通block水平元素 2、只适用于水平方向尺寸 margin与占据尺寸 1、block/inline-block水平元素均适用 2、与有没有设定width/height值无关 3、适用于水平方向和垂直方向
    查看全部
  • margin重叠计算规则
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
既适合学习过CSS基础知识的新手深入学习,也欢迎有经验的小伙伴加深了解噢!
老师告诉你能学到什么?
margin与元素尺寸的关系、margin的百分比单位、正确看待CSS的margin重叠、深入理解margin:auto、剖析CSS margin负值定位的常见应用、剖析在使用margin时容易发生困惑的无效情形、扩展介绍margin-start/margin-end属性

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!