一.使用斜杠/分割的关键字


1.font

H2{
font:12px/100% sans-serif;
}

分割的分别是 字体大小 与 行高 ,其他关键是用空白符分割。

2.background

div{
background:#fff url(../images/xx.jpg) center center/50% 50%
}

分割的是background-position/background-size

3.border-radius

div{
border-radius: 30% / 20%;
}

分隔的是:水平半径/垂直半径

二.布局


注意父元素的定位方式 是相对 还是静态 这决定了其内部绝对定位与浮动元素

三.box-sizing


1.常规的盒模型: box-sizing : content-box(width == content 不包括padiing border)

2.box-sizing : border-box width == content + padiing + border(相当于低级浏览器的怪异模式)

四.图片格式区别


格式 区别

jpg 有损压缩
png 无损压缩,透明图
gif 动态图像
webp 支持有损压缩和无损压缩的图片文件,压缩率极高,且画面丰富(有浏览器兼容性问题)

五.px,em,rem的区别


em,rem 相对大小

em相对父元素font-size

rem相对html根元素的font-size

px 绝对大小

六.不能继承的属性


多数边框类属性:如边框,补白,背景等。

七.css中选择器的权重


依次变小:id>class>标签

八.css颜色的问题


尽量使用16进制的颜色,类似#fff;一位内16进制的颜色是确定的一个色值。

而red这类的颜色值不是确定的,可能会受到用户代理即user agent stylesheet的影响。

九.text-align text-indent vertical-align


1.text-align:作用于块级元素

  如果要使得img居中,使用text-align是不行的,因为img不是块状元素。只需要在img外面套一层div即可。

<div style="text-align:center">
<img src="XXX.jpg"/>
</div>

2.text-indent:作用于块级元素

3.vertical-align:作用于行内元素,基于baseline的位置调整

前端css兼容性与易混淆的点的更多相关文章

  1. css常见的易混淆属性和值的区别(一)

    css的属性很多,每一个属性的值也很多,组合起来便有成千上万种.不同属性之间的相互组合也可以产生不同的样式,css真是一种优美的样式设计语言.下面对工作中常见的易混淆的属性和值进行总结: 1. lin ...

  2. css兼容性的问题

    https://www.douban.com/note/314793848/ 随意的一个博客ie6的兼容 这个博客比较好 http://blog.csdn.net/chuyuqing/article/ ...

  3. 扯一扯前端css的整体架构设计:(2)base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  4. CSS兼容性详解

    前面的话 对于前端工程师来说,不想面对又不得不面对的一个问题就是兼容性.在几年之前,处理兼容性,一般地就是处理IE低版本浏览器的兼容性.而近几年,随着移动端的发展,工程师也需要注意手机兼容性了.本文将 ...

  5. K8S核心概念之SVC(易混淆难理解知识点总结)

    本文将结合实际工作当中遇到的一些问题和情况来解析SVC的作用以及一些比较易混淆和难理解的概念,方便日后工作用到或者遗忘时可以直接在自己曾经学习总结的博客当中直接查找到. 首先应该清楚SVC的作用是什么 ...

  6. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  7. C#中一些易混淆概念总结

    C#中一些易混淆概念 这几天一直在复习C#基础知识,过程中也发现了自己以前理解不清楚和混淆的概念.现在给大家分享出来我的笔记: 一,.NET平台的重要组成部分都是有哪些 1)FCL (所谓的.NET框 ...

  8. css兼容性问题的整理

    css兼容性问题的整理 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1 ...

  9. C#中易混淆的知识点

    C#中易混淆的知识点 一.引言 今天在论坛中看到一位朋友提出这样的一个问题,问题大致(问题的链接为:http://social.msdn.microsoft.com/Forums/zh-CN/52e6 ...

随机推荐

  1. 网站定位之---根据IP获得区域

    记得以前做一个培训机构网站时候需要定位,那时候用的搜狐的api,不是很精准. demo:https://github.com/dunitian/LoTCodeBase/tree/master/NetC ...

  2. Python-Jenkins API使用 —— 在后端代码中操控Jenkins

    最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. Linux C ...

  3. jdb调试scala代码的简单介绍

    在linux调试C/C++的代码需要通过gdb,调试java代码呢?那就需要用到jdb工具了.关于jdb的用法在网上大家都可以找到相应的文章,但是对scala进行调试的就比较少了.其实调试的大致流程都 ...

  4. python基础

    内容概要: 一.python2 or python3 目前大多使用python2.7,随着时间的推移,python3将会成为python爱好者的主流. python2和3区别: 1.PRINT IS ...

  5. 看图理解JWT如何用于单点登录

    单点登录是我比较喜欢的一个技术解决方案,一方面他能够提高产品使用的便利性,另一方面他分离了各个应用都需要的登录服务,对性能以及工作量都有好处.自从上次研究过JWT如何应用于会话管理,加之以前的项目中也 ...

  6. BAT“搅局”B2B市场,CIO们准备好了吗?

    "CIO必须灵活构建其所在企业的IT系统,深入业务,以应对日新月异的数字化业务环境."   BAT军团"搅局"B2B市场,CIO们准备好了吗? 庞大的企业级市场 ...

  7. 个人也能申请微信小程序获得APPID和手机测试效果

    微信小程序昨晚火爆公测,我也第一时间注册了小程序账号开启公测之旅. 注册过程可以看文档:https://my.oschina.net/imhoodoo/blog/780901 进入后台之后我们其实主要 ...

  8. 技术笔记:XMPP之openfire+spark+smack

    在即时通信这个领域目前只找到一个XMPP协议,在其协议基础上还是有许多成熟的产品,而且是开源的.所以还是想在这个领域多多了解一下. XMPP协议:具体的概念我就不写了,毕竟这东西网上到处是.简单的说就 ...

  9. 借助GitHub托管你的项目代码

    PS:话说自己注册了GitHub都很久了,却没有怎么去弄,现在系统学习一下,也把自己的学习经历总结下来share给大家,希望大家都能把GitHub用起来,把你的项目代码happy地托管起来! 一.基本 ...

  10. Building the Testing Pipeline

    This essay is a part of my knowledge sharing session slides which are shared for development and qua ...