CSS中易忽略的点
一.使用斜杠/分割的关键字
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中易忽略的点的更多相关文章
- CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
- css中那些容易被我们程序猿所忽略的选择器
css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- css中单位px、pt、em和rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- 使用CSS中的meta实现web定时刷新或跳转的方法
这篇文章主要介绍了使用CSS中的meta实现web定时刷新或跳转的方法,比使用JavaScript脚本实现起来更加简单一些,需要的朋友可以参考下 meta源信息功能之页面定时跳转与刷新 几乎所有的网页 ...
随机推荐
- VMware用于Site Recovery Manager 5的vSphere Replication功能一览
http://www.searchstorage.com.cn/showcontent_54838.htm 参考:深度解析SRM 5.0和vSphere Replication http://wenk ...
- 转:Creating a Nested ESXi 5 Environment
http://tsmith.co/2011/creating-a-nested-esxi-5-environment/ http://tsmith.co/2012/vsphere-5-1-lab-ne ...
- C#中添加三个线程同时启动执行某一方法,并依次调用某方法中的循环打印输。
添加三个线程同时启动执行某一方法,并依次调用某方法中的打印输:ABC ABC ABC ABC 实现代码如下: using System; using System.Collections.Generi ...
- Linux内核配置:Makefile目标
在顶层Linux源码目录中输入命令make help,它会显示一长串从源码树中生成的目标列表.最常见的使用make的方式是不指定目标,在这种情况下,它会生成内核ELF文件vmlinux和针对所选架构的 ...
- Docker 命令导图
- 【Thinking in Java】读书笔记
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6480258.html 第三章:操作符 1:基本数据类型的比较用 ==.!=,引用类型的==.!=是针对地址的比 ...
- SCD Type2 in ODI
缓慢变化维(Slowly changing Dimensions)指的是维表中的维度字段值会随着时间或业务调整,而在后续的分析中,历史数据仍然要使用旧的维度值,新的数据会使用当前维度值.在数据仓库建设 ...
- SpringCloud之搭建配置中心
一.搭建config-server 1.引入pom <dependencies> <dependency> <groupId>org.springframework ...
- 2、redis原生的命令操作不同数据类型
一.常用数据类型简介: redis常用五种数据类型:string,hash,list,set,zset(sorted set). 1.String类型 String是最简单的类型,一个key对应一个v ...
- python模块之HTMLParser解析出URL链接
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python模块之HTMLParser解析出URL链接 #http://www.cnblogs.com/mf ...