为了账号安全,请及时绑定邮箱和手机立即绑定

一课全面掌握主流CSS布局

难度初级
时长 5小时 0分
学习人数
  • > 水平居中的第三种解决方案的优点和缺点



    - 优点:

    没想过。如果现在想想的话,我的答案是相比第二种解决方案来说,可以抵抗float布局的影响,不至于设置float布局后,margin失效,就导致方案不可用。容错性更好些。——这个理解,跟老师的总结差不多。看样子是明白了。


    反思补充:开启定位就相当于脱离文档流,这点我倒是没有融会贯通想到,脱离文档流的意思是啥?就是指高度塌陷吗?那是不是先用第二种方案实现一下水平居中,然后设置float布局,或者设置开启定位(绝对定位absolute,fixed固定定位),效果应该是一样的 ,都会令子集元素的水平居中效果失效。待制作demo验证。


    老师的回答:父级元素是否脱离文档流,不影响子集元素的水平居中效果。


    - 缺点:

    没想过。如果现在想的话,我觉得没啥缺点。就是写平移的时候,用成百分比更好,这样即使后续子集元素width宽度改动后,平移不用跟着改。


    老师的回答:transform属性是CSS3中新增的属性,浏览器支持情况不好。


    反思补充:浏览器支撑情况,我觉得如果不考虑IE8的话,一般浏览器都支持。再者还是可以找找看,有没相关的polyfill,也不算太大问题。这其实涉及到一个决策识别。如果要支持老版本浏览器的话,就不能采用第三种解决方案了,而是要采用第一种或者第二种解决方案了。


    - 遗留的思考题:


    能否举一反三的,通过这3种,想到第4种,第n种呢。——这个等我把3个搞清楚了,再来好好整理想想。

    查看全部
  • > 水平居中布局的第三种解决方案:


    - 方法拆分:

    html:两层结构【父子级】

    css:子集-absolute,left和transform;父级-开启定位 [除static外都是开启定位]

    - 详细说明

    1.开启absolute后,需要判断直接父级元素是否开启定位,如果开启,当前元素就是 相对于父级元素定位,也就是说,天花板是他的父级元素;如果直接父级元素没有开启定位,那当前元素就是 相对于页面定位的【其实这点我觉得仅适用于当前例子,如果body和直接父级节点还有包含节点的话,比如父级的父级节点,如果开启定位的话,那就不是相对页面定位了,而是父级的父级节点了。这点待补充例子证明】

    2.translateX 表示平移, X表示水平方向的平移,左移动就是负值,右移动就是正值。想左边移动子集元素的一半,那就是子集元素width的一半即可。

    3.子集元素的平移写法,可以写具体值,也可以写百分比。当宽度变的时候,平移如果写具体值的话,也需要跟着变,这时候用百分比-50%【如果平移一半的话】,那无论子集元素的width如何变,平移的设置都不用跟着改了,相对来说,代码更优。

    查看全部
  • > 水平居中布局的第二种解决方案

    1.优点

    没想过。

    老师的回答:只需要对子集元素设置样式即可。更简单。相比第一种父级,子集,都需要设置来说,要简单很多。

     

    2.缺点

    没想过。

    老师的回答:如果子集元素脱离文档流,导致margin属性的值无效。


    补充:导致脱离文档流的3种场景。

    1)浮动float

    2)绝对absolute定位

    3)固定fixed定位


    3.总结

    第一种和第二种都有优缺点,所以没有绝对的好,绝对的不好。还是要择机而动,根据场景不同,来选择合适的方案。

    查看全部
  • >水平居中布局的第二种解决方案:

    - 和第一种的差异:只需要在子集元素中设置样式,而非父级,子集元素都设置。

    - margin属性外边距的4个值。


    技术实现分析:

    1.margin: auto 表示根据浏览器自动分配

    2.display: table/block,但是不能为inline。


    但是对于第2点,我个人觉得inline-block应该也是可以的。因为inline-block也具有block的特性。但实际测试了下,是不行的。可能因为也属于inline,所以不行。可以得出结论是margin:auto这种方式,必须配合块级元素,不能是内联块级,或者是内联元素。

    查看全部
  • 水平居中布局的第一种解决方案优缺点:


    1.优点:

    没想过这个问题。都是想的能实现就完了,而且实现的也不明不白的。

    老师的回答:IE6-9,css2(text-align和display:inline-block),浏览器兼容性比较好


    2.缺点:

    没想过。

    老师的回答:text-align有继承性。子集元素也会应用父级对齐方式。子集元素如果不想继承,需要重置覆盖父级元素的样式【多加一行代码,比如子集元素左对齐,text-align:left】


    3.为啥要知道优缺点?

    没想过。

    老师的回答:搞清楚优缺点,是为了识别场景后,用上合理的解决方案,没有最好和最坏,而非生搬硬套过去,然后用的不明不白,糊里糊涂。

    查看全部
  • > 水平居中布局的第一个解决方案

    技术点:text-align:center(父级元素) + display:inline-block(子集元素)


    技术说明:

    text-align针对的是文本内容

    inline内联元素,也属于文本内容。

    之所以设置为inline-block,是因为inline下的width和height是无效的。


    简要概括:

    组合拳,父容器设置text-align,子容器设置文本且支持宽高尺寸设置display:inline-block。

    相当于是 text-align和inline的组合拳。inline-block相当于是一次polyfill补丁。

    查看全部
  • > 水平居中布局的概念:

    当前元素相对于谁水平居中。可以是页面,也可以是父级元素。核心是左右方向放中间。


    >水平居中布局:

    -我知道的:

    1.块级元素:margin:0 auto;

    2.行内元素:text-align:center


    -课程中讲的(常用的有3种,但不止这些):

    inline-block+text-align配合(其实跟"我知道的2"差不多,只不过是用css定义元素类型为内联元素了。)

    table+margin属性配合使用(其实跟"我知道的1"差不多,只不过是用css定义元素类型为块级元素了。)

    absolute+transform配合使用(这个其实也知道,但是就是用的不太熟,百分比还是/2的数值应用在哪个样式,老是整不明白)

    查看全部
  • 居中布局分类,3种:水平,垂直,水平+垂直

    查看全部
  • > 布局为何头疼:难

    原因1:逻辑性及设计感强

    原因2:不能debugger代码定位(语言开发,比如JS,可以跟代码)

    原因3:没有套路规律可行


    > 布局不是技术内容(html和css),而是一种设计思想(活学活用,而非只是语法堆砌)

    需要不断练习,才能融会贯通

    查看全部
    0 采集 收起 来源:什么是布局

    2022-04-19

  • float + margin

    查看全部
  • 两列布局的方式

    查看全部
  • absolute + transform 实现垂直居中

    查看全部
  • display:table-cell vertical-align 垂直居中

    查看全部
  • 垂直居中布局实现方式


    查看全部
  • absolute + transform实现水平居中

    查看全部

举报

0/150
提交
取消
¥48.00
立即购买
课程须知
1、提前了解和熟悉HTMLl/CSS等基础语法 2、建议对着视频反复练习,掌握每一个知识点。
老师告诉你能学到什么?
(1)居中布局:水平居中、垂直居中 (2)多列布局:两列布局、三列布局、圣杯布局、双飞翼布局 (3)全屏布局:等分布局、等高布局、全屏布局
加群二维码
  • 慕课前端核心用户群
  • QQ群号:908286289
  • 付费用户专享
  • 技术学习型社群

微信扫码,参与3人拼团

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

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