前端总结·基础篇·CSS

1 常用重置+重置插件（Normalize.css,IE8+）

* {box-sizing:border-box;} /* IE8+ */body {margin:0;} /* 去除边距 */ul {margin:0;padding-left:0;} /* 去除边距和左填充 */li {list-style-type:none;} /* 去除列表的圆点 */a {text-decoration:none;} /* 去除下划线 */

2 浏览器前缀

{

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

3 兼容性

为针对不同IE浏览器进行样式修改，可以使用css hack

指定版本：IE6(_),IE7(+),IE8(/),IE9(:root 9)

指定范围：IE6-7(*),IE8-10(\0),IE9-10(\9\0),IE All(\9)

除了手写IE兼容性，你也可以直接使用IE9.js自动处理IE6-9的bug。

IE6-9支持的支持圆角、背景渐变、边框图片、盒阴影、rgba等可视化的功能可以用CSS3PIE。

IE6-8支持媒体查询可以使用Respond.js。

IE6-7支持CSS3 box-sizing可以使用borderBoxModel.js。

IE6-8支持:first-child等高级CSS选择符，可以用selectivizr。

让IE8及以下的浏览器支持H5新元素，可以用html5shiv.js。

4 指定渲染模式

5 CSS库

为了方便快速的再次实现需要的效果，把常用的功能封装起来。通过设置class的方式，使用封装好的css库。

CSS3悬浮效果（Hover.CSS）

提示（HINT.css）

进度（progress.js）

加载动画（css-loaders）

按钮（Buttons）

预处理（less,sass）

界面（Bootstrap）

1 路径：

1 ../ 上一级目录

2 ./ 当前目录

3 / 根目录

2 float+margin-布局

双飞翼布局比圣杯布局多使用了1个div，

少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，

加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；

而双飞翼布局子div里用margin-left和margin-right共2个属性

，比圣杯布局思路更直接和简洁一点。

简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。

3 clear：清除浮动

eg: .clear{ zoom: 1;}

.clear:after { content:'';display:block;clear:both;}

.fl{ float:left;}

.fr{ float:right;}

浮动：1.overflow 将父辈元素的overflow设置为hidden

2.after伪类对于元素after伪类进行设置

4 position与dispay

1.display:none; // 会清除原本占用的布局空间。

2.visibility:hidden; // 隐藏元素

3.display:none; // 隐藏元素并清除原本占用的布局空间

（1）清除布局空间的定位（absolute fixed）

fixed 偏移量相当视口的。固定定位（fixed）不会随着鼠标的滚动而改变位置。他真的是固定屏幕的某一个位置的，比较常见的是网页右下角的广告。

absolute 偏移相当于最近的一段podition 不是static的祖先元素。绝对定位（absolute）的定位原点是非默认定位（static）的父节点。可以是absolute fixed relative，如果父节点没有这些，那定位原点就是body了。使用了这两种定位中的一种，元素原本占用的布局空间将会消失（脱离文档流）。下面是绝对定位（absolute）的一个例子。左图是默认布局，右图是使用绝对定位（absolute）之后的（元素原本的布局空间被清除）。

（2）留布局空间的定位（relative）

元素原本占用的布局空间依旧保留在文档流中。

reltive偏移相当于原先在文档中的位置。相对定位（relative）相对原有位置定位。把上例中的absolute改成relative即可看到效果。使用这种方法，元素原本占用的布局会保留。

（3）默认定位：默认定位为static。

（4）巧用relative+absolute定位父相子绝

父级采用relative，子代采用absolute。则子代的定位原点变为父级元素的左上角。

5 居中

（1）水平居中

a. text-align:center

.parent {width: 500px;height: 100px;border: 1px solid #ddd;text-align: center;}.child {display: inline-block;width: 100px;}<div class="parent"><span class="child">123</span> </div>

该方法可以水平居中块级元素中的行内元素，如`inline`，`inline-block`；

对于块级元素中的块级元素，只会让子元素中的内容居中，子元素仍然是左对齐，如上述例子中span改成`display：block`，则child会左对齐，其中的文字会相对于span居中。

b. margin:0 auto

.parent {width: 500px;height: 100px;border: 1px solid #ddd;}.child {display: block;margin:0 auto;width: 100px;}<div class="parent"><span class="child">123</span></div>

对于已知width的块级元素，可以用`margin：0 auto`来设置水平居中。

（2）垂直居中

a. line-height

对于已知height的单行文本，设置line-height=height的值，即可实现垂直居中。

b. vertical-align: middle

模拟成表格属性来实现居中。

.parent {display: table-cell; //模拟表格属性vertical-align: middle;text-align: center;width: 500px;height: 100px;border: 1px solid #ddd;}.

child {display: inline-block;width: 100px;}

c. position：absolute + translate

对于height和width未知的元素可以采用该方法

.parent {position: relative;width: 500px;height: 100px;border: 1px solid #ddd;}.

child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #ddd;}

（3）水平居中

1.text-align:center 水平居中的块级元素的行内元素 inline inline-block

2.margin:auto 对已知的width块级元素

6 垂直矩阵

1.line-height 单行文本

2.vertical-algin:middle 表格

3.position:absolute+translate 对height,width未知的元素采用该方法

4.flex布局多个因素

7 行高

1.line-height 在文本行中垂直居中

2.vertical-align (1)top 按顶线对齐

(2)bottom 按底线对齐

(3)middle 文字居中

(4)..px 按数字

8 margin-外边距

垂直方向的margin会合并，水平方向的不会。实际显示的margin是两者中较大的那个

1.margin：0 auto （对已知的width块级元素，实现水平居中等功能）

2.margin：上外右外下外左外

3.margin：上外左右外下外

4.margin：上下外左下外

5.margin：上下左右外

9 padding-内边距

padding:1px 2px 1px 2px;（top/right/bottom/left）

1.padding：上内右内下内左内

2.padding：上内左右内下内

3.padding：上下内左右内

4.padding：上下左右内

10 border

outline和border类似，但是不占用布局空间。

border-image:url() 30 30 stretch;（round为边框重复，stretch为边框拉伸）

border:1px solid rgba(——，——，——，透明度)

11 border-radius-圆角

border-radius: 10px 0 10px 0; //设置圆角（四个值分别为top-left、top-right、bottom-right和bottom-left）

1.border-radius：左上右上右下左下

2.border-radius：左上右上右下左下

3.border-radius：左上右上右下左下

4.border-radius：左上右上右下左下

1.圆 border-radius(100%)

2.半圆 border-radius(10px 0 0 10px)

3.扇形 border-radius(0 0 0 10px)

4.椭圆 border-radius(20px 40px)

12 list-列表与表格

1.list-style-type cellspacing border

合并边框：border-collapse:collapse

2.list-style-image

3.list-style-position

13 text-文本样式

@font-face用来设置自定义字体

1.text-algin 水平对齐方式

2.text-indent 文本缩进

3.line-height 行间距

4.text-decoration

14 word-文字折行

1.word-wrap: 文字溢出

2.word-break: 进行字母级截断

3.white:space:

15 input

1.aufocus 自动获取焦点

2.requred

3.placehoder

4.pattern 正则表达式

5.height/width 只适用于image

16 overflow

1.visble 滚动条

2.hidden

3.scroll:滚动条显示

4.auto: 滚动条自动显示

17 box-shadow-阴影

opacity: .5; // 设置默认透明度为0.5

box-shadow:

18 background-背景属性

制作精灵图（sprite）可以用，

然后将元素的width和height设置成小图的大小。

background:red url(laughcry.gif) repeat top left;

多背景：（-image:url(bg.jpg),url(dog.jpg)）定位源（-origin:content-box/padding-box/border-box）显示区域（-clip:content-box;）和尺寸（-size(80px 60px)）

1.三种写法：

(1)image、

(2)repeat、

(3)position、

(4)color（理解）

2.background:url(img/..) no-repeat 颜色（10px 10px）

repeat x y

1.背景颜色

2.渐变色背景

3.背景与属性

4.base64和性能优化

5.多分辨流适配

19 linear-gradient-渐变

background:linear-gradient(red,blue,green)

* background:linear-gradient(to right,red 10%,blue 50%,green 70%)

* background:linear-gradient(rgba(220,220,220,0),rgba(220,220,220,1))

默认为从上到下渐变，to right（前缀写法中皆为left）

可以设置从左到右渐变，to bottom right

则对角线渐变（前缀写法中webkit为left top），

180deg则可以设置按照角度渐变；

linear-gradient(方向,开始的颜色,结束的颜色)

-moz-linear-gradient(top,red,yellow);

-webkit-linear-gradient(top,red,yellow);

-ms-linear-gradient(top,red,yellow);

linear-gradient(top,red,yellow)

-ms-fliter:“progid:DXImageTransform.Microsoft.gradient(enabled='false',

startColorstr=red, endColorstr=yellow)”;

20 尺寸：

1.百分比

2.rem html的font-size

3.em 父元素的flow-size

4.盒子

21 Z-index

1.Z顺序值大的覆盖值小的

2.auto

3.<interger>整数值

4.inherit

22 resize（notIE）（CSS3）

定义用户是否可调整当前元素的边框大小。

resize: horizontal（水平）/vertical（垂直）/both/none/inherit;

23 分栏（column）（IE10+ notOperaMini）（CSS3）

column-count: 3; /* 设定需要分几栏 */

column-gap: 20px; /* 设定两栏间隔 */

24 滤镜（filter）（notIE,-webkit-）

25 自定义鼠标指针（cursor）

cursor:pointer/help/wait/text/move/crosshair;

26 @keyframe-动画

定义动画可以用from-to的两个定点形式，也可用百分比（0%、50%、100%）的多个定点形式

animation: toRight 5s;

transition: width 2s; /* 只需添加这一条 */

a.transform

1)translate

translate(x,y) transformX(n) translateY(n) translateZ(n) translate3d

2)rotate

rotateX() rotateY() rotateZ() rotatae3d()

3)shew

4)scale

scaleX() scaleY() scaleZ() scale3d()

5)matrix

