css合理布局小窍门共享(必看)

日期：2020-12-12 类型：科技新闻 

关键词：微信小程序页面设计，python小程序，小程序首页模板，如何建立微信小程序，怎么做微信小程序

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合理布局小窍门共享(必看)便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

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

上一篇：纯CSS完成电脑鼠标悬停显示信息照片实际效果的 返回下一篇：CSS操纵文字的长度 超出1行显示信息省略号的完成