CSS3新特性:
https://segmentfault.com/a/1190000010780991#articleHeader41
超出省略号
有三行代码:禁止换行,超出隐藏,超出省略号
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
position属性
css中position属性用于元素定位,其属性值有5个,分别是inherit 、static、relative、fixed、absolute ,下面是具体的分析:
1.inherit 规定该元素的position的属性值继承自父元素。也就是说该元素的position属性值跟其父元素一样
2.static 元素的position属性的默认值,不用于特殊定位,排在什么位置就是什么位置。
3.fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。也就说该元素的定位是相对于浏览器的窗体而言的,不随页面的滚动而发生变化。
4.relative 生成相对定位的元素,相对于其正常位置进行定位。也就是说该元素的定位是相对于该元素默认定位时的位置而言的,在本来应该存在的位置进行移动。
5.absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。也就是说该元素的定位是相对于该元素的第一父元素而言的,以父元素的左上角的最靠边的点为坐标原点,相对于该点进行移动
元素旋转
让一个元素沿环形路径平移
最开始看到这个问题的时候,会很容易想到用transform-origin
定义圆心的位置,然后用rotate()
进行旋转。css代码大概是这样(半径为150px):
@keyframes spin {
to {
transform: rotate(1turn);
}
}
.avatar{
animation: spin 10s infinite linear;
transform-origin: 50% 150px;
}
搭配的html很简单:
<img class="avatar" src="edwardup_avatar.jpg" alt="" />
对应的效果是:
可以看到,这是一个旋转动画,元素在沿着环形路径移动的同时,自身也会围绕圆心发生旋转。因此,这并不是我们想要的平移效果。改善参考:https://segmentfault.com/a/1190000007421401
弹性盒flex
综合自阮一峰:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
在线实例:https://codepen.io/LandonSchropp/pen/KpzzGo
首先,设置为flex布局:
display:flex
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器的属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
flex-direction: row | row-reverse | column | column-reverse; 决定主轴的方向
justify-content: flex-start | flex-end | center | space-between | space-around;
justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch;
定义项目在交叉轴上如何对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。式
项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
.item {
flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow
属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow
属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
允许单个项目有与其他项目不一样的对齐方
三等分
父元素 display:flex
子元素都设为 flex:1
三栏自适应布局(两边宽度固定,中间自适应)
https://blog.csdn.net/cinderella_hou/article/details/52156333
1. 在外围包裹一层div:display:flex;
中间元素:flex:1
2. 基于传统的position和margin等属性进行布局
1).绝对定位法,绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin属性,留出左右元素的宽度,既可以使中间元素自适应屏幕宽度。
div1,div3{position:absolute;top:0;width:100px;}
div1{left:0}
div3{right:0}
div2{margin:0 100px}
2).使用自身浮动法
纯css实现两列等高
一行代码:display: inline-flex; 即可,啊啊啊啊,一行代码啊
其他方法:真是见鬼了
.container{ margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px; //补偿高度
margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:-2000px;
}
原理: 父盒子包含两个div,这两个div的不用写高度,而是都写上padding-bottom: 10000px;margin-bottom: -10000px;然后给父盒子加是overflow:hidden;如果填充这两个div,较高的那个div的高度将决定父盒子的高度。
block,inline和inline-block概念和区别
总体概念
- block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。
- 大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
- block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。
- 一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。
block,inline和inlinke-block细节对比
- display:block
-
- block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
- display:inline
-
- inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
- display:inline-block
-
- 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
补充说明
- 一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
- IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。
什么是BFC(Block Formatting Context),什么情况下会产生BFC???
BFC定义:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level Box参与,该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。
满足下列CSS声明之一的元素便会生成BFC:
1、根元素或其它包含它的元素
2、float的值不为none;
3、overflow的值不为visible;
4、position的值不为static;
5、display的值为inline-block、table-cell、table-caption;
6、flex boxes (元素的display: flex或inline-flex);
可参考:https://segmentfault.com/a/1190000012221820
CSS3 filter(滤镜) 属性
filter: grayscale(100%);//图片转为黑白
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);//图片转为黑白
}
</style>
</head>
<body>
<p>图片转为黑白色:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>
引起repaint 和 reflow的一些操作,如何避免?
什么是reflow?
reflow指的是计算页面布局。在这之后再触发一次repaint。
什么是repaint?
repiant或者redraw遍历所有的节点检测各节点的可见性、颜色、轮廓等可见的样式属性,这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘
从上面可以看出,回流必将引起重绘,而重绘不一定会引起回流。
reflow对性能的影响非常大,但是很不幸,reflow很容易被触发
以下转自:https://segmentfault.com/a/1190000002629708
对于DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow;
当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。
可见这两个东东对浏览器渲染页面是很重要的啊,都是会影响性能的,因此我们需要了解一些常见的会引起repaint和reflow的一些操作,并且应该尽量减少以提高渲染速度。
引起Repain
和Reflow
的一些操作:
Reflow
的成本比 Repaint
的成本高得多的多。DOM Tree
里的每个结点都会有 reflow
方法,一个结点的 reflow
很有可能导致子结点,甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么,但是如果 reflow
发生在手机上,那么这个过程是非常痛苦和耗电的。
所以,下面这些动作有很大可能会是成本比较高的。
- 当你增加、删除、修改 DOM 结点时,会导致 Reflow 或 Repaint。
- 当你移动 DOM 的位置,或是搞个动画的时候。
- 当你修改 CSS 样式的时候。
- 当你 Resize 窗口的时候(移动端没有这个问题),或是滚动的时候。
- 当你修改网页的默认字体时。
注:display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为没有发现位置变化。
如何优化?
Reflow是不可避免的,只能将Reflow对性能的影响减到最小,给出下面几条建议:
-
不要一条一条地修改
DOM
的样式。与其这样,还不如预先定义好css
的class
,然后修改DOM
的className
:// 不好的写法 var left = 10, top = 10; el.style.left = left + "px"; el.style.top = top + "px"; // 推荐写法 el.className += " theclassname";
-
把 DOM 离线后修改。如:
a>
使用documentFragment
对象在内存里操作DOM
。b>
先把DOM
给display:none
(有一次repaint
),然后你想怎么改就怎么改。比如修改100
次,然后再把他显示出来。c>
clone
一个DOM
节点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。 -
不要把
DOM
节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。 -
尽可能修改靠近叶子的节点。当然,改变层级比较底的
DOM
节点有可能会造成大面积的reflow
,但是也可能影响范围很小。 -
为动画的
HTML
元件使用fixed
或absoult
的position
,那么修改他们的CSS
是会大大减小reflow
。 -
千万不要使用
table
布局。因为可能很小的一个小改动会造成整个table
的重新布局。
认识了这些是不是对浏览器的原理有更大兴趣了?OK,后面会更新关于浏览器原理的文章,或者你们可以先去搜搜别人的,因为我觉得理解浏览器的原理确实是很重要,可以帮助我们写出性能更好的website
。
css nth-child和nth-type-of 区别
转自:https://segmentfault.com/q/1010000004100714
上代码
-
<ul class="clearfix">
-
<li></li>
-
<li class="nav_after"></li>
-
<li></li>
-
<li class="nav_after"></li>
-
<li></li>
-
<li class="nav_after"></li>
-
<li></li>
-
<li class="nav_after"></li>
-
</ul>
解释:
.nav_after:nth-child(4)
的意思是:.nav_after
的父元素(这里就是ul)的第四个子元素如果是.nav_after
的时候适用。
题主的代码中,第四个子元素恰好含有类名.nav_after,所以设置背景有效;当你写成单数时,由于单数的li并没有设置.nav_after类名,所以没有效果。
nth-of-type适用于:当子元素的类型超过一种的时候,针对同类型的子元素计算。如下代码,div包含h2型子元素和p型子元素:
-
<div>
-
<h2>h元素</h2>
-
<p class="nav_after">p元素</p>
-
<h2>h元素</h2>
-
<p class="nav_after">p元素</p>
-
<h2>h元素</h2>
-
<p class="nav_after">p元素</p>
-
<h2>h元素</h2>
-
<p class="nav_after">p元素</p>
-
</div>
.nav_after:nth-of-type(4)
就表示第四个p
。
如果把h2
也都加上类名.nav_after
,那么.nav_after:nth-of-type(4)
就表示第四个h2
和第四个p
了。.nav_after:nth-child(4)
表示父元素的第四个子元素,不分类型,如果第四个子元素含有类名.nav_after
就有效,不含就没效。
题主的代码,ul的子元素只有一种类型li,所以此时nth-of-type(4)和nth-child(4)都指向第四个子元素li了。