精华内容
下载资源
问答
  • 常用页面布局分享

    2017-05-22 11:47:00
    常用页面布局方式主要有:浮动,弹性盒子,定位,设置表格模式,行内与块级相结合。 布局方式 Float flex position table block&Inline-block 兼容性 IE4 ...

     

    1. 页面常用布局

    常用的页面布局方式主要有:浮动,弹性盒子,定位,设置表格模式,行内与块级相结合。

    布局方式

    Float

    flex

    position

    table

    block&Inline-block

    兼容性

    IE4

    IE10

    IE7

    IE8

    IE8

    注意

    清除浮动

    设置自适应子容器与父容器

    嵌套使用,各中关系

    内容会自适应

    效果有局限性,行内块之间有缝隙

     

    1.1.浮动布局(Float)

    描述

    left

    元素向左浮动。

    right

    元素向右浮动。

    none

    默认值。元素不浮动,并会显示在其在文本中出现的位置。

    inherit

    规定应该从父元素继承 float 属性的值。

    注意: 绝对定位的元素忽略float属性!

    为什么要清除浮动?

    页面的元素定位机制分为:普通文档流,浮动,绝对定位 (其中"position:fixed" 是

    "position:absolute" 的一个子类)。 
    1)普通流:很多人或者文章称之为文档流或者普通文档流,其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow ,但标准里只有另一个词,叫做 普通流 (normal flow),或者称之为常规流。但似乎大家更习惯文档流的称呼,因为很多中文翻译的书就是这么来的。比如《CSS Mastery》,英文原书中至始至终都只有普通流 normal flow(普通流) 这一词,从来没出现过document flow (文档流) 

    正常文档流示例图:(元素以自然顺序从上自下从左自右,块级占整行,行内元素据内容占位原则。


    2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,会导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。 

    使用浮动布局方式,一定要记得清楚浮动,不清楚浮动有可能导致元素重叠,或其他兼容问题。

     

    基本左、右浮动示例:

     

    常用清除浮动的办法:

    2.1) 添加额外标签 

    通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,其他标签br等亦可。

    缺点:可以想象通过此方法,会添加多少无意义的空标签,有违结构与表现的分离,在后期维护中将是噩梦,这是坚决不能忍受的,所以你看了这篇文章之后还是建议不要用了吧。 

    2.2) 父元素设置 overflow:hidden 

    原理来自于块级格式化上下文,此方法会使溢出内容隐藏

    2.3)父元素设置overflow:auto

    原理来自于块级格式化上下文,此方法在多个嵌套后,firefox某些情况会造成内容全选。元素内容超出时会使其显示导致样式错乱。

    2.4)使其父元素也设置浮动

           会导致与父元素相邻的元素的布局会受到影响,不可能一直浮动到body,不推荐使用

    2.5)父元素设置display:table 

           使用此方法父元素会具有table表格相应属性根据内容自适应,有可能与布局样式不符。

    2.6)使用:after 伪元素 
           其原理与加空标签一样,用伪元素可以精简代码,优雅dom

     

    聊聊块级格式化上下文BFC

    BFC是block formatting context,在文档流的类型中,普通文档流属于FC,而BFC可以理解为一种占位的普通文档流。它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。

      满足下列条件之一就可触发BFC

      【1】根元素,即HTML元素

      【2】float的值不为none

      【3】overflow的值不为visible

      【4】display的值为inline-block、table-cell、table-caption

      【5】position的值为absolute或fixed

    效果分享:

    http://www.cnblogs.com/xiaohuochai/p/5248536.html

     

    1.1.定位position

    定位文档流:在使用position这个属性时,分两种情况。

    (1)       当position:relative时,并没有脱离普通文档流,元素根据top,right,left,bottom值相对自身定位,元素本身所占的位置会保留。

    示例效果图:

     

    (2)     当position:absolute;与position:fixed;时,元素脱离普通文档流,不再占据位置,类似一个漂浮层。absolute定位是相对于自己最近的“祖先元素”定位。Fixed定位是相对于浏览器窗口进行定位的。

    Absolute示例:

     

     

    1.2.弹性布局flex

    弹性布局不会脱离普通文档流,也不会改变当前元素的定位,它是一个自适应的伸缩容器。

    Flex的应用可参考微信移动端布局框架WeUI

    https://weui.io/#flex

    此处的示例主要用于做横向布局,flex也可用于纵向布局,此处不做过多示例,可参考官方文档中相关属性。

    1.3.设置表格布局display:table

    设置display:table的元素会被以作为块级表格来显示,前后自带换行符。

    在html4中<table></table>标签的js源码中可以了解到,也是利用css中display:table来实现的。而在布局中,我们选中display:table而不是<table></table>来布局,是为了取长补短。

    举个例子:

             某个元某的高度是动态获取的,若想让内容始终垂直居中。可以利用父元素display:table;子元素display:table-cell;(如<td></td>) vertical-align:middle;即可。

     

    常见的框架如boostrap的栅格就是利用display:table来做的。

    效果可见网页: http://demo.cssmoban.com/cssthemes4/btts_47_binary-Admin-v1.1/index.html

    1.4.设置block&Inline-block

    通过html标签与css中block或inline-block相结合也可以现实一系列的布局效果。

    注:被设置inline-block的元素与元素之间会产生微小的间隙

    例:因为有间隙,导致父元素的宽度放不下两个宽度为50%的子元素,被挤到下方

     

    将子元素宽度调整为49%时。

     

    若想要去掉中间的间隙方法有很多。分享文章:http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/  

               

    2.样式重构要点

    1.在做基础布局时尽量避免多种布局方法交互使用。定位方式只在必要时使用。

    2.所有的浮动都要清楚

    3.做好公共样式和功能模块样式的分离。

    4.初始编写公共样式时不要“内容化”。注:在之前传统的静态页面开发时,我们都要求见名知意,许多开发人员喜欢将‘内容为主,展现为辅’的原则作为样式的命名规则之一。但是在做公共样式时应与之相反。因为一套公共样式会运用到多个页面,多个组件中,若某个三栏布局的class被命名为 .foot-3 当此布局样式运用到头部菜单栏时,就会很奇怪。同时会增加后期维护人员的难度,误导理解。

    5.在修改公共样式时,每修改一次,都应在相应位置添加注释,便于维护。

    6.编写功能模块样式时,命名内容化,便于理解。样式应该用最外层容器包裹,避免样式的冲突。注:最外层容器千万不能以.content式命名,应如.emial-w表式邮箱外层。

    7.样式的嵌套建议不超过5层。尽量避免用+  >  # 此类的选择器,最好统一使用.class以防破坏样式的优先级。

    优先级计算:

             1)id选择器   100

             2)类选择器,属性选择器,伪类选择器   10

             3)元素和伪元素    1

             4)通配选择器*    0

             5)!important 权重没有值,优先级最高,方便记忆设成10000

    转载于:https://www.cnblogs.com/zhoulin-circle/p/6888772.html

    展开全文
  • 常用页面布局技术

    千次阅读 2017-04-01 17:02:36
    一.自适应三列布局1.使用绝对定位中列</div> 左列</div> 右列 body,html{ height:100%; padding: 0px; margin:0px; } #left { background-color

    一.自适应三列布局

    1.使用绝对定位

    <div id="center">中列</div>    
    <div id="left">左列</div>    
    <div id="right">右列</div>
    body,html{
        height:100%;
        padding: 0px; 
        margin:0px;
        }
    #left {    
        background-color: #E8F5FE;    
        border: 1px solid #A9C9E2;    
        height: 400px;    
        width: 100px;    
        position: absolute;    
        top: 0px;    
        left: 0px;}
    #center {    
        background-color: #F2FDDB;    
        border: 1px solid #A5CF3D;    
        height: 400px;    
        margin-right: 102px;    
        margin-left: 102px;
            }
    #right {    
        background-color: #FFE7F4;    
        border: 1px solid #F9B3D5;    
        height: 400px;    
        width: 100px;    
        position: absolute;    
        top: 0px;    
        right: 0px;}
    (1)处于页面优化考虑,应先加载中间主体区块再依次加载左右侧两列列,所以中间主体区块div要写在左右侧两列区块div前面.
    
    (2)该方法有个明显的缺点,就是如果中间栏含有最小宽度限制,或是含有宽度的内部元素,当浏览器宽度小到一定程度,会发生层重叠的情况。
    

    2.浮动:

    <style>        
    //CSS reset
    body,html {
    height:100%;
    padding: 0;
    margin: 0
    }
    #left,#right {
    float: left;
    width: 220px;
    height: 200px;
    background: blue;
    }
    
    #right{
    float: right;
    }
    
    #main {
    margin: 0 230px;
    background: red;
    height: 200px;
    }
    </style>
    </head>
    <body>    
    <div id="left">left </div>
    <div id="right">right</div>
    <div id="main">mian</div>
    </body>
    </html>
    这是一种比较便利的实现方式,无需额外的元素辅助定位,同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定,中间自适应这一种三列布局,灵活性不强。
    

    3.双飞翼布局

    <style>        
    *{            
    margin: 0;            
    padding: 0;        
     }        
    .main,.left,.right{            
        height: 300px;           
        font: 20px/300px;            
        color: #fff;            
        text-align: center;        
     }        
    .main{            
        width: 100%;            
        float: left;      
    }        
    .main .content{            
        margin: 0 300px 0 200px;            
    background-color: black;        
    }        
    .left{            
    width: 200px;            
    float: left;            
    margin-left: -100%;            
    background-color: red;        
    }        
    .right{           
    width: 300px;            
    float: left;           
    margin-left: -300px;           
     background-color: blue;       
    }    
    </style>
    </head>
    <body>   
     <div class="main">        
        <div class="content">中间主体区域宽度自适应</div>    
    </div>    
    <div class="left">左侧定宽200px</div>    
    <div class="right">右侧定宽300px</div>
    </body>
    增加多一个div就可以不用相对布局了,只用到了浮动和负边距。
    
    1. 跟上潮流,试试 flex

      <style>
      .HolyGrail-body {  
      display: flex;  
      flex: 1;
      }
      .HolyGrail-content {  
      flex: 1;  
      background-color: green;
      }
      .HolyGrail-nav, .HolyGrail-ads {  
      /* 两个边栏的宽度设为12em */  
      flex: 0 0 200px;  
      background-color: blue;
      }
      .HolyGrail-nav {  
      /* 导航放到最左边 */  
      order: -1;  
      background-color: grey;
      }
      </style>
      </head>
      <body>  
      <div class="HolyGrail-body">    
      <main class="HolyGrail-content">...</main>    
      <nav class="HolyGrail-nav">...</nav>    
      <aside class="HolyGrail-ads">...</aside>  
      </div>
      </body>
      flex 布局中不能将被定位的元素宽度或高度设定为 100%,这样会影响其他定值大小的元素。那么该如何设置中间元素的宽度呢,flex: 1; 即可.
      

    二.水平居中与垂直居中

    1.水平居中

    (1)CSS3如何实现元素水平居中
       <1>行内元素如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.
    div{
    border:1px solid red;
    }
    div.txtCenter{
    text-align:center; 
    }
    div.imgCenter{
    text-align:center; 
    }
    
    <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平显示居中</div>
    <div class="imgCenter">
    <img src="http://www.baidu.com/img/bd_logo1.png"></div>
    <2>定宽块状元素
    当被设置元素为块状元素时用 text-align:center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
    
    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
    设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
    div{
    border:1px solid red;
    width:500px;
    margin: 10px auto; 
    }
    <div class="txtCenter">我是定宽块状元素,哈哈,我要水平居中</div>
    <3>在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
      <1>不定宽块状元素1
            1)为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
            2)为这个 table 设置“左右 margin 居中。
            table{
            margin:0 auto; 
            }
            ul{
            list-style:none;margin:0;padding:0;
            }
            li{
            float:left;display:inline;margin-right:8px;    
            } 
        .wrap{
            background:#ccc; 
            }  
        注意:display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。
        <2> 不定宽块状元素2
        改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果
        .container {text-align:center;}
        .container ul{list-style:none;margin:0;padding:0;display:inline ;   
        }
        .container li{margin-right:8px;display:inline;  }
        <3>不定宽块状元素3
        通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中
    .wrap{
    float:left;
    position:relative;
    left:50%;    
    }
    .wrap-center{
    background:#ccc;
    position:relative;
    left:-50%;
    }
    <div class="wrap">
    <div class="wrap-center">不定宽块状元素水平居中方法3</div>                   
    </div>
    

    2.垂直居中

    (1)父元素高度确定的单行文本
    垂直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.
    
    .wrap{
    margin:0;
    height:100px;
    line-height:100px;
    background:#ccc;        
    }
    <div class="wrap">
    <h2>父元素告诉确定的单行文本垂直居中</h2>                   
    </div>
    (2)说到竖直居中,css 中有一个用于竖直居中的属性 vertical-align,但这个样式只有在父元素为 td 或 th 时,才会生效
    (3)父元素高度确定的多行文本1
    使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle(因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了)
    .wrap{
    height:300px;
    background:#ccc;        
    }
    <table><tbody><tr><td class="wrap">
    <div>
    <img src="" alt="害羞的小怒海">                   
    </div>
    </td></tr></tbody></table>  
    (4)父元素高度确定的多行文本2
    在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell, vertical-align:middle,但注意 IE6、7 并不支持这个样式。
    .container{
    height:300px;
    background:red;
    
    display:table-cell;
    vertical-align:middle;          
    }
    <div class="container">
    <img src="https://p1.ssl.qhimg.com/t01e41b648b394bca10.png">
    </div>
    

    三.CSS3弹性布局

    随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果。
    
    引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。在该布局模型中,容器会根据布局的需要,调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时,其中包含的条目也会被动态地调整。比如当容器尺寸变大时,其中包含的条目会被拉伸以占满多余的空白空间;当容器尺寸变小时,条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作
    
    响应式Web设计(Responsive Web design)的理念是:
    页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
    

    1.基本布局

    简单的图片缩略图预览页面的 HTML 代码
    <ul class="flex-container">
    <li class="flex-item"><img src="//placehold.it/300&text=1"></li>
    <li class="flex-item"><img src="//placehold.it/300&text=2"></li>
    <li class="flex-item"><img src="//placehold.it/300&text=3"></li>
    <li class="flex-item"><img src="//placehold.it/300&text=4"></li>
    <li class="flex-item"><img src="//placehold.it/300&text=5"></li>
    <li class="flex-item"><img src="//placehold.it/300&text=6"></li>
    </ul>
    .flex-container {
    list-style: none;
    
     display: flex;
    flex-direction: row;
    fex-wrap: wrap;
    }
    
    .flex-item {
    padding: 5px;
    }
    用"display: flex"声明使用弹性盒布局。CSS 属性声明"flex-direction"用来确定主轴的方向,从而确定基本的条目排列方式。
    表 1. “flex-direction”属性的可选值及其含义
    属性值 含义
    row(默认值)    主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr,则排列顺序是从左到右;如果文档顺序是 rtl,则排列顺序是从右到左。
    row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
    column  主轴为垂直方向。排列顺序为从上到下。
    column-reverse  主轴为垂直方向。排列顺序从下到上.
    
    默认情况下,弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其所有条目总的主轴尺寸时,会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如表2所示。
    
    属性值 含义
    nowrap(默认值) 容器中的条目只占满容器在主轴方向上的一行,可能出现条目互相重叠或超出容器范围的现象。
    wrap    当容器中的条目超出容器在主轴方向上的一行时,会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
    wrap-reverse    与 wrap 的含义类似,不同的是下一行的位置与交叉轴的方向相反。
    可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来,
    清单 3. “flex-flow”属性的使用示例
    flex-flow: row wrap;
    

    2.容器中的条目

    (1)条目的顺序
    默认情况下,容器中条目的顺序取决于它们在 HTML 标记代码中的出现顺序。可以通过"order"属性来改变条目在容器中的出现顺序。
    例如:
    .flex-item:last-child {
    order: -1;
    }
    "order"属性的主要作用是兼顾页面的样式和可访问性。支持可访问性的设备,如屏幕阅读器,都是按照 HTML 中代码的顺序来读取元素的。这就要求一些相对重要的文本出现在 HTML 标记的前面。而对于使用浏览器的一般用户来说,在某些情况下把一些相对不重要的图片显示在前面是更好的选择。比如在一个商品的展示页面中,在源代码中把商品描述的文本放在商品图片之前。这样可以方便屏幕阅读器的读取;而在 CSS 中使用"order"属性把图片放在文本的前面。这样可以让用户首先看到图片。
    (2)条目尺寸的弹性
    弹性盒布局模型的核心在于容器中条目的尺寸是弹性的。容器可以根据本身尺寸的大小来动态地调整条目的尺寸。当容器中有空白空间时,条目可以扩展尺寸以占据额外的空白空间;当容器中的空间不足时,条目可以缩小尺寸以防止超出容器范围。条目尺寸的弹性由 3 个 CSS 属性来确定,分别是"flex-basis"、"flex-grow"和"flex-shrink"。
    
    "flex-basis"属性声明接受的值与"width"属性是一样的,用来确定弹性条目的初始主轴尺寸。这是条目的尺寸被容器调整之前的初始值。如果"flex-basis"的值为 auto,则实际使用的值是主轴尺寸属性的值,即 width 或 height 属性的值。如果主轴尺寸属性的值也是 auto,则使用的值由条目内容的尺寸来确定。
    
    "flex-grow"属性的值是一个没有单位的非负数,默认值是 1。"flex-grow"属性的值表示的是当容器有多余的空间时,这些空间在不同条目之间的分配比例。比如,一个容器中有 3 个条目,其"flex-grow"属性的值分别为 1,2 和 3,那么当容器中有空白空间时,这 3 个条目所获得的额外空白空间分别占全部空间的 1/6、1/3 和 1/2,如代码清单 5所示。
    .flex-item:nth-child(1) {
    flex-grow: 1;
    }
    
    .flex-item:nth-child(2) {
    flex-grow: 2;
    }
    
    .flex-item:nth-child(3) {
    flex-grow: 3;
    }
    "flex-shrink"属性在使用上类似于"flex-grow"。该属性的值也是无单位的,表示的是当容器的空间不足时,各个条目的尺寸缩小的比例。在进行尺寸缩小时,条目的缩小比例与"flex-basis"的值相乘之后,就得到了应该缩小的尺寸的实际值。例如,在容器中有 3 个条目,其"flex-shrink"属性的值分别为 1,2 和 3。每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时,比如变成了 540px 之后, 则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。3 个条目分别要缩小 10px、20px 和 30px,主轴尺寸分别变为 190px、180px 和 170px。预览的页面见这里。
    
    使用属性"flex"可以同时声明"flex-basis"、"flex-grow"和"flex-shrink"的值,格式是"none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"。该属性的值的 3 个组成部分的初始值分别是"0 1 auto"。当属性"flex"的值为 none 时,相当于"0 0 auto"。当组成部分"flex-basis"被省略时,其值为 0%。代码清单 6给出了属性"flex"的使用示例。
    .flex-item:nth-child(1) {
    flex: 1 1 auto;
    }
    
    flex: 1;  // flex-grow 的值为 1,flex-shrink 的值为 1,flex-basis 的值为 0%。
    需要注意的是,在容器分配额外空间时是以"行"为单位的。容器先根据"flex-wrap"的属性值来确定是单行布局或多行布局,然后把条目分配到对应的行中,最后在每一行内进行空白空间的分配。如代码清单 7中的 CSS 声明示例,
    .flex-container {
    width: 990px;
    }
    
    .flex-item {
    width: 300px;
    flex: auto;
    }
    由于容器的宽度只有 990px,所以在一行中只能排列 3 个条目,而剩下的 1 个条目则会被排列到单独的一行中。在 3 个条目的行中,多余的空间 90px 被平均分配给 3 个条目;而在一个条目单独的行中,多余的 690px 被该条目完全占据。
    
    (3)条目对齐
    第一种方式是使用自动空白边,即"margin: auto"。在使用自动空白边时,容器中额外的空白空间会被声明为 auto 的空白边占据,如代码清单 8所示。CSS 声明 profile 中通过"margin-left: auto"使得该条目左边的空白边会占据额外的空间,从而"Profile"文本会靠右显示。
    
    <div class="flex-container">
    <div class="logo">Logo</div>
    <div class="profile">Profile</div>
    </div>
    .flex-container {
    display: flex;
    }
    .profile {
    margin-left: auto;
    }
    
    第二种方式是在主轴方向上的对齐。这是通过容器上的"justify-content"属性来进行设置,可以调整条目在主轴方向上的对齐方式。这种条目对齐方式的调整发生在修改条目的弹性尺寸和处理自动空白边之后。当容器中的一行中的条目没有弹性尺寸,或是已经达到了它们的最大尺寸时,在这一行上可能还有额外的空白空间。使用"justify-content"属性可以分配这些空间。该属性还可以控制当条目超出行的范围时的对齐方式。"justify-content"属性的可选值和含义如表3所示,
    表 3. “justify-content”属性的可选值和含义
    属性值 含义
    flex-start  条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐,其余的条目按照顺序依次排列。
    flex-end    条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐,其余的条目按照顺序依次排列。
    center  条目集中于该行的中央。条目都往该行的中央排列,在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足,则条目会在两个方向上超出同样的空间。
    space-between   第一个条目与其所在行在主轴起始方向上的边界保持对齐,最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配,使得相邻条目之间的空白尺寸相同。
    space-around    类似于 space-between,不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间,该空白空间的尺寸是条目之间的空白空间的尺寸的一半。
    
    第三种方式是交叉轴方向上的对齐。除了在主轴方向上对齐之外,条目也可以在交叉轴方向上对齐。容器上的属性"align-items"用来设置容器中所有条目在交叉轴上的默认对齐方向,而条目上的属性"align-self"用来覆写容器指定的对齐方式。属性"align-items"的可选值和含义如表4所示,实际的布局效果见图 3。
    
    表 4. 属性“align-items”的可选值和含义
    属性值 含义
    flex-start  条目与其所在行在交叉轴起始方向上的边界保持对齐。
    flex-end    条目与其所在行在交叉轴结束方向上的边界保持对齐。
    center  条目的空白边盒子(margin box)在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸,则条目会在两个方向上超出相同大小的空间。
    baseline    条目在基准线上保持对齐。在所有条目中,基准线与交叉轴起始方向上的边界距离最大的条目,它与所在行在交叉轴方向上的边界保持对齐。
    stretch 如果条目的交叉轴尺寸的计算值是"auto",则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。
    属性"align-self"的可选值除了表中列出的之外,还可以设置为"auto"。当"align-self"的值为 auto 时,其计算值是父节点的属性"align-items"的值。如果该节点没有父节点,则计算值为"stretch"。
    

    四.一行文字省略号与多行文字省略号

    1.一行文字省略号

    <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
    省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧!省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧! 省略我吧!
    </p>
    (1)text-overflow: ellipsis;
    简单理解就是我要把文本限制在一行(white-space: nowrap;),肯定这一行是有限制的(width),并且你的溢出的部分要隐藏起来(overflow: hidden;),然后出现省略号( text-overflow: ellipsis)。
    (2)white-spaceoverflow: hidden;
    下面是wschool上white-space可能的值:
    
    normal 默认。空白会被浏览器忽略。
    pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
    pre-wrap 保留空白符序列,但是正常地进行换行。
    pre-line 合并空白符序列,但是保留换行符。
    inherit 规定应该从父元素继承 white-space 属性的值。
    

    2.多行文字省略号

    (1)直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ;
    注意:这是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
        -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
    常见结合属性:
    
    display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
        -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
    text-overflow: ellipsis;,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    这个属性比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。   
    (2)跨浏览器兼容的方案
    比较靠谱简单的做法就是设置相对定位的容器高度,用包含省略号(…)的元素模拟实现;
    p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
    }
    p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
    }
     <p>WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    这里注意几点:
    
    1.height高度真好是line-height的3倍;
    2.结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
    3.IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;
    4.要支持IE8,需要将::after替换成:after;
    (3)JavaScript 方案
      用js也可以根据上面的思路去模拟,实现也很简单,推荐几个做类似工作的成熟小工具
    <1>Clamp.js
    下载及文档地址:https://github.com/josephschmitt/Clamp.js
    使用也非常简单:
    var module = document.getElementById("clamp-this-module");
    $clamp(module, {clamp: 3});
    <2>jQuery插件-jQuery.dotdotdotjQuery插件-jQuery.dotdotdot
    $(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
    });
    

    五.清除浮动

    浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。
    
    下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):
    

    1.父级div定义 height
    代码如下:

    .div1{background:#000080;border:1px solid red;/解决代码/height:200px;}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}


    Left

    Right



    div2

    原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
    优点:简单、代码少、容易掌握

    缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 
    
    建议:不推荐使用,只建议高度固定的布局时使用 
    

    2.结尾处加空div标签 clear:both

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    /*清除浮动代码*/ 
    .clearfloat{clear:both} 
    </style> 
    <div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="clearfloat"></div> 
    </div> 
    <div class="div2"> 
    div2 
    </div> 
    原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度 
    
    优点:简单、代码少、浏览器支持好、不容易出现怪问题 
    
    缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好 
    
    建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法 
    

    3.父级div定义 伪类:after 和 zoom

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red;} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    /*清除浮动代码*/ 
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
    .clearfloat{zoom:1} 
    </style> 
    <div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div> 
    <div class="div2"> 
    div2 
    </div> 
    原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题 
    
    优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等) 
    
    缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。 
    
    建议:推荐使用,建议定义公共类,以减少CSS代码。
    

    4.父级div定义 overflow:hidden

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    </style> 
    <div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div> 
    <div class="div2"> 
    div2 
    </div> 
    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 
    
    优点:简单、代码少、浏览器支持好 
    
    缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。 
    
    建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
    

    5.父级div定义 overflow:auto

    .div1{background:#000080;border:1px solid red;/解决代码/width:98%;overflow:auto}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}

    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度

    优点:简单、代码少、浏览器支持好 
    
    缺点:内部宽高超过父级div时,会出现滚动条。 
    
    建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
    

    6.父级div 也一起浮动

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
    .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    </style> 
    <div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div> 
    <div class="div2"> 
    div2 
    </div> 
    原理:所有代码一起浮动,就变成了一个整体 
    
    优点:没有优点 
    
    缺点:会产生新的浮动问题。 
    
    建议:不推荐使用,只作了解。
    

    7.父级div定义 display:table

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
    .div2{background:#800080;border:1px solid red;height:100px;width:98%;} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    </style> 
    <div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div> 
    <div class="div2"> 
    div2 
    </div> 
    原理:将div属性变成表格 
    
    优点:没有优点 
    
    缺点:会产生新的未知问题。 
    
    建议:不推荐使用,只作了解。
    

    8.结尾处加 br标签 clear:both

    <style type="text/css"> 
    .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
    .div2{background:#800080;border:1px solid red;height:100px} 
    .left{float:left;width:20%;height:200px;background:#DDD} 
    .right{float:right;width:30%;height:80px;background:#DDD} 
    .clearfloat{clear:both} 
    </style> 
    <div class="div1"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <br class="clearfloat" /> 
    </div> 
    <div class="div2"> 
    div2 
    </div> 
    原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both 
    
    建议:不推荐使用,只作了解。 
    

    六.代码reset

    1.CSS Reset是什么?
    在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE 下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻 烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简 单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

    2.为什么要重置它?
    因为浏览器的品种很多,每个浏览器的默认样式也是不同的,比如标签,在IE浏览器、Firefox浏览器以及Safari浏 览器中的样式都是不同的,所以,通过重置button标签的CSS属性,然后再将它统一定义,就可以产生相同的显示效果。

    3.下面是经常使用的重置代码:

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, em, p, font, img, small, strong, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:12px;vertical-align:baseline} 
    ol, ul {list-style:none} :focus {outline:none; } 
    table {border-collapse:collapse;border-spacing: 0} 
    caption, th, td { text-align: left; font-weight: normal} 
    strong {font-weight:600} 
    a{font:12px Arial;text-decoration:none;color:#404040;cursor:pointer;} 
    a:hover{text-decoration:underline;color:#FF3300} 
    h1{font-size:16px;font-weight:600;color:#666} .left{float:left} .right{float:right} .clear{clear:both}
    
    展开全文
  • 水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素) ...

    单列布局

    水平居中

    水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)

    使用inline-block 和 text-align实现

    .parent{text-align: center;}
    .child{display: inline-block;}

    优点:兼容性好;
    不足:需要同时设置子元素和父元素

    使用margin:0 auto来实现

    .child{width:200px;margin:0 auto;}

    优点:兼容性好
    缺点: 需要指定宽度

    使用table实现

    .child{display:table;margin:0 auto;}

    优点:只需要对自身进行设置
    不足:IE6,7需要调整结构

    使用绝对定位实现

    .parent{position:relative;}
    /*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
    .child{position:absolute;left:50%;transform:translate(-50%);}

    不足:兼容性差,IE9及以上可用

    实用flex布局实现

    /*第一种方法*/
    .parent{display:flex;justify-content:center;}
    /*第二种方法*/
    .parent{display:flex;}
    .child{margin:0 auto;}

    缺点:兼容性差,如果进行大面积的布局可能会影响效率

    垂直居中

    vertical-align

    我们都知道,每个人都有不同的嗜好,有的人喜欢吃甜食,有的人喜欢吃辣的东西,有的人不喜欢吃芹菜,有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样,他们有的只对牛奶感兴趣,有的只喜欢吃坚果和果冻,而讨厌牛奶。而vertical-align呢,是个比较挑食的家伙,它只喜欢吃果冻,从小吃果冻长大,没有了果冻,它就会闹脾气,对你不理不睬。我称之为“果冻依赖型元素”,又称之为“inline-block依赖型元素”,也就是说,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。我对css-vertical-align的一些理解与认识

    在使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;

    /*第一种方法*/
    .parent{display:table-cell;vertical-align:middle;height:20px;}
    /*第二种方法*/
    .parent{display:inline-block;vertical-align:middle;line-height:20px;}

    实用绝对定位

    .parent{position:relative;}
    .child{positon:absolute;top:50%;transform:translate(0,-50%);}

    实用flex实现

    .parent{display:flex;align-items:center;}

    水平垂直全部居中

    利用vertical-align,text-align,inline-block实现

    .parent{display:table-cell;vertical-align:middle;text-align:center;}
    .child{display:inline-block;}

    利用绝对定位实现

    .parent{position:relative;}
    .child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

    利用flex实现

    .parent{display:flex;justify-content:center;align-items:center;}

    多列布局

    左列定宽,右列自适应

    该布局方式非常常见,适用于定宽的一侧常为导航,自适应的一侧为内容的布局

    利用float+margin实现

    .left{float:left;width:100px;}
    .right{margin-left;margin-left:100px;}

    注:IE6会有3px的bug

    利用float+margin(fix)实现

    <div class="parent">
        <div class="left"></div>
        <div class="right-fix">
            <div class="right"></div>
        </div>
    </div>
    .left{width:100px;float:left;}
    .right-fix{width:100%;margin-left:-100px;float:right;}
    .right{margin-left:100px;}

    使用float+overflow实现

    .left{width:100px;float:left;}
    .right{overflow:hidden;}

    overflow:hidden,触发bfc模式,浮动无法影响,隔离其他元素,IE6不支持,左侧left设置margin-left当作left与right之间的边距,右侧利用overflow:hidden 进行形成bfc模式
    如果我们需要将两列设置为等高,可以用下述方法将“背景”设置为等高,其实并不是内容的等高

    .left{width:100px;float:left;}
    .right{overflow:hidden;}
    .parent{overflow:hidden;}
    .left,.right{padding-bottom:9999px;margin-bottom:-9999px;}

    使用table实现

    .parent{display:table;table-layout:fixed;width:100%;}
    .left{width:100px;}
    .right,.left{display:table-cell;}

    实用flex实现

    .parent{display:flex;}
    .left{width:100px;}
    .right{flex:1;}

    利用右侧容器的flex:1,均分了剩余的宽度,也实现了同样的效果。而align-items 默认值为stretch,故二者高度相等

    右列定宽,左列自适应

    实用float+margin实现

    .parent{background:red;height:100px;margin:0 auto;}
    .left{background:green;margin-right:-100px;width:100%;float:left;}
    .right{float:right;width:100px;background:blue;}

    使用table实现

    .parent{display:table;table-layout:fixed;width:100%;}
    .left{display:table-cell;}
    .right{width:100px;display:table-cell;}

    实用flex实现

    .parent{display:flex;}
    .left{flex:1;}
    .right{width:100px;}

    两列定宽,一列自适应

    基本html结构为父容器为parent,自容器为left,center,right.其中,left,center定宽,right自适应

    利用float+margin实现

    .left,.center{float:left:width:200px;}
    .right{margin-left:400px;}

    利用float+overflow实现

    .left,.center{float:left:width:200px;}
    .right{overflow:hidden;}

    利用table实现

    .parent{display:table;table-layout:fixed;width:100%;}
    .left,.center,.right{display:table-cell;}
    .left,.center{width:200px;}

    利用flex实现

    .parent{display:flex;}
    .left,.center{width:100px;}
    .right{flex:1}

    两侧定宽,中栏自适应

    利用float+margin实现

    .left{width:100px;float:left;}
    .center{float:left;width:100%;margin-right:-200px;}
    .right{width:100px;float:right;}

    利用table实现

    .parent{width:100%;display:table;table-layout:fixed}
    .left,.center,.right{display:table-cell;}
    .left{width:100px;}
    .right{width:100px;}

    利用flex实现

    .parent{display:flex;}
    .left{width:100px;}
    .center{flex:1;}
    .right{width:100px;}

    一列不定宽,一列自适应

    利用float+overflow实现

    .left{float:left;}
    .right{overflow:hidden;}

    利用table实现

    .parent{display:table;table-layout:fixed;width:100%;}
    .left{width:0.1%;}
    .left,.right{display:table-cell;}

    利用flex实现

    .parent{display:flex;}
    .right{flex:1;}

    多列等分布局

    多列等分布局常出现在内容中,多数为功能的,同阶级内容的并排显示等。

    html结构如下所示

    <div class="parent">
        <div class="column">1</div>
        <div class="column">1</div>
        <div class="column">1</div>
        <div class="column">1</div>
    </div>

    实用float实现

    .parent{margin-left:-20px}/*假设列之间的间距为20px*/
    .column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}

    利用table实现

    .parent-fix{margin-left:-20px;}
    .parent{display:table;table-layout:fixed;width:100%;}
    .column{display:table-cell;padding-left:20px;}

    利用flex实现

    .parent{display:flex;}
    .column{flex:1;}
    .column+.column{margin-left:20px;}

    九宫格布局

    使用table实现

    <div class="parent">
            <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
            <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
            <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
        </div>
    .parent{display:table;table-layout:fixed;width:100%;}
    .row{display:table-row;}
    .item{display:table-cell;width:33.3%;height:200px;}

    实用flex实现

    <div class="parent">
    <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
    <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
    <div class="row"><div class="item"></div><div class="item"></div><div class="item"></div></div>
    </div>
    .parent{display:flex;flex-direction:column;}
    .row{height:100px;display:flex;}
    .item{width:100px;background:red;}

    全屏布局

    利用绝对定位实现

    <div class="parent">
    <div class="top">top</div>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="bottom">bottom</div>
    </div>
    html,body,parent{height:100%;overflow:hidden;}
    .top{position:absolute:top:0;left:0;right:0;height:100px;}
    .left{position:absolute;top:100px;left:0;bottom:50px;width:200px;}
    .right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;}
    .bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}

    利用flex实现

    <div class="parent">
    <div class="top">top</div>
    <div class="middle">
    <div class="left">left</div>
    <div class="right">right</div>
    </div>
    <div class="bottom">bottom</div>
    </div>
    .parent{display:flex;flex-direction:column;}
    .top{height:100px;}
    .bottom{height:50px;}
    .middle{flex:1;display:flex;}
    .left{width:200px;}
    .right{flex:1;overflow:auto;}

    响应式布局

    meta标签的实用

    设置布局宽度等于设备宽度,布局viewport等于度量viewport

    <meta name="viewport" content="width=device-width,initial-scale=1">

    媒体查询

    HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性, 扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成, 媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下, 为特定的一些输出设备定制显示效果。

    语法
    @media screen and (max-width:960px){....}
    <link rel="stylesheet" media="screen and (max-width:960px)" href='xxx.css' />

    展开全文
  • css常用页面布局

    2013-02-16 14:28:00
    以前这些东西都是信手拈来的,很久不用都忘了,时间真是一把杀猪刀。...第一种常见的页面布局,是左栏固定,右栏自适应的结构。css样式如下: .left{ width:200px; border:1px solid #666; ...

    以前这些东西都是信手拈来的,很久不用都忘了,时间真是一把杀猪刀。

    今天是初七,2013年春节过后上班的第一天,很多人还没来。我也没什么活,我在网上找了些布局的东西看了下,自己又实际的写了一些,颇有收获。

    第一种常见的页面布局,是左栏固定,右栏自适应的结构。css样式如下:

    .left{
        width:200px;
        border:1px solid #666;
        float: left;
    }
    .right{
        margin-left: 205px;
        border:1px solid #666;
    }

    看起来很简单,既是左边浮动,右边是标准流,右边有相应的margin-left.

    这个时候我发现一个问题,也是常用的width:100%;当加了这一句之后,发现右边已经超出了浏览器的界限,这个是为什么呢。

    原来宽度100%,这里的100%表示的是当前标签的宽度父元素的宽度的100%。父元素是body,所以当前标签就和body一样宽了。除了当前标签的宽度,再加上margin-left和border的宽度,所以这个标签看起来就比浏览器还要宽了。

    这里搞明白了两个概念:

    标准流盒子的宽度是以父元素为自适应标准的。

    非标准流的盒子是以内容为自适应标准的。

    下面是三列的布局,两边固定宽度,中间一列自适应。照例,左边浮动宽度固定。中间不浮动,但是有margin-left和margin-right,现在的问题是,右边怎么办,原想,右边的话就来一个float:right,右浮动到右边,发现这样

    不妥,不妥的原因很简单,中间的标准流将最右边的非标准流挤了下来。

    最初,标准流可以将非标准流挤下来 我有些不信,简单的做了一个小例子,发现确实如此,例子如下:

     

    <div class="whole">
            <div style="width:100px;border:1px solid">标准流</div>
            <div style="float:left;width:100px;border:1px solid">非标准流</div>
        </div>

     

    通过这个例子,发现非标准流并没有对标准流视而不见,反而是去了下一行。

     

    我对右边这列采用了绝对定位的方法 很好用。写到这里觉得好像还可以有其他的解决方案,我再试一下。

    再次尝试就不用绝对定位的方法了,根据非标准流对标准流视而不见的原则,我改了一下结构

     

    .left{
        width:200px;
        border:1px solid #666;
        float: left;
    }
    .mid{    
        border:1px solid #666;
        margin-left: 205px;
        margin-right: 205px;
    }
    .rig{
        float: right;
        width:200px;
        border:1px solid #666;
    }
    
    <div class="whole">
            <h1>三栏两边固定中间自适应</h1>
            <div class="left">float:left</div>
            <div class="rig">float:rig</div>
            <div class="mid">no float:mid</div>        
    </div>

     

    这个时候就正常了。

    原因很简单,标准流对非标准流视而不见,因此,将mid设置了margin-left和margin-right的属性后,不会被挤到下一行。

    这里得出了两个结论:

    标准流是看不到非标准流的,也就是上面说的,标准流对非标准流视而不见。

    非标准流在布局时是会考虑标准流的。

    转载于:https://www.cnblogs.com/lxin/archive/2013/02/16/2913375.html

    展开全文
  • 1.XAML页面常用的的几个布局容器:StackPanel\Grid\DockPanel2.StackPanel栈布局:StackPanel栈布局--(通过Orientation的Horizontal或者Vertical来控制水平还是垂直排列)其运用地方,如:butto...
  • 常用页面布局

    2021-01-18 21:37:04
    常用页面布局两栏布局三栏布局圣杯布局圣杯布局的实现方式有一下两种:浮动,flex布局双飞翼布局使用flex 前言:两栏布局、三栏(圣杯、双飞翼)布局 两栏布局 两栏布局,左边定宽,右边自适应 左边左浮动,右边加...
  • 页面常用布局

    2019-03-04 20:54:32
    页面元素的宽度会根据页面的尺寸随时调整,来达到适应当前页面的目的,但整体布局不变。 代表作:栅栏系统(网格系统) 百分比是基于元素父级的大小计算得来的; 元素的水平或者竖直间距都是相对于父级的...
  • 几种常用页面布局

    2018-09-05 10:05:00
    前言   网页布局是前端网页开发的第一步,是最最基础的部分,也...本篇就着重介绍几种常用页面布局方法。 居中布局   开头先说明一下,这里的居中方案都是可以适用于父容器和子容器都既不定宽也不定高的条件下...
  • 小程序常用页面布局

    千次阅读 2019-04-26 09:19:39
    在小程序中最经常使用到的就是flex布局,今天来讲讲flex布局的几个常用属性。 小程序中常用到: .flex:{display:flex;} 可以实现自定义和自由化的整齐布局。下面是常用的几个属性 1.比例布局【width】; 元素设置...
  • 常用页面布局(两栏布局,圣杯、双飞翼布局) 前言:他们都遵循以下要点 两侧宽度固定,中间宽度自适应 中间部分在DOM结构上优先,以便先行渲染 允许三列中的任意一列成为最高列 只需要使用一个额外的外层 标签 ...
  • 移动端页面布局 流式布局(百分比布局自适应布局)  视口  可见视口  设备屏幕宽度  布局视口  网页宽度  理想视口  通过meta标签 理想视口是浏览器的事情  <meta name='viewport' content='user-...
  • web页面常用布局(pc端布局和移动端布局) 什么是web布局呢? 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分...
  • 常用页面布局(两栏布局、三栏(圣杯、双飞翼)布局) 常用页面布局(两栏布局、三栏(圣杯、双飞翼)布局) //html <div id="left">左边定宽</div> <div id="right">右边自适应,前端前端...
  • 花了几天时间学习了PyQt5的常用组件及页面布局,现总结如下 借用网上的图 界面一 主要用到的布局器:QVBoxLayout,QHBoxLayout 主要组件:QPushButton,QLabel,QDoubleSpinBox,QLineEdit self.form_v1 = QWidget...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,638
精华内容 1,455
关键字:

常用页面布局