CSS总结（ CSS3 新特性 ）

最新推荐文章于 2024-03-13 08:00:00 发布
最新推荐文章于 2024-03-13 08:00:00 发布
阅读量377 收藏
点赞数
分类专栏： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gytha_1/article/details/80690585
版权
css 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
css3
1 篇文章 0 订阅
订阅专栏

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概念和区别

总体概念

  1. block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
  2. 大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
    • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
    • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
  3. block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
  4. 一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

block，inline和inlinke-block细节对比

  • display:block
    1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
    2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    3. block元素可以设置margin和padding属性。
  • display:inline
    1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
    2. inline元素设置width,height属性无效。
    3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  • display:inline-block
    1. 简单来说就是将对象呈现为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 发生在手机上，那么这个过程是非常痛苦和耗电的。
所以，下面这些动作有很大可能会是成本比较高的。

  1. 当你增加、删除、修改 DOM 结点时，会导致 Reflow 或 Repaint。
  2. 当你移动 DOM 的位置，或是搞个动画的时候。
  3. 当你修改 CSS 样式的时候。
  4. 当你 Resize 窗口的时候（移动端没有这个问题），或是滚动的时候。
  5. 当你修改网页的默认字体时。

注：display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

如何优化？

Reflow是不可避免的，只能将Reflow对性能的影响减到最小,给出下面几条建议：

  1. 不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className：

    // 不好的写法
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// 推荐写法
el.className += " theclassname";

  2. 把 DOM 离线后修改。如：
    a> 使用 documentFragment 对象在内存里操作 DOM。
    b> 先把 DOM 给 display:none (有一次 repaint)，然后你想怎么改就怎么改。比如修改 100 次，然后再把他显示出来。
    c> clone 一个 DOM 节点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

  3. 不要把 DOM 节点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

  4. 尽可能修改靠近叶子的节点。当然，改变层级比较底的 DOM节点有可能会造成大面积的 reflow，但是也可能影响范围很小。

  5. 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是会大大减小 reflow 。

  6. 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

认识了这些是不是对浏览器的原理有更大兴趣了？OK,后面会更新关于浏览器原理的文章，或者你们可以先去搜搜别人的，因为我觉得理解浏览器的原理确实是很重要，可以帮助我们写出性能更好的website。

 

css nth-child和nth-type-of 区别

转自：https://segmentfault.com/q/1010000004100714

上代码

  1. <ul class="clearfix">

  2. <li></li>

  3. <li class="nav_after"></li>

  4. <li></li>

  5. <li class="nav_after"></li>

  6. <li></li>

  7. <li class="nav_after"></li>

  8. <li></li>

  9. <li class="nav_after"></li>

  10. </ul>

解释：

.nav_after:nth-child(4)的意思是：.nav_after的父元素（这里就是ul）的第四个子元素如果是.nav_after的时候适用。

题主的代码中，第四个子元素恰好含有类名.nav_after，所以设置背景有效；当你写成单数时，由于单数的li并没有设置.nav_after类名，所以没有效果。

nth-of-type适用于：当子元素的类型超过一种的时候，针对同类型的子元素计算。如下代码，div包含h2型子元素和p型子元素：

 

  1. <div>

  2. <h2>h元素</h2>

  3. <p class="nav_after">p元素</p>

  4. <h2>h元素</h2>

  5. <p class="nav_after">p元素</p>

  6. <h2>h元素</h2>

  7. <p class="nav_after">p元素</p>

  8. <h2>h元素</h2>

  9. <p class="nav_after">p元素</p>

  10. </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了。

 

 

 

