1.max-width:

当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦!页面比宽度小时,会自动缩小哦~

CSS Code复制内容到剪贴板
  1. max-width : 500px;   
  2. margin: 0 auto;   
  3. }   

2.box-sizing:

对元素设置box-sizing:border-box后,确定宽度后再设置padding和border,不会改变宽度。可以对全局设置,解决浏览器兼容问题的写法如下:

CSS Code复制内容到剪贴板
  1. -webkit-box-sizing : border-box;   
  2. -moz-box-sizing:border-box;   
  3. box-sizing:border-box;   
  4.  }   

3.overflow:auto

边框自适应内容的大小,不会出现overflow的情况。

IE兼容方案:

.example{ overflow:auto; zoom:1; }

4.响应式设计-媒体查询

运用媒体查询后,可以根据不同的页面宽度设置不同的布局,方法如下:

CSS Code复制内容到剪贴板
  1. //页面宽度大于600px时,nav模块浮动于左侧   
  2. @media screen and (min-width: 600px) {   
  3. nav {   
  4.     float: left;   
  5.     width: 25%;   
  6. }   
  7. section {   
  8.     margin-left: 25%;   
  9. }   
  10. }   
  11. //页面宽度小于599时,nav模块打横,在上方   
  12. @media screen and (max-width: 599px) {   
  13. nav li {   
  14.     display: inline;   
  15. }   
  16. }  
5.文字多列布局: CSS Code复制内容到剪贴板
  1. .three-column { padding :1em; -moz-column-count :3; -moz-column-gap: 1em; -webkit-column-count :3; -webkit-column-gap: 1em; column-count:3; column-gap:1em; }   

以上这篇css布局小技巧分享(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

原文地址:http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522162.html

标签:
css,布局

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“css布局小技巧分享(必看)”

暂无“css布局小技巧分享(必看)”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。