分类 CSS 下的文章

css3的flex布局

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

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

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-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-widthdevice-width为设备的宽度(单位为缩放为100% 时的 CSS 的像素)

  • height:与 width 相对应,指定viewport 高度

  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例

  • maximum-scale:允许用户缩放到的最大比例

  • minimum-scale:允许用户缩放到的最小比例

  • user-scalable:是否允许用户手动缩放

viewport指的是窗口视窗,一般有三种:layout viewport(布局视窗),visual viewport(视觉视窗)和ideal viewport(理想视窗)

- 阅读剩余部分 -

关于CSS盒模型

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

一个盒子的组成部分包括widthheightborderpaddingmargin

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

标准盒模型

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

- 阅读剩余部分 -