Gytha_1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day7小结
KanaseKanon的博客
09-24 790
1、CSS3是CSS2.1的一个升级版，它是对CSS的一个扩展。 2、CSS3的主要新特性： 1）选择器 2）阴影 3）形状转换（2D<->3D） 4）变形 5）动画（过渡动画、帧动画） 6）边框 7）多重背景 8）反射 9）文字 10）颜色（rgba/hsl/hsla） 11）滤镜（filter） 12）弹性布局 13）多列布局 14）盒模型 15）Web字体 16）媒体查询 3、CSS3不是所有浏览器或同一浏览器的不同版本都支持，所以需要兼容处理，通常的做法就是加厂商前缀。 1）主流浏览器内
css3新特性总览
low666的博客
04-07 729
css3新特性 css3选择器 选择器 示例 示例说明 .class .intro 选择所有class="intro"的元素 #id #firstname 选择所有id="firstname"的元素 * * 选择所有元素 element p 选择所有< p>元素 element,element div,p 选择所有< div>元素和 <...
CSS3新增了哪些新特性？
最新发布
常来常往，共同成长
03-13 1781
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3里都是可以使用的 而CSS3也增加了很多新特性，为开发带来了更佳的开发体验
CSS div 三等分
卋舉
10-13 2073
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>div 三等分</title> <meta name="Keywords" content="关键字"&gt
css平均分三栏,CSS三栏布局方法及其分析
weixin_39596720的博客
08-04 1152
前言相信很多同学在面试的时候遇到过三栏布局的问题，一般面试题会让你尽可能多的写出三栏布局的方法，本篇小记对三栏布局的一些主流方法，做一些总结和分析。不正之处，欢迎指点！正文1.绝对定位法html如下：复制代码css如下：* {margin: 0;padding: 0;}html, body{height: 100%;}.container{position: relative;height: 10...
Css3新特性应用之形状总结
09-24
在CSS3中，新增了许多关于形状的特性，使得网页设计师能够创造出更为丰富的视觉效果。本文将详细介绍CSS3中关于形状的一些关键应用，包括自适应椭圆、平行四边形、菱形以及切角效果。 一、自适应椭圆 通过`border-...
css3动态的天气图标特效
06-01
随着技术的发展，CSS3引入了许多新的特性和功能，使得开发者能够创建出更为丰富和动态的用户体验。本话题将深入探讨如何利用CSS3来制作动态的天气图标特效。 首先，我们要明白CSS3中的关键帧动画（@keyframes）是...
CSS3网格的三个新特性详解
12-10
总结起来，CSS3的这三个新特性——`box-sizing: border-box`、`width: calc()`以及CSS3 Grid Layout，极大地增强了我们构建灵活和响应式的多列布局的能力。它们不仅简化了代码，提高了效率，而且让设计者能够实现...
结合CSS3的新特性来总结垂直居中的实现方法
09-24
CSS3中的flex布局和before伪元素等特性用来实现垂直居中真的是太方便和优雅了,这里我们就来结合CSS3的新特性来总结垂直居中的实现方法:
div三等分布
banzhuan678的博客
06-13 910
介绍： 使用了css3的弹性盒模型，可以完美把一个div平均等分成任意份数 网盘下载地址： http://kekewl.net/zxsHvPaoTNk0 图片：
纯css3实现栏目三等平均分配
06-12
效果描述： 本效果主要介绍的是一个方法 用一种看起来很高级的方式实现你的div三等分 使用方法： 1、将head中的样式引入到你的样式表中 2、将body中需要的代码部分拷贝过去即可
如何将父盒子分成三份
weixin_51480428的博客
02-01 1113
.floor_list image{ float: left; width: 33.33%; margin-top: 5px; } 第二句的意思就是将父盒子均分成三份 这里面不能用flex 因为那样是将子元素全部变为一排 其样式会发生改变
css3新特性
qq_52928592的博客
01-29 386
作业
CSS3新特性
xy_is_fhh的博客
11-22 484
1.CSS3新增选择器 CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。 1.属性选择器 属性选择器可以根据元素特定属性来选择元素。 注意：类选择器、属性选择器、伪类选择器，权重为10 2.结构伪类选择器 结构伪类选择器主要根据文档结构来选择元素，常用于父级选择器里面的子元素 nth-child( n )选择某个父元素的一个或多个特定的子元素 · n可以是数字，关键字和公式 · n如果是数字，就是选择第n个子元素，里面数字从1开始... 3.伪元素选择器 ..
css等比例分割父级容器（完美三等分）
热门推荐
xiaobing_hope的专栏
04-30 7万+
css等比例分割父级容器（完美三等分）          父级容器的宽度一定，要实现子元素等比例完美均分父级宽度，实现方式有哪些？ html部分代码： 方法一： 浮动布局+百分比  （将子元素依次左浮动，根据子元素的个数，设定每个子元素的宽度百分比） 方法二：行内元素（inline-block）+百分比 方法三： 父元素  display:t
H5新增的属性、样式
qq_40137713的博客
05-28 498
-新增元素 说明 新增元素 说明 viode 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcapton 图例的说明 main ti...
CSS布局之等分布局与等高布局
weixin_47471015的博客
01-12 887
等分布局 等分布局就是指一行被分为若干列，每一列的宽度是相同的值； 方法一：float 属性实现等分布局效果 给各个元素设置浮动和宽度 { float: left; width: 25%; //宽度用百分比等分 //给每个元素设置浮动-- 子元素浮动 - 导致父元素的高度塌陷 } 清除浮动 1.固定的高度 height 固定写死（不推荐） 2.父元素加overflow:hidden => BFC 特点: 把浮动的高度给计算进去 优点：代码简洁 缺点：
CSS基础知识（十四）：CSS3新特性
前端
11-05 742
文章目录一、CSS3新增选择器1.属性选择器2.结构伪类选择器3.伪元素选择器 。 一、CSS3新增选择器 1.属性选择器 属性选择器：根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 选择符 简介 E[att] 选择具有att属性的E元素 E[att=“value”] 选择具有att属性且属性值等于value的E元素 E[att^=value] 匹配具有att属性且属性值以value开头的E元素 E[att$=“value”] 匹配具有att属性且属性
《CSS3》学习笔记大全
04-12
《CSS3》学习笔记大全深入解析了CSS3的核心优势与特性，帮助开发者理解如何将网页设计提升到新的水平。CSS3相较于CSS2，最大的进步在于引入了更多强大的选择器和属性，使其在无需JavaScript的情况下也能实现动态和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值