• 前端基础知识学习第八节(CSS篇)


    1.

      一个div元素里面里面有3个子元素命名为A、B、C,已知3个元素宽度都为100%,A元素高度不固定,B元素固定高度,如何通过CSS样式来让C元素的高度
          能够自适应,填充满整个div元素

      答案:
      可以通过CSS3 flex布局来实现,对div元素设置
          display: flex; 
          flex-direction: column; / * flex-direction属性指定了弹性子元素在父元素中的排列方式,column是指定弹性子元素纵向排列 * /
      对C元素设置
      flex: 1; / * flex属性是flex-grow flex-shrink flex-basis的简写,默认值为0 1 auto,后两个属性可选,所以这里相当于设置了flex-grow: 1;
             建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值 * /
      flex-grow: 1; / * 表示剩余空间分配占比为1 * /
      flex-shrink: 1; / * 指定了flex元素的收缩规则,flex元素仅在默认宽度之和大于容器的时候才会发生收缩,收缩的大小就是flex-shrink的值 * /
      flex-basis: 100px; / * 指定了flex元素的宽度初始大小,可以代替width使用,优先级大于width * /
      参考链接:http://zhoon.github.io/css3/2014/08/23/flex.html

    2.

      有一个A元素内包含一个B元素,对B元素设置CSS样式margin-top: 10px; 这个margin-top值是作用A还是B上,为什么?

      答案:
      margin-top: 10px; 作用到了A元素上。具体原因是:
      因为嵌套也属于毗邻,所以根据元素产生BFC之后的布局规则,属于同一个BFC的两个相邻元素的上下margin会发生重叠。我们知道了产生问题
      的原因了那么就可以采用对应的解决方案,比如最简单的是给A元素添加overflow: hidden;使A元素触发BFC形成一个隔离的容器这样A元素与B
      之间就不会相互影响了

    3.

      

      
      
      

      
      
      

      

      

      

      

      

  • 相关阅读:
    上传图片,正在加载,loading
    bootstrap-table(2)问题集
    Bootstarp-table入门(1)
    bootstrap-table给每一行数据添加按钮,并绑定事件
    获得 bootstrapTable行号index
    Http请求中Content-Type讲解以及在Spring MVC注解中produce和consumes配置详解
    enums应用详解
    bootstrap-table.min.js不同版本返回分页参数不同的问题
    Linux学习笔记之Linux目录结构、磁盘命名、启动过程
    Linux学习笔记之Linux相关知识
  • 原文地址:https://www.cnblogs.com/typeof/p/12296481.html
Copyright © 2020-2023  润新知