分类 CSS 下的文章

css3的flex布局

最近在撸小程序，只在微信里面运行，不用考虑其他浏览器的兼容性，flex布局超级好使，在这里总结一波。

只要在支持flex布局的浏览器下声明display:flex即可，在这个容器下的子元素就会自动成为容器的成员。容器有6个属性，分别是

flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content

flex-direction属性

flex-direction属性控制子元素的排列方向

flex-direction: row | row-reverse | column | column-reverse;

四个属性值表现如下

  • row（默认值）：水平方向排列，起点在左端。
  • row-reverse：水平方向排列，起点在右端。
  • column：垂直方向排列，起点在上沿。
  • column-reverse：垂直方向排列，起点在下沿。

- 阅读剩余部分 -

移动端滚动穿透问题新解

今天遇到一个问题，就是在一个弹出层里面有一个可滚动的列表，当列表弹出层列表滚动的时候，原来的页面也跟着滚动了，体验相当不好。

在PC还好，可以给body一个overflow:hidden完事，在移动端却不管用啊

查了一下，这个叫移动端滚动穿透，一个大神给出了解决方案：点这里，感觉还是太麻烦了

然后自己琢磨了一番，想到了一个简单的处理方法。

既然滚动是因为内容超出了父级容器，那么就好办了，直接让内容不超出就好了。

直接让内容脱离文档流，使用position:fixed，当弹出层弹出的时候直接在body上加绝对定位position:fixed，当弹出层消失的时候，把原来页面的定位去掉。嗯，就这么简单。

看代码

- 阅读剩余部分 -

viewport的一些理解

嗯，在适配移动端页面的时候都会用的的标签

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

viewport的几个属性

  • width：控制 viewport的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度（单位为缩放为100% 时的 CSS 的像素）
  • height：与 width 相对应，指定viewport 高度
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
  • maximum-scale：允许用户缩放到的最大比例
  • minimum-scale：允许用户缩放到的最小比例
  • user-scalable：是否允许用户手动缩放

viewport指的是窗口视窗，一般有三种：layout viewport（布局视窗），visual viewport（视觉视窗）和ideal viewport（理想视窗）

- 阅读剩余部分 -

关于CSS盒模型

盒模型分为两种，分别是IE盒模型和标准盒模型

一个盒子的组成部分包括width，height，border，padding，margin：

  • width：盒子内容的宽度
  • height：盒子内容的高度
  • border：盒子的边框
  • padding：盒子内边距
  • margin：盒子外边距

标准盒模型

一个标准的W3C盒模型的宽度width表示的是内容的宽度，高度height表示的是内容的高度，具体如下

- 阅读剩余部分 -