美文网首页
CSS布局&居中&媒体查询(11)

CSS布局&居中&媒体查询(11)

作者: 饥人谷1904_陈俊锋 | 来源:发表于2019-05-05 11:39 被阅读0次

    饥人谷学习第11天

    什么是布局

    现有样式

    • 文档流
    • 浮动
    • 定位
      不能满足人们的需求
      人们需要
    • 导航栏+内容
    • 导航栏+内容+广告栏
    • 从上到下、从左到右、定宽、自适应...

    • 单列布局
      一栏布局
      一栏布局(通栏)
      实现方式:定宽+水平居中
      注意:max-width和width的差别

    • 双列布局
      一列固定宽度,另一列自适应
      实现方式:浮动+普通元素margin
      注意:浮动元素要写到前面先去渲染

    • 三栏布局
      类似双栏布局

    • 水平等距排列
      用到了浮动和负margin

    • 圣杯布局

    • 双飞翼布局

    • 流式布局

    • 弹性布局flex
      Flexbox为CSS提供了强大的弹性布局方式
      适合移动端场景

    • grid布局

    • 移动端布局
      设置meta
      适配 媒体查询 or 动态 rem

    元素居中

    水平居中

    • text-align
      在父元素上设置 text-align: center 式文字/图片水平居中
    • margin
      块级元素设置宽度,左margin和右margin设置为相同

    垂直居中

    • 绝对定位实现居中
      绝对定位之后设置 left: 50%top: 50% 以及 margin-left: 负自身宽度的一半margin-top: 负自身高度的一半
      前提:高度和宽度是固定的
      高度宽度不确定的前提下可以用 transform: translate(-50%, -50%)
    • vertical-align实现居中
    .box:before{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    

    然后给box里要垂直居中的文字/图片设置 vertical-align: middle;

    • table-cell居中
    .box{
      width: 300px; /* 宽度不加的话会自动收缩 */
      height: 200px;
      border: 1px solid ;
      display: table-cell; /* 不是块级元素 */
      vertical-align: middle;/* 对表格元素的居中特别明显 */
      text-align: center;
    }
    
    • display: flex
    .space { /* 父元素 */
      width: 100vw;
      height: 100vh;  /* 设置宽高以显示居中效果 */
      display: flex;  /* 弹性布局 */
      align-items: center;  /* 垂直居中 */
      justify-content: center;  /* 水平居中 */
    }
    

    flex讲解:https://blog.csdn.net/linda_417/article/details/51507176

    媒体查询

    响应式布局以及响应式布局的引入

    资料:http://book.jirengu.com/fe/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6/HTML5%E5%92%8CCSS3/media_query.html

    相关文章

      网友评论

          本文标题:CSS布局&居中&媒体查询(11)

          本文链接:https://www.haomeiwen.com/subject/mtucoqtx.html