关于CSS学习的一些总结

最新推荐文章于 2024-05-30 08:41:06 发布

A-Tione

最新推荐文章于 2024-05-30 08:41:06 发布

阅读量110

点赞数 1

分类专栏： CSS 文章标签： css IFC BFC 居中文档流

本文链接：https://blog.csdn.net/weixin_41819731/article/details/100113275

版权

8 篇文章 0 订阅

订阅专栏

接触CSS有很长的一段时间了，我对它的感情每次都有些不同，简单··· 费解··· 神奇··· 好玩···

CSS就是这么一门不正交的语言，你无需一步步从头学起，它就像乐高积木，学会了一点就能用上一点。

尽管CSS不正交，属性也比较多不好记，但没关系，你只要记住用的最多的几种方法足矣应付业务中大部分需求：

除了以上用的最多的几种方法外，我们还需要知道CSS一些基本常识：

文档流是一个很垃圾的翻译，英文原文是 Normal Flow
文档流中内联元素默认从左到右排列，宽度不够则自动换行
文档流中块级元素从上到下排列，每个元素占一行
float:left、position:absolute、position: fixed 可以使元素脱离文档流
块级元素的高度由其文档流中元素高度的总和确定
内联元素中，给 inline 元素设置宽高是没有任何效果的
例如如果 span 的 font-size 为 20px，则该 span 里面的文字大小和 line-height 跟字体有关
例如想要在页面上显示两个空格，应该在代码里写    才行
介意不要写死height和width。因为宽高定死之后，如果文字变多，会出现BUG。用户缩小窗口大小，会出现滚动条，影响体验。width: 100% 再加上 padding 就会撑出父元素之外，很难看。不写死宽高，页面就是自适应的。

什么是堆叠上下文
出发堆叠上下文，可以理解为堆叠作用域。跟 BFC 一样，我们只知道一些属性会触发堆叠上下文，但并不知道堆叠上下文是什么。
例如border在background上面，绝对定位元素在浮动元素上面，内联元素在浮动元素上面，但z-index 为 9999 的绝对定位元素不一定在z-index为0的相对定位元素上面。

官方学名：内联格式化上下文。与他兄弟一样，不好解释
所有的内联元素都有两个高度
- 基于字体度量的 content-area
- virtual-area（也就是 line-height ）
- 这两个高度你都无法看到
line-height: normal 是基于字体度量计算出来的
line-height: n (n=1,2,3…) 可能得出一个比 virtual-area 还要矮的 content-area
vertical-align 不靠谱
line-box 的高度的受其子元素的 line-height 和 vertical-align 的影响
我们无法轻易的用 CSS 来控制字体度量
了解更多

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

关于css图标icon的六种实现方法
img 法：简单暴力，缺点：图片过多时增加服务器的请求，可做CDN优化
background法：把图片放在css背景标签中，background属性能够控制图片居中，平铺，横向或者纵向自适应剪裁，在做复杂的图片处理时用background属性比img标签要好。
css sprites法：国内一般叫雪碧图或者精灵图，思路就是将多张图片拼成一张背景图，然后选择性展示背景图某一部分来达到展示不同icon的目的。优点：减少请求。
font法：用字体做icon，有些设计师将一些常用的icon集合做成了一套字体，通过字体选择将icon打出来，跟搜狗输入法的特殊符号有点像，不过大小不太好调整，得用font-size。
SVG法：目前比较流行的方法，用svg矢量图做成icon图标。比如阿里巴巴矢量图图标库，比如搜索iphone，会有很多设计师设计的svg图片供你使用，选好图片后创建项目，生成js代码，按照教程将网站上生成的icon图标代码拷贝至你的代码中即可。优点：无论放多大都不存在图片锯齿。
css法：用你学到的css知识写出来。

关注