6)transform-style:preserve-3d matrix3d(n,n,n,n,....,n)

b.transform-origin

(1)x-axis

X的值 left center right length %

(2)y-axis

Y的值 top center bottom length %

(3)z-axis

Z的值 length

3.background:

(1)liner-gradient

(2)radical-gradient

4.transition

(1)transition-property: none / all / property(与动画里的名称可以取一样)

(2)transition-duration:

(3)transition-delay:

(4)transition-timing-function linear 匀速

ease 慢-快-慢（moren）

ease-in 慢开始

ease-out 慢结束

ease-in-out 慢速开始和结束

27 移动端

（1）视口（viewport）

width=device-width // 把页面宽设置成设备一样initial-scale=1.0 // 初始缩放为1.0

user-scalable=no // 不允许用户缩放（此处有坑，有时会无效）

（2）媒体查询（media query）

媒体查询来根据不同宽度的设备显示不同的布局。

（3）相对字体大小（rem/em）

rem是相对于根字体的大小，em是相对于父级的字体大小

转载于:https://www.cnblogs.com/jiangjiali1228/p/10952203.html

前端总结·基础篇·CSS相关推荐

前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇（二）JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
➷HTML+CSS前端笔记(基础篇-第一部分)
★ 学习目标: 根据.psd文件/图片,用html+css布局出静态网页: !DAY❶ 认识Web及常用标签基础概念铺垫网页构造原理网页元素:文字,图片,链接,音视频等: 网页构造原理:网页元素 ...
前端开发基础 HTML+CSS+JS
文章目录 HTML介绍 CSS介绍 JavaScript介绍 HTML.CSS和JavaScript之间的关系 HTML使用基本结构常用标签 CSS使用使用方法常用属性盒子模型选择器默认 ...
【前端开发基础】CSS基础知识以及CSS3
文章目录一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...
前端 html 基础 jQuery css
前端开发 html 基础填充模板常用标签显示标签(p,span,label) 列表标签(下拉框,table) 输入标签(按钮,text,文本框,选择框,radio) 标签页 js js基础 js ...
CSS基础篇--CSS/CSS3中的原生变量var详解
使用语法首先我们先来看一个例子: html代码: <div class="element">这是一段文字</div> css代码: .element {w ...
CSS基础篇--css reset重置样式有那么重要吗？
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, ap ...
前端 —— JavaScript 基础篇 22 -- 比较全的正则验证（注册页面的demo）
注册页面中用到的正则校验,在提交表单的时候.方便自己后期复制粘贴 .若是能帮助有需要的伙伴,那再好不过. css文件 .padb{padding: 30px 50px; } .conBox{backg ...

前端总结·基础篇·CSS

（1）视口（viewport）

前端总结·基础篇·CSS相关推荐

最新文章

热门文章