css 实战技巧
css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点。
1、css 问题解决思路
在遇到css问题时,我一般从以下思路来思考
- 从元素本身的属性出发,组合各种可能;
- 如果第一步没有成功,那么在元素之外(或者之内)套一层元素,再次尝试;
- 一般问题都能在第二步解决,如果还是没有,那就要求助场外观众了(
before
和after
); - 还不行的话,则看看有没有不知道的某个新特性可以解决问题,最后不行就咨询相关同事或者查阅相关css 规范吧;
2、css 解析
css 从右边往左开始解析,过多的嵌套会影响性能,最好不要超过三层。css 尽可能的复用代码块,减少重复代码 ,如scss 变量,@mixin 等
3、命名使用一些规范,如BEM
具体BEM 这里不介绍,可以自行查阅官网: http://getbem.com/introduction/,最开始的时候看到BEM 规范时比较排斥的,因为感觉命名有点奇怪,后面在尝试使用之后确实要清晰很多,现在感觉优点主要有以下两点
- 可以让 CSS 的优先级保持相对扁平。
- 你能立即知道哪些东西是一个子元素。
4、单行文字居中,多行居左
- 利用行内元素宽度等于内容宽度,外层盒子在设置居中
- 利用width: fit-content 可以实现元素收缩效果的同时,保持原本的block水平状态,还有其他几个属性,可以感兴趣可以在网络上查看下
- 利用flex 布局
5、文本两端对齐
使用 text-align:justify; 要多行才生效,如果是当行记得用伪元素
6、伪类 :nth-child(an+b)
这个伪类首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合。
其中n是一个变量,可以是一个数字,一个关键字,或者一个公式。n从0开始取值(但是匹配的元素的集合始终是从1开始),每次n+1后代入计算,最终得出一个位置的数组,比如:p:nth-child(2n+1)
n=0时 2n+1=1 // 匹配这个兄弟元素集合中的,第1个元素以此类推计算
n=1时 2n+1=3
n=2时 2n+1=5
所以就等价于p:nth-child(1)和p:nth-child(3)和p:nth-child(5)...取得是一个集合,也就是位置是1、3、5...
其他的也可以这样推导出来
备注:匹配的元素集合排序从1开始,但是当表达式中有n 时,这个n 是从0 开始的(n=0时,2n+0=0,第0个元素不存在,因为是从1开始排序)
-------------------------------------------待更新--------------------------------
css 实战技巧的更多相关文章
- 2天驾驭DIV+CSS (技巧篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包
随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...
- webpack快速入门——实战技巧:开发和生产并行设置
package.json中,devDependencies和dependencies是不同的 devDependencies:开发依赖 dependencies:生产依赖(线上) 1.安装生产环境的依 ...
- webpack快速入门——实战技巧:webpack模块化配置
首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...
- webpack快速入门——实战技巧:优雅打包第三方类库
下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...
- webpack快速入门——实战技巧:webpack优化黑技能
1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- CSS 代码技巧与维护 ★ Mozilla Hacks – the Web developer blog
原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-c ...
随机推荐
- WWT在中国:一个改变了人类探索宇宙方式的少年梦想
想象一下,在宇宙中超光速飞行,访问行星.星云.恒星和小行星将是多么美妙的体验.现在,中国的孩子们已经可以坐在屋子里,仰望穹顶,去探索星球之间无穷的奥秘. 在微软研究院.微软亚洲研究院及中国科学院国家天 ...
- JSON — Java与JSON数据互转
转换时Bean所要求的: 被转换的Bean必需是public的. Bean被转换的属性一定要有对应的get方法,且一定要是public的. Bean中不能用引用自身的this的属性,否则运行时出现et ...
- 蓝桥杯-PREV45-图形排版
这是2017年蓝桥杯C组C++的压轴题,拿到之后没什么想法.但是蓝桥杯有部分分.所以直接敲了个大暴力提交上去过了一半的数据.后来想到了DP,但是没能实现出来,感觉还是有问题的.后来看了解题视频发现是预 ...
- 深入JVM内核--JVM简介
JVM概念 jvm是指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完成计算机系统. 目前主要有vmMare.visual Box和JVM三款虚拟机. JVM使用软件模拟java字节 ...
- [LC] 328. Odd Even Linked List
Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...
- [LC] 232. Implement Queue using Stacks
Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...
- 吴裕雄--天生自然 python开发学习笔记:一劳永逸解决绘图出现中文乱码问题方法
import numpy as np import matplotlib.pyplot as plt x = np.random.randint(0,20,10) y = np.random.rand ...
- Java IO: ByteArray和Filter
作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本小节会简要概括Java IO中字节数组与过滤器的输入输出流,主要涉及以下4个类型的流:ByteArr ...
- 介绍vue-cli脚手架config目录下index.js配置文件
1.config/index.js var path = require('path') module.exports = { build: { // production 环境 env: requi ...
- hibernate需要注意的点
1.需要用Hibernate做实体的类(@Entity)需要在配置文件中配置对应的包(例如:spring/appContext-hibernate.xml). 2.hibernateTemplate中 ...