• 弹性盒模型的实际应用


    现在是凌晨4.45分,刚才解决了一个棘手的问题,乘着这股余劲,我要把刚才查阅的、测试的以及平时不怎么关注的知识点再理一遍。今天收获真的大。
    1、css清除浮动。父元素如果没有设置高度,将默认由子元素撑开父元素的高度。如果子元素设置了浮动,也不能撑开父元素的高度。
    2、使用@media only screen为不同屏幕大小的设备写样式其实是一件非常繁杂的事,所有构建的页面结构最好一样,然后通过设置 元素的display来影藏和显示元素。
    页面结构一旦成型, 除非是通过js动态增删元素,通过@media only screen我们只能 修改属性而不能增删元素。
    max-width和min-width是指整个窗口的宽度,包括滚动条的宽度。
    3、标准合模型、怪异合模型、弹性盒模型的区别和用法。
    4、bootstrap的相关属性和用法。

    上面就是今天所掌握的知识点,废话不多说入正题。
    怎样实现以下同行元素子自动换行,且换行后,每一行元素依旧占满整个父元素的宽度。
    请看下面几张图:
    这里写图片描述
    状态1
    这里写图片描述
    状态2
    这里写图片描述
    状态3
    这里写图片描述
    状态4
    上面4张图是浏览器窗口由大到导航栏的状态变化。
    我的页面是用bootstrap写的,上面是bootstrap中的按钮组,默认同行显示,由字体撑开按钮的大小
    状态1到状态2
    状态1的字体和按钮大小都比较大,这个过程我是通过css的@media only screen实现。
    状态2到状态3
    这是我们的重点。
    怎么实现行元素自动换行?
    如果同行元素有固定的宽度,一般都不会自动换行。
    如果同行元素采用百分比赋值,始终会有宽度值,不会实现换行。
    如果元素的宽高都是由内容撑开呢?
    给元素设置display:inline-block;
    这里写图片描述
    悟空与八戒两个元素中间会出现缝隙。不过自动换行倒是实现了。
    如果给元素添加浮动效果呢?
    这里写图片描述
    浮动效果要比display:inline-block;好。
    不过这两者虽然都实现了自动换行,但是最终效果却不是我们想要的。
    我们要的效果是由状态2到状态3,元素换行之后,该元素会占据整行,上一行空出来的空间会被其它元素所占满。
    我采用的方法是使用弹性盒模型
    父元素添加以下属性

    display: flex;//表示该元素为弹性盒模型元素。
    flex-wrap: wrap;//表示遇到边界后会自动换行。

    所有子元素添加

    flex-grow: 1;//定义元素在整行中所占的比例,如果都为1,则同行所有的元素的宽度都相同。已换行的元素会 占据整行。如图状态3和状态4.

  • 相关阅读:
    浮动
    导航
    Json
    节点
    评论框
    WebClient 指定出口 IP
    IIS8 下 JS, CSS 等静态文件出现 500 错误
    使用 ffmpeg 转换 mov 视频
    使用 ildasm 和 ilasm 修改程序集的的引用信息
    2020-01-08 工作日记:无题
  • 原文地址:https://www.cnblogs.com/jiandanshishu/p/12953294.html
Copyright © 2020-2023  润新知