CSS版面題整理

方法三（感谢超级课程表胡晋哥哥的提示），flexbox布局：

http://codepen.io/floralam/pen/yNeMvM

flexbox属性：

 伸缩容器：一个设有“display:flex”或“display:inline-flex”的元素
 伸缩项目：伸缩容器的子元素
 主轴、主轴方向：用户代理沿着一个伸缩容器的主轴配置伸缩项目，主轴是主轴方向的延伸。
 主轴起点、主轴终点：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。
 主轴长度、主轴长度属性：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
 侧轴、侧轴方向：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
 侧轴起点、侧轴终点：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
 侧轴长度、侧轴长度属性：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是「width」或「height」属性，由哪一个对着侧轴方向决定。

另外，对于单行文本，设置line-height=height代码更加简洁:

http://codepen.io/floralam/pen/eNJvyE

父元素设置宽度高度，然后设置属性

text-align:center; /* 水平居中 */
line-height: 300px; /* line-height = height */

4，  多栏自适应布局

对于移动设备浏览器：http://codepen.io/floralam/pen/NPVwgz?editors=110

.container{
  display:-webkit-box;
}.left{
  -webkit-box-flex:1;
}.right{
  -webkit-box-flex:1;
}

 实现左右两侧元素，右侧元素的文字不会溢出到左侧位置。

1）让左边的图片左浮动或者绝对定位，

http://codepen.io/floralam/pen/wBbPPj

.right{

    margin-left: 150px;

}

2）让左边的图片左浮动或者绝对定位，

http://codepen.io/floralam/pen/gbJogQ

.right{

  overflow:hidden;/*让右侧文字和左侧图片自动分栏*/

}

3）左侧图片设置为左浮动，

http://codepen.io/floralam/pen/bNyaaX?editors=110

.right{

  display: table-cell;/*让右侧文字和左侧图片自动分栏*/

}

两栏或多栏自适应布局的通用类语句是（block水平标签，需配合浮动）：

http://codepen.io/floralam/pen/vEwpjV

.cell{

  padding-right:10px;

  display: table-cell;

  *display: inline-block;

  *width: auto;

}

5，  强制不换行

p{
    white-space:nowrap;
}

自动换行

p{　　word-wrap: break-word; //性允许长单词或 URL 地址换行到下一行
　　word-break: normal; //让浏览器实现在任意位置的换行}

word-wrap是控制换行的。break-word是控制是否断词的。

强制英文单词断行

p{

　　word-break:break-all;

}

6，  li超过一定长度，以省略号显示

http://codepen.io/floralam/pen/zxQjrK

.nowrap li{
   white-space:nowrap;
   width:100px;
   overflow:hidden;
   text-overflow: ellipsis;
}

7，  左侧导航

http://codepen.io/floralam/pen/ogrbXW?editors=110

{
:;
:;:;
:;
:;
}{
:;
:;
:;
}{
:;
}

8，  css3文字分栏

http://codepen.io/floralam/pen/ZYdOmN?editors=110

9，  修复侧边栏

在外容器的添加导航和主内容，当导航和主内容的宽度加上内外边距的数值大于外容器的宽度减去内边距的值，会导致导航和主内容（其中一个，html代码排后面的元素）被挤下。

http://codepen.io/floralam/pen/XJLRYq?editors=110

 解决方案：

1)      Section元素上使用box-sizing:border-box;模拟IE6中，使得内元素的宽度为width的值，而非width加上padding和margin的值。

2)      width:-moz-calc(75% -1rem * 2);width:-webkit-calc(75% - 1rem * 2); width: calc(75% - 1rem * 2); width属性中减去padding值

3)      http://codepen.io/floralam/pen/yydPOE

在元素内部增加一个额外的容器，并将padding放在这个新增的内部容器中，这是一种修复方法，而且得到众多浏览器支持。

10， css描绘三角形

http://codepen.io/floralam/pen/azgGmZ

 很多关于使用css3来描绘特定图像，使用代码而非图片实现（多座小山包，返回顶部）的题目，都离不开描绘三角形。

11， 清除浮动的技巧

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

1)      添加最后一个元素

2)      父元素設定overflow: hidden;

3)      使用CSS的:after偽元素

透過CSS偽元素在容器的內部元素最後添加了一個看不見的空格"020"或點"."，並且賦予clear屬性來清除浮動。要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class增加一條zoom:1;觸發haslayout。

http://codepen.io/floralam/pen/xboPXK?editors=110

更多CSS佈局問題整理 相關文章請關注PHP中文網！