zoukankan      html  css  js  c++  java
  • 居中方案

    居中方案
    • 水平居中
      • 行内元素
        • 父元素设置text-align:center
      • 定宽块元素
        • 设置 margin 左右为 auto
        • 块元素文本居中设置text-align:center
      • 不定宽块元素
        • 设置 display 为 table,margin 左右为 auto
          利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
        • 设置 display 为 inline 或 inline-block,按行内元素居中处理
        • 给父元素设置float:left position:relative 和 left:50%,且:
          float隐性改成了display:inline-block使得div获得宽度自适应特性(这是关键),本质是触发了BFC。所以换成​ display:inline-block 或 display:flex也可以。或者不要float:left position:relative ,直接写成position:absolute等。
          • 子元素设置 position:relative 和 left: -50% 来实现水平居中,会溢出父元素盒模型
          • 或者使用css3的transform: translateX(-50%),效果一样,会溢出父元素盒模型
          • 子元素还可以用 margin-left:-50% 来居中,但是这样会使子元素宽度变为实际宽度的1.5倍
    • 垂直居中
      • 父元素高度确定的单行文本
        • 设置父元素的 height 和 line-height 高度一致。
          line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。
      • 父元素高度确定的多行文本
        • 设置父元素 display:table
        • 用一个元素包裹多行标签元素,设置 display:table-cell 和 vertical-align:middle
      • 父子元素高度未知
        • 设置父元素 position:relative
        • 设置子元素 position: absolute top: 50% transform: translateY(-50%)
    • flex(不兼容IE)
      • 父元素设置
      • display:flex;/*Flex布局*/
      • display: -webkit-flex; /* Safari */
    • 附:隐性改变display类型
      • 元素(不论之前是什么类型元素,display:none 除外)
      • 设置以下 2 个句之一:
      • position : absolute
      • float : left 或 float:right
      • 元素的display显示类型就会自动变为以 display:inline-block 的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素
    ![](http://images2017.cnblogs.com/blog/1116285/201802/1116285-20180201153613046-2085085576.png)
  • 相关阅读:
    总结jQuery选择器
    Responsive布局技巧
    学习资料
    大公司开源项目【转载】
    针对css3特性浏览器兼容 封装less
    手把手教你nginx/linux下如何增加网站
    又一枚神器:nginx
    http://www.howtocn.org/nginx
    nginx修改内核参数
    Nginx
  • 原文地址:https://www.cnblogs.com/macq/p/8399181.html
Copyright © 2011-2022 走看看