公告:程序员要备个后手,做点副业,5G视商推荐您,详情添加微信XY18221888953咨询

CSS篇2——有关布局的那些事

前言

本文理一下CSS布局的一些事。CSS布局要注意哪些点。其实CSS布局是有技巧的,不同人布局页面,最后出来的效果可能差不多,但是一些布局细节可能差很多。本文不讲stiky footer 布局,圣杯双飞翼等等的布局方式,就说一下一些常用的布局技巧。

一、少用定死宽度

布局的时候,少用定死的宽度,假如真的用宽度,外层用就可以,尽量让宽度和影响宽度的padding\border(有时候也包含margin),分开来布局。

1、避免用定死宽度布局

布局的时候,不要用定死宽度和float布局。可以采用左侧固定,右侧自适应,或者flex布局方式进行。

2、宽度分离 确实要用宽度的时候,在外层用,避免宽度和padding\border一起使用,推荐如下:

CSS篇1——有关文本处理font的那些事

前言

之前博客文章不成体系,主要是一些突然想到的零散知识点。本文及后面几篇文章,将推出一系列文章。帮忙梳理知识点。提高技能。本文着重讲解css有关文本处理font的那些事。之所以先从font说起,是因为UED对字体要求比较高,很多朋友还原UED设计稿之后,出来的效果,UED并不满意。其中,除了屏幕,自适应等原因之外,字体文本处理也是一个重要因素。

1、ex 实现文字和图标垂直居中

ex单位IE6时代就支持了,主要是相对字母x的高度,可以实现文字和图标对齐,不受文字字体和字号的影响。

IntersectionObserver简单介绍及使用

前言

IntersectionObserver 之前就有所了解,但是一直没有用,当时觉得浏览器兼容性不好,直接用onscroll监听也能实现相关功能,但是随着浏览器支持性越来越好,这个属性到迄今为止,可以用在大部分的正式项目中了,对于提升性能和用户体验,起到一定作用。

浏览器兼容性

我们先看看can i use 里面兼容性的这张图吧

device-aspect-ratio与aspect-ratio介绍

前言

本文很简单,就是介绍2个属性,增加点博客人气,好久没有更新博客了。中国疫情基本控制住了,世界疫情又来了,中国加油,世界加油! 本文2个属性,一个是device-aspect-ratio 一个是aspect-ratio,都是宽高比率。

device-aspect-ratio

device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

device-aspect-ratio还有两位两个兄弟属性,max-device-aspect-ratio和min-device-aspect-ratio,他们的兼容性在移动端,是可以不用去考虑的,绝大部分的移动端设备,都是支持的,在我看来,是可以直接放心使用的。