前端总结·基础篇·CSS

柔情只为你懂 2021-11-29 16:56 356阅读 0赞

**前端总结·基础篇·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

[Normalize.css]: https://github.com/necolas/normalize.css/
[IE9.js]: http://code.google.com/p/ie7-js/
[CSS3PIE]: http://css3pie.com/
[Respond.js]: https://github.com/scottjehl/Respond/
[borderBoxModel.js]: https://github.com/albertogasparin/borderBoxModel
[selectivizr]: http://selectivizr.com/
[html5shiv.js]: https://github.com/aFarkas/html5shiv/
[Hover.CSS]: http://ianlunn.github.io/Hover/
[HINT.css]: http://kushagragour.in/lab/hint/
[progress.js]: http://usablica.github.io/progress.js/
[css-loaders]: https://projects.lukehaas.me/css-loaders/
[Buttons]: http://unicorn-ui.com/buttons/builder/
[less]: http://lesscss.cn/
[sass]: http://sass-lang.com/
[Bootstrap]: http://www.bootcss.com/