CSS知识点整理

来源：互联网发布：数据站点应当互不相同编辑：程序博客网时间：2024/05/17 01:23

1.CSS盒子模型

W3C标准盒模型：margin、border、padding、content，并且width=content.width

IE盒模型：margin、border、padding、content，并且width=content.width + padding + border

2.CSS3新增属性

点击查看CSS参考手册

新增各种CSS选择器 (: not(.input): 所有class不是“input”的节点）

圆角border-radiuis

多列布局：multi-column layout

阴影和反射： multi-column layout

文字特效：text-shadow

线性渐变： gradient

旋转：transform

缩放，定位，倾斜，动画，多背景：transform: \scale(0.85,0.90) \ translate(0px, -30px) \ skew(-9deg, 0deg) \ Animation

过渡：transtion

盒模型：可使用box-sizing属性选择盒子模型：border-box; content-box(默认); padding-box

裁切：background-clip 和 background-origin，用来指定背景在元素中的开始位置，以及如何对背景进行裁剪。

3.浏览器内核

WebKit内核：Chrome、Safari、安卓默认浏览器

Trident内核(又称IE内核)：IE、360浏览器、世界之窗浏览器

Gecko内核：Firefox、Netscape6-9

Presto内核：Opera7.0以上

4.CSS选择器优先级

!important（10000） > 内联（1000） > id选择器（100） >类选择器（10） >伪类选择器（10） >属性选择器（10） >标签选择器（1） >通配符选择器（0） >浏览器自定义（0）

div.test1 .span var 优先级 1+10 +10 +1 = 22

span#xxx .songs li 优先级1+100 + 10 + 1 = 112

#xxx li 优先级 100 +1 = 101

5.水平垂直居中样式

适用于宽高固定的div

div{

width：300px;

height:200px;

position:fixed;

top:50%;

left:50%;

margin-top:-100px;

margin-left:-150px;

} // 相对浏览器窗口居中

如果要相对父元素居中，则position:absolute; （父元素记得设置position: relative）

适用于宽高不确定的div

div{

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%,-50%);

}

相对于父元素居中，设置父级position:relative

多元素水平居中

1) 把子级div设置成display:inline-block; 然后父级div设置text-align:center;

2) 更方便灵活的做法还是使用flex-box, 设置水平居中 justify-content: center

6.CSS Hack

针对不同浏览器写不同的CSS Code，就是CSS Hack

7.normalize.css和reset.css的区别

不同的浏览器对一些元素有不同的默认样式，Normalize.css 和 Reset CSS都是用来重置浏览器默认样式。

最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值，只重置不同默认样式的差异，可以说css reset的高级版。

相对于普通的css reset，Normalize的的浏览器的兼容性更好，毕竟是专业人士经过不同版本浏览器测试打造的css文件，看看它的兼容性就知道多强悍：Google Chrome (latest)、Mozilla Firefox (latest)、Mozilla Firefox ESR、Opera (latest)、Apple Safari 6+、Internet Explorer 8+

8.重绘（repaint）与回流（reflow）

点击进入重绘与回流详解

repaint：只是单纯的样式变化，不允许布局的，为重绘

reflow：设计页面布局的变化的，为回流

回流的代价比重绘大，应避免回流。回流一定伴随着重绘，而重绘却可以单独出现。

产生回流的方式：页面渲染初始化，改变DOM结构，字体大小改变，窗口resize事件，获取某些属性值（offsetTop、scrollTop、clientTop、width）……

产生重绘的方式：背景颜色的改变，字体颜色的改变……

9.display:none与visiblity:hidden的区别

display : none 元素不占据空间，涉及到了DOM结构，故产生reflow与repaint

visibility:hidden 元素占据空间，仅不可见，仍保留一切dom结构，不影响结构，故只产生repaint

10.

10.position取值的区别

Static：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right 影响。

Fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动

Absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

Relative：相对定位元素的定位是相对其正常位置。

脱离文档流：fixed、absolute

11.清除浮动的方法

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出（高度塌陷），为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

使用方法：

1、在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。

2、给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动

3、什么都不做，给浮动元素后面的元素添加clear属性。

4、利用伪类清除浮动，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

12.img的alt与title的区别

Alt：alt 属性规定图像的替代文本。

Title：鼠标在图片上停留时，显示一个悬浮框，其中显示的文字

13.CSS3写一个简单的幻灯片效果

/**css**/

.pictures-player{

width:480px;

height:320px;

margin:50px auto;

overflow: hidden;

box-shadow:0 0 5px rgba(0,0,0,1);

background-size: cover;

background-position: center;

-webkit-animation-name: "loops";

-webkit-animation-duration: 20s;

-webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes "loops" {

0% { background:url(1.jpg) no-repeat; }

25% { background:url(2.jpg) no-repeat; }

50% { background:url(3.jpg) no-repeat; }

75%{ background:url(4.jpg) no-repeat; }

100% { background:url(5.jpg) no-repeat; }

}

14.文本溢出处理（替换成省略号）

1)单行文本溢出

.inline{

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

2)多行文本溢出

.foo{

display:-webkit-box!important;

overflow:hidden;

text-overflow:ellipsis;

work-break:break-all;

-webkit-box-orient:vertical; /*方向*/

-webkit-line-clamp:4; /*显示多少行文本*/

}

15.垂直居中

方法1：

div{

position:absolute;

top:50%;

transform:translate(0,-50%);

]

父元素 position:relative

方法2：

设置父元素

.parent{

justify-content:center;//子元素水平居中

align-items:center;//子元素垂直居中

display:-flex;

}

方法3：垂直居中一个<img>

#container //<img>的容器设置如下

{

display:table-cell;

text-align:center;

vertical-align:middle;

}

阅读全文

0 0