关于CSS的只言片语
这段时间做了一个简单的页面,借机又重温了一下CSS的相关知识,现总结一下:
- 工欲善其事必先利其器,让我们先做一点准备工作 1.在页面添加:
<meta http-equiv="x-ua-compatible" content="ie=edge">
指定IE利用标准模式渲染页面,而不是兼容模式
<meta name="viewport" content="width=device-width,initial-scale=1">
viewport的属性
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height:和 width 相对应,指定高度
initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例
maximum-scale:允许用户缩放到的最大比例
minimum-scale:允许用户缩放到的最小比例
user-scalable:用户是否可以手动缩放,默认为yes
2.引入normalize.css
多数时候我们都用reset.css来去除或规范一些浏览器的默认样式,normallize.css 较之 reset.css 提供了更好的样式跨浏览器一致性体验。
来,让我们谈一谈 Normalize.css 微吐槽:实际项目中normalize没有去除ul的padding等类似的值,谁能告诉我为什么?
3.利用BrowserSync来调整编辑页面
这个工具真的很强大,支持sass和less的实时编辑预览,再也不用担心save & F5了。(下载页面)
4.多用Can I Use(http://caniuse.com/)
不仅列出各浏览器的支持程度,还能提供一些issues文档,多查查你肯定会收获更多。
- 项目实践中的一点经验总结
1.固定背景
视差效果是越来越流行了,其实我觉得设置一个固定背景就能实现一个最简单的视差效果,提升你的网站bigger。
background-attachment: fixed 使背景图不随页面的滚动而滚动
background-size: cover 使背景图始终填满整个屏幕
background-position: center; 使背景图居中
更多background属性参考
2.关于Collapsing Margins
常见的相邻两个块级元素垂直margin合并、子元素margin传递到父级margin其实都是Collapsing Margin 惹的祸。详细介绍可以参考collapsing-margins.其中针对margin传递问题可用设置border或padding处理。
3.关于overflow:hidden的两个实现原理
当文字和图片同级且同时设置浮动时:
没有设置overflow:hidden时,文字内容的容器与外部容器左边界是重合的, 修改后,这个容器内的内容(context)属性变为了block formating contexts(参考block-formatting 以及 bfc-next-to-float),直接效果就是图片和文字各自的容器在同时浮动时不再有重合的部分。
更多内容可参考:CSS 101: Block Formatting Contexts
How does the CSS Block Formatting Context work?
另外常见到用overflow:hidden来清除浮动,其原理是:容器在计算自身高度的时候必须要有足够的高度包围所有的子元素。但 float 的元素 (还有绝对定位的元素)并不包含在这个计算里面,设置overflow就可以改变容器计算高度的方式让容器 float 元素包含在高度计算内。(参考: bfc-next-to-float)
4.简化布局的border-box
盒模型(content-box)在计算宽度(width)时是不包括border\padding的,所以如果用width:25%设置一排四个均匀分布的span时,很可能得不到想要的效果。这时将其转化为border- box(width=content+padding+border)模型就能很好的完成需求.参考box-sizing
5.绝对定位(absolute)
常用的绝对定位的场景是:针对正常布局的主要页面元素(设置参考 position:relative)将其辅助的页面组件设置为position:absolute,列入下拉菜单,弹出的菜单选项就是辅助组件。
这里需要注意的是,辅助组件一定要设置宽度(百分比或指定宽度皆可),否则器宽度会变得不确定。
6.一些关于语义化实现的细节
标题文字下装饰性的下划线、指示用的小三角符号以及清除浮动都可以借助伪元素(:after和:before)来实现,更好遵循样式和内容分离的原则。
此外在页面引入nav/section/header/article等标签能更好遵守语义化(Semantic)规范。语义化Semantic参考 另外 normalize.css帮我们处理好了IE8-浏览器对新标签元素的支持问题。
7.怎能忘记响应式
响应式的页面不仅仅是包括了可以解决因屏幕大小而产生布局问题的Media Query,还要考虑到因带宽小和高延迟带来的资源加载、用户体验等问题。可参考Resposive Disgn
关于CSS的只言片语的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- css sprites-简单实例让你快速掌握css sprites精髓
这段时间有几次接触到了css sprites的概念,一个就是在用css做滑动门的时候,另外一个就是在用YSlow分析网站性能的时候,于是对css sprites这个概念产生了浓厚的兴趣.在网上查找了很 ...
- 模仿某旅行网站 纯css实现背景放大效果
基本功能是鼠标移动到图片上,对应宽度变宽.其中布局和基本样式直接copy官网,功能部分是自己瞎鼓捣实现的. 直接上代码: HTML部分 <div class="fold_wrap&qu ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- Ehcache(08)——可阻塞的Cache——BlockingCache
http://haohaoxuexi.iteye.com/blog/2119737 可阻塞的Cache—BlockingCache 在上一节我们提到了显示使用Ehcache锁的问题,其实我们还可以隐式 ...
- 15 Examples To Master Linux Command Line History
When you are using Linux command line frequently, using the history effectively can be a major produ ...
- Windows Server Backup备份Exchange2010
在Windows Server 2008 R2 SP1上Exchange2010 DAG备份测试成功: 1.分别在DAG成员服务器上安装WSB,不可以安装其命令行工具,因为其需要早期的PowerShe ...
- C# 反射类型转换
/// <summary> /// 泛型类型转换 /// </summary> /// <typeparam name="T">要转换的基础类型 ...
- 【M9】利用destructors避免泄漏资源
1.在堆上获取的动态资源,用户忘记delete,或者由于异常导致没有没执行到delete,都会造成资源泄漏. 2.我们知道,栈上的对象,离开作用域,必定要执行析构方法.即使抛出异常,会堆栈回滚,保证已 ...
- boost::token_compress_on
对于场景:string s = "123456",用"3","4"切分,默认情况下(boost::token_compress_off),切 ...
- UVALive 4225 Prime Bases 贪心
Prime Bases 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&a ...
- unity3d脚本编程
一 创建和使用脚本 1 概述 GameObject的行为都是被附加到其上面的组件控制,脚本本质上也是一个组件. 在unity中创建一个脚本,默认内容例如以下: using UnityEngine; u ...
- 关于THIS_FILE
VC++中本身就有内存泄漏检查的机制,可以在向导生成的支持MFC的工程中看到如下代码: #ifdef _DEBUG #define new DEBUG_NEW #undef THIS_FILE ...
- memcached缓存批量更新解决方案探讨
众所周知,Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载. 俺所在的公司经营的主要是基于web和wap两个平台的手机游戏门户网站,分布式缓存解决方法正好有 ...