理解css中的层叠上下文和层叠顺序

移动端1像素边框解决方法

移动端1像素边框解决方法

移动端 css 中明明就定义的 1px,但是浏览器打开实际看起来要比设计稿中的 1px 粗?
因为 css 中的 1px 并不等于移动设备的 1px,由于不同的手机有不同的像素密度,如 retain屏 。

css中position属性深入探讨

对于 position 属性可以说是平时开发中使用频率非常高的 CSS 属性,本文主要对 position 做个总结。

position 属性能够很好的体现 HTML 的普通流的特征。设置 position 属性之后主要关注是否脱离文档流改变 display 属性

position: static | relative | absolute | sticky

圣杯布局(双飞翼布局)

圣杯布局

圣杯布局与双飞翼布局针对的都是三列左右栏固定中间栏边框自适应的网页布局

  • 三列布局,两边固定宽度,中间自适应
  • 中间栏要在浏览器优先渲染
    main元素必须是container的第一个元素
  • 允许任意列的高度最高

BFC块级格式化上下文

BFC(Block Formating Context)

块级格式化上下文:一个独立的渲染区域,只有 Block-level box 参与,它内部规定了 Block-level box 如何布局,并且与这个区域外部毫不相干。

BFC是Web页面的可视化CSS渲染的一部分,并且有自身的一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用。

margin、padding的百分比计算

CSS2.1 Box model

The percentage is calculated with respect to the width of the generated box’s containing block. Note that this is true for margin-top and margin-bottom as well.

margin:百分比的计算基于生成框的包含块(父元素)的width(margin-top/bottom也是如此)。
padding同理

sass基础入门

css功能拓展

嵌套(Nested Rules)

sass允许将css样式嵌套进另一套样式中,内层的样式将他的外层的选择器作为父选择器。

父选择器 & (Referencing Parent Selectors: &)

属性嵌套 (Nested Properties)

1
2
3
4
5
6
7
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}

占位符选择器 %foo (Placeholder Selectors: %foo)

flex布局在UC和微信浏览器下的兼容性问题

flex布局

UC和微信浏览器下的兼容性问题

所有webkit内核的浏览器(包括移动端)都支持 flex 布局,只不过一些浏览器只支持旧语法,如:display: -webkit-box
旧语法和标准的 flex 语法有较大区别,需要做好兼容。不过可以来使用 autoprefixer 来自动处理这些兼容性问题,而开发时只需要写标准的语法就好了。

假如没有使用autoprefixer,在UC浏览器和微信内置浏览器中,使用display:flex;时会不起作用,要加上兼容性写法。

微信小程序使用阿里字体图标

前言

为了美化微信小程序,可以使用适当的图标来美化页面,体验更好。
阿里字体图标库提供了丰富的字体,各种场景下项目中所需要字体几乎都能找到。

微信小程序中设置元素的背景图片不能使用本地图片,本地资源无法通过WXSS获取,background-img可以使用网络图片或者base64,或者使用image标签,所以不能直接下载阿里字体图标库的图片设置为背景图片,可以将下载的图片转成字体文件使用。

使用

1. 下载字体

下载字体文件

2. 解压转成base64文件

下载字体文件,解压缩后将.ttf文件转化,transfonter
转换成base64字体文件

3. 拷贝字体文件至小程序

将下载好的文件夹中stylesheet.css样式表中的内容拷贝, 粘贴至小程序的wxss文件中,即可引用该iconfont字体图标.

4. 引用字体文件

小程序只能识别wxss为后缀的css文件,不能识别.css文件。
@import "/assets/iconfont/iconfont.wxss

css控制文本内容溢出截断

css控制文字内容的溢出显示,溢出截断后末尾出现省略 ... ,单行文本与多行文本的控制又有区别。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×