(1)清除浏览器默认样式
(2)全局样式定义
(1)项目开发初期就定义好
(2)
在引入的时候一定要放在第一位
- reset.css
(3)不同的产品
不一样
- reset.css
- table {
- border-collapse: collapse; // 合并边框
- border-spacing: 0; //边框间距。当 `border-collapse` 值为 `seperate` 时生效
- }
- html,
- body,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- div,
- dl,
- dt,
- dd,
- ul,
- ol,
- li,
- p,
- blockquote,
- pre,
- hr,
- figure,
- table,
- caption,
- th,
- td,
- form,
- fieldset,
- legend,
- input,
- button,
- textarea,
- menu {
- margin: 0;
- padding: 0;
- }
- header,
- footer,
- section,
- article,
- aside,
- nav,
- hgroup,
- address,
- figure,
- figcaption,
- menu,
- details {
- display: block;
- }
- table {
- border - collapse: collapse;
- border - spacing: 0;
- }
- caption,
- th {
- text - align: left;
- font - weight: normal;
- }
- html,
- body,
- fieldset,
- img,
- iframe,
- abbr {
- border: 0;
- }
- i,
- cite,
- em,
- var, address, dfn {
- font - style: normal;
- } [hidefocus],
- summary {
- outline: 0;
- }
- li {
- list - style: none;
- }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- small {
- font - size: 100 % ;
- }
- sup,
- sub {
- font - size: 83 % ;
- }
- pre,
- code,
- kbd,
- samp {
- font - family: inherit;
- }
- q: before,
- q: after {
- content: none;
- }
- textarea {
- overflow: auto;
- resize: none;
- }
- label,
- summary {
- cursor: default;
- }
- a,
- button {
- cursor: pointer;
- }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- em,
- strong,
- b {
- font - weight: normal;
- }
- del,
- ins,
- u,
- s,
- a,
- a: hover {
- text - decoration: none;
- }
- body,
- textarea,
- input,
- button,
- select,
- keygen,
- legend {
- font: 12px / 1.14 arial,
- simsun;
- color: #333;
- outline: 0;
- }
- body {
- background: #fff;
- }
- a,
- a: hover {
- color: #333;
- }
父元素和子元素宽度未知。
- <div class="parent">
- <div class="child">
- child
- </div>
- </div>
要达到的效果是这样:
主要代码:
- .parent {
- display: flex;
- justify-content: center;
- }
没啥好解释,直接看 神奇的 flex 实现栗子 吧 (~ ̄▽ ̄)~
主要代码:
- .parent {
- position: relative;
- }.child {
- position: absolute;
- left: 50 % ;
- transform: translateX( - 50 % );
- }
原理是:
在子元素的左侧添加了一段距离,这段距离是父元素宽度的 50%,接着因为 translateX(50%) 设置百分比时的参照物是自身宽度,所以向左偏移了自身宽度的 50%,就居中啦 ╮(‵▽′)╭
- left: 50%;
动动小手看看栗子
主要代码:
- .parent {
- text - align: center;
- }.child {
- display: inline - block;
- }
这种方法有一个问题是:
设置了
- parent
后, 因为这个属性可继承,会导致
- text-align: center;
中的文字也会居中,而这个效果是我们未必需要的,所以我们很多时候需要在
- child
中加一句
- .child
- text-align: left;
自己看看栗子
主要代码:
- .child {
- display: table;
- margin: 0 auto;
- }
table 的特点:宽度为内容宽度 的 块状元素 ,所以也可以用
居中。
- margin: 0 auto;
优点:只设置子元素样式就可以了,不需关心父元素。
看看栗子
不喜欢这第四个方案,table 是辣么有语义的一个样式,为什么随便把人家变成 table ( ̄. ̄)
父元素和子元素高度未知。
意欲达到的效果:
- .parent {
- display: flex;
- align-items: center;
- }
同 水平居中 的方法一
栗子
- .parent {
- position: relative;
- }.child {
- position: absolute;
- top: 50 % ;
- transform: translateY( - 50 % );
- }
同 水平居中 的方法二
栗子
- .parent {
- display: table-cell;
- vertical-align: middle;
- }
vertical-align 可以作用在
元素,
- inline
元素,以及
- inline-table
元素上。
- table-cell
栗子
父元素和子元素宽高都未知。
- .parent {
- display: flex;
- justify-content: center;
- align-items: center;
- }
综合了 水平居中 和 垂直居中 的方法一
栗子
- .parent {
- position: relative;
- }.child {
- position: absolute;
- top: 50 % ;
- left: 50 % ;
- transform: translate( - 50 % , -50 % );
- }
综合了 水平居中 和 垂直居中 的方法二
栗子
- .parent {
- display: table-cell;
- vertical-align: middle;
- text-align: center;
- }
- .child {
- display: inline-block;
- }
栗子
- <div class="parent">
- <div class="left">
- <p>
- left
- </p>
- </div>
- <div class="right">
- <p>
- right
- </p>
- <p>
- right
- </p>
- </div>
- </div>
- .left {
- float: left;
- width: 100px;
- }.right {
- margin - left: 120px;
- } //有20px是间距
因为方法 1 在低版本浏览器有兼容性问题,所以改进一下。
- // 首先在right外面加了right-fix这个div
- <div class="parent">
- <div class="left"><p>left</p></div>
- <div class="right-fix">
- <div class="right">
- <p>right</p>
- <p>right</p>
- </div>
- </div>
- </div>
CSS 改动:
STEP1:
- // .left 和 .right 设置暂时不变
- .right - fix {
- float: right;
- width: 100 % ;
- }
效果为:(注意:我们把 right-fix 设置为白色背景,只是为了方便观察。)
STEP2:
可以看到,由于 right-fix 宽度为 100%,所以跑到了 left 下面一行。想要回到同一行,需要给 right-fix 设置一个负的 margin-left 值 - 100px。
- .right - fix {
- margin - left: -100px;
- }
关于为什么设置了
就可以使得回到同一行呢?是因为设置了负的 margin-left 值之后,浏览器计算 right-fix 元素的宽度后,会加上 - 100px,也就是减掉 100px,这也就是 left 的宽度,所以 left 与 right-fix 加起来没有超过整行的宽度。
- margin-left: 100px;
想要进一步了解负的 margin 值可以参考这篇文章: CSS 布局奇淫巧计之 - 强大的负边距
效果如图:
STEP3:
不幸的是,因为 html 文档中 right-fix 处于 left 后面,所以 left 被 right-fix 遮住了,实际应用中 right-fix 虽然没有背景色,但是我们还是不会希望它覆盖在 left 上面。
所以,我们需要提高 left 的层级。如何提高呢?由于设置了 position: relative; 的元素层级要高于普通元素,所以加上这样一条:
- .left {
- position: relative;
- }
具体可以参考张鑫旭写的一篇讲解
很详细的文章: CSS 相对 / 绝对 (relative/absolute) 定位系列(四)
- position:relative;
最终达到我们要的效果:
到 jsfiddle 中自己试试去
- .left{
- width: 100px;
- margin-right: 20px;
- }
- .right {
- overflow: hidden;
- }
原理是:设置了 overflow:hidden; 之后,会触发 BFC 模式,而 BFC 模式内部的布局不受外部影响,所以不会受浮动影响,不会围绕 left 而是跑到 left 右边去了。
- .parent{
- display: table;
- width: 100%;
- table-layout: fixed; //加速table渲染,实现了布局优先
- }
- .left, .right {
- display: table-cell;
- }
- .left {
- width: 100px;
- padding-right: 20px;//因为table-cell不能设margin,所以设置padding来加间距
- }
根据 table 的特性, left 设置了 100px 后,right 就占了剩余宽度。
- .parent {
- display: flex;
- }.left {
- width: 100px;
- margin - right: 20px;
- }.right {
- flex: 1;
- }
So easy.
再加一列定宽就行啦 o(≧v≦)o
不定宽意思是:
1. 可以随意更改宽度:比如改为 100px,200px,同时不需要更改其他样式也可以做到两列自适应布局。
2. 或不设置宽度而是由里面子元素的宽度决定。
以下方法对应 [一列定宽 + 一列自适应] 中的方法
方法 1: float + margin ?
不好意思,做不到。
方法 2: float + margin +(fix) ?
不好意思,也做不到。
方法 3: float + overflow ?
阔以! right 的样式没有依赖于 width 的宽度。 代码量也少,很棒棒哦!
方法 4:table
方法 5:flex
强大的 flex 当然可以~(傲娇脸 )
没错,跟你想的一样,加一列不定宽的就行了,样式都一样 ㄟ (▔, ▔) ㄏ
C + G = 4*(W + G)
以下例子假设间距 G = 20px
结构:
- <div class="parent">
- <div class="column">
- <p>
- 1
- </p>
- </div>
- <div class="column">
- <p>
- 2
- </p>
- </div>
- <div class="column">
- <p>
- 3
- </p>
- </div>
- <div class="column">
- <p>
- 4
- </p>
- </div>
- </div>
方法 1:float
- .parent {
- margin - left: -20px;
- } //就是上面公式中等号左边的G
- .column {
- float: left;
- width: 25 % ;
- padding - left: 20px; //这里要注意,因为我们用padding来表示间距,所以如果你是给p元素设置了background-color,会发现没有间距,p标签的width才是上图中的W
- box - sizing: border - box;
- }
方法 2:table
- <div class="parent-fix">
- <div class="parent">
- <div class="column">
- <p>
- 1
- </p>
- </div>
- <div class="column">
- <p>
- 2
- </p>
- </div>
- <div class="column">
- <p>
- 3
- </p>
- </div>
- <div class="column">
- <p>
- 4
- </p>
- </div>
- </div>
- </div>
- .parent-fix{
- margin-left: -20px;
- }
- .parent {
- display: table;
- width: 100%;
- }
- .column {
- display: table-cell;
- padding-left: 20px;//因为单元格不能设置margin,所以间距只能用padding来做。
- }
因为 table 的 width 默认是随内容宽度变化的,所以需要手动设置
。又因为明确设置了宽度的元素就没办法用将 margin 设为负值的方式增加 20px 宽度了,所以需要在外面加一个父元素
- width: 100%;
。
- parent-fix
这里大家可以自己试试比较一下给
设置 width 为 100% 与 不设置 width 时 parent-fix 实际宽度(用调试工具里的查看元素看)的区别来理解。
- parent-fix
呐,jsfiddle 示例在这
方法 3:flex
- .parent {
- display: flex;
- }.column {
- flex: 1;
- }.column + .column {
- margin - left: 20px;
- } //好用的兄弟选择器 (。・`ω´・)
右侧变高,左侧高度随之变化:
↓↓
方法 1:table
table 的列之间有天然等高的特性。
就是上面 1. 一列定宽 + 一列自适应 中的 方法 4:table 。
方法 2:flex
flex 也是天然的等高 <( ̄︶ ̄)> 因为它默认的 align-items 为 stretch,即在交叉轴上默认拉伸占满整个容器。
仍旧是上面 1. 一列定宽 + 一列自适应 中的 方法 5:flex 。
简单到不好意思给栗子
方法 3:float
仍旧是参照上面 1. 一列定宽 + 一列自适应 中的 方法 3:float + overflow ,float 并没有天然等高,所以要在这个基础上做改动。
- .left{
- width: 100px;
- margin-right: 20px;
- }
- .right {
- overflow: hidden;
- }
- //增加部分
- .left, .right{
- padding-bottom: 9999px;//使得有背景色的部分变的很高
- margin-bottom: -9999px;//用负的margin抵消掉很高的padding,让高度变回left和right中较高的那部分的内容高度,以便parent用overflow: hidden;去隐藏掉超出部分
- }
- .parent {
- overflow: hidden;//隐藏掉超出边界的部分
- }
其实 left 的实际高度并没有变,是一种伪等高,只是背景变高。
栗子
这是练习题,置几试试吧。
- <div class="parent">
- <div class="outer">
- <div class="column>1</div>
- <div class=" column>
- 2
- </div>
- </div>
- <div class="outer">
- <div class="column>3</div>
- <div class=" column>
- 4
- </div>
- </div>
- </div>
方法 1:flex
- .parent {
- display: flex;
- flex-wrap: wrap;
- align-content: space-between;
- }
- .outer {
- flex-basis: 100%;
- display: flex;
- justify-content: space-between;
- }
一颗仅供参考的栗子
方法 2:float
我的栗子
方法 3:table
一个栗子不一定对
只有主内容区 right 随内容滚动。
方法 1.position
- <div class="parent">
- <div class="top">
- top
- </div>
- <div class="left">
- left
- </div>
- <div class="right">
- <div class="help-right">
- right
- </div>
- </div>
- <div class="bottom">
- bottom
- </div>
- </div>
- html,
- body,
- .parent {
- height: 100 % ;
- overflow: hidden;
- } //为了让整个页面不滚动
- .top {
- position: absolute;
- top: 0;
- left: 0;
- right: 0; //注意这个很棒的设置!可以自动占满整行 ヾ(o◕∀◕)ノ
- height: 100px;
- }.left {
- position: absolute;
- left: 0;
- top: 100px;
- bottom: 50px;
- width: 200px;
- }.right {
- position: absolute;
- left: 200px;
- right: 0;
- top: 100px;
- bottom: 50px; //这也是上下占满除了top和bottom之外的所有高度
- overflow: auto; //让主内容区可以滚动
- }.help - right { //假装有很多内容
- width: 1000px;
- height: 1000px;
- }.bottom {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- height: 50px;
- }
动手写写才记得住
方法 2.flex
- <div class="parent">
- <div class="top">
- top
- </div>
- <div class="middle">
- <div class="left">
- left
- </div>
- <div class="right">
- <div class="help-right">
- right
- </div>
- </div>
- </div>
- <div class="bottom">
- bottom
- </div>
- </div>
- html,
- body,
- .parent {
- height: 100 % ;
- overflow: hidden;
- }.parent {
- display: flex;
- flex - direction: column;
- }.top {
- height: 100px;
- }.middle {
- flex: 1;
- display: flex;
- }.left {
- width: 200px;
- }.right {
- flex: 1;
- overflow: auto;
- }.help - right {
- width: 1000px;
- height: 1000px;
- }.bottom {
- height: 50px;
- }
栗子
方法 1.position , 方法 2.flex :
把原来的用 px 写的定宽改成百分比就可以了。是相对于 body 的高度和宽度来变化的。感觉 top 和 bottom 高度设置百分比不是很实用。
方法 1.position
定宽的高度和宽度影响旁边栏的布局,所以实现不了 - 。-
方法 2.flex
阔以实现,而且相当简单 ╮(╯▽╰)╭ 把刚刚设置了高度和宽度的地方去掉就可以了 ∑(っ °Д °;) っ
惊人的栗子
方法 3.Grid
阔以实现,但是因为还是 W3C 的草案,所以会经常变化,不稳定,而且浏览器支持也不好。
只写一个网站,在多个终端显示,在小屏幕上会隐藏部分元素。
在 PC 端浏览器中可以正常访问的网站,到了手机上之后,内容就会变得特别小。
原因:所有的移动设备都有一个 viewport(视窗),这个视窗不是手机屏幕大小,而是一个虚拟的窗口,比如 iPhone4 的 viewport 宽度为 980px(如下图所示)。显示的时候再按照比例将这 980px 的内容压缩显示到实际的屏幕宽度中。
- <meta name="viewport" content="
- width=device-width //让宽度等于设备宽度,因为不同的移动设备宽度不同 iphone4为320px
- ,initial-scale=1.0 //初始缩放1.0, 即不缩放,网站就不会被缩小了
- ,user-scalable=no //防止用户手动缩放
- ">
- @media screen and (max-width: 320px) {
- //最大宽度为320px,即视窗宽度小于等于320px
- div{..}
- .class-name{...}
- }
- @media screen and (min-width: 320px) and (max-width: 769px){
- //最小宽度为320px,最大宽度为769px,即视窗宽度大于320px,小于769px
- }
减少卡顿
利于 SEO
便于代码维护
(1)多个 css 文件合并成一个
(2)少量 css 样式内联
(3)避免用 import 的方式引入 css 文件,因为每个 import 语句都会产生一个 css 请求,并且是同步的请求。
(1)减少图片大小
选择合适的图片格式,小尺寸、半透明的用 png,大尺寸、色彩绚丽用 jpg(因为 jpg 会对图片进行压缩)
压缩图片
(2)css 值缩写
margin,padding,border,font,border-radius 等属性
(3)省略值为 0 的单位
- margin: 0 10px;
- line-height: .5;
- background-position: 50% 0;
(4)颜色值最短表示
- red
- rgb(0,0,0)
- rgba(0,0,0,0)
- #000000
- #000
(5)css 选择器合并
- .left,
- .right {...
- }
(6)文件压缩
用工具对文件进行自动压缩,去掉空格。
css 通常放在 head 中,而 js 通常放在 body 底部,因为 js 会阻碍其他资源加载。
- body.menu ul li a {...
- } //太长了
- .menu a {...
- } //更好
比如:
- expression
- filter
- border-radius
- box-shadow
- gradients
(1)规范:缩进,变量名等
(2)语义化:除了标签,css、id 名最好也尽量有意义
(3)尽量避免 Hack,一定要用也要统一的标识,比如 IE7 用 *
(4)模块化:相关联的结构做成一个个模块,复用性更强
(5)添加注释
1. 注释的文字两侧需加空格,防止因编码问题导致注释失效
2. 为避免命名污染,可以给 class 加前缀,比如:
- g- 布局命名
- m- 模块命名
3. 语义化命名
- //结构化命名
- top {...
- }
- //改用语义化命名
- nav {...
- }
4. 属性的书写顺序
比如,翻页器(或叫分页器 paging)、轮播图。
- <div class="m-nav">
- <ul>
- <li class="z-crt">
- <a>
- 链接
- </a>
- </li>
- <li>
- <a>
- 链接
- </a>
- </li>
- </ul>
- </div>
- //根节点
- .m - nav {...
- }
- //子节点
- .m - nav ul {...
- }.m - nav li {...
- }.m - nav a {...
- }.m - nav.z - crt a {...
- }
- /* 交互状态变化 */
若有一个模块只是比上述模块多了一个按钮,其余部分完全相同,怎么办?
为根节点加一个 class 就好了,这里我们加一个
。
- m-nav-1
- <div class="m-nav m-nav-1">
- <ul>
- <li class="z-crt">
- <a>
- 链接
- </a>
- </li>
- <li>
- <a>
- 链接
- </a>
- </li>
- </ul>
- <a class="btn">
- 我是新加的a标签
- </a>
- </div>
- //变化的部分在 .m-nav-1 这个新class中写
- .m - nav - 1 {...
- }.m - nav - 1 a {...
- }.m - nav - 1.btn {...
- }
规范页 :包含了 CSS 规范、HTML 规范和工程师规范
代码库 :包含了常用的布局方式、常见模块和元件的实现以及一些 bug、技巧等
——————
教是最好的学。
来源: http://www.tuicool.com/articles/ryM7jye