![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 69
gigi就是我
这个作者很懒,什么都没留下…
展开
-
CSS学习笔记:box-shadow
在CSS3中,box-shadow属性实现盒容器的阴影效果,几乎可以用到任何元素上。如果元素同时设置了border-radius,阴影也会有圆角效果。在该属性中,要设置阴影相对于盒容器水平及垂直方向上的偏移值、阴影的颜色、还可以选择性地设置模糊半径和扩展半径。语法box-shadow:none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <原创 2016-12-28 21:39:49 · 386 阅读 · 0 评论 -
CSS:两栏布局,三栏布局
两栏布局方法一:浮动布局<div id = "aside"></div><div id = "main"></div>div{ height:500px;}#aside{ width:300px; background-color:yellow; float:left;}#main{ background-color:aqua; margin-left:300原创 2017-02-15 23:34:10 · 9648 阅读 · 0 评论 -
window.getComputedStyle
window.getComputedStyle(元素,伪类)用于获得元素最终使用的css属性值,返回一个实时的 CSSStyleDeclaration,只读。var dom = document.getElementById("test"), style = window.getComputedStyle(dom);getComputedStyle与style的区别:getComputed原创 2017-08-14 16:39:54 · 436 阅读 · 0 评论 -
知识点:居中大盘点
居中大盘点行内元素<div> <span>element</span></div>基础样式:div{ width:300px; height:200px; background-color:#777;}水平居中text-align<div> <span>element</span></div>div{ text-align:center;}垂直居中line-hei原创 2016-12-23 15:39:11 · 389 阅读 · 0 评论 -
知识点:BFC、IFC
引子定位方案控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning) 。普通流在普通流中,元素按照其在 HTML 中的先后位置至上而下布局。行内元素水平排列,直到当行被占满然后换行块级元素则会被渲染为完整的一个新行除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流原创 2016-12-26 15:14:09 · 507 阅读 · 0 评论 -
flexbox布局实例
等高布局之前我们实现等高布局的方式通常是使用非常大的padding-bottom与负的margin-bottom,而使用flex也能轻松实现。由于align-items属性的默认值是stretch,也就是子项目会默认伸展来填满容器。 因此当我们设置了容器的height,或者某一子项目的height撑开了容器,那么所有子项目默认都会stretch成容器的高度,从而实现等高。n栏布局(grid布局)一原创 2017-08-10 19:06:35 · 2498 阅读 · 0 评论 -
display: none;与visibility: hidden;的区别
都能使元素不可见,区别:display:none会让元素在渲染树中消失,不占用任何空间; visibility: hidden;则保留元素占据的空间,也依旧在渲染树中。display:none是非继承属性,但由于元素在渲染树中消失因此子孙节点也会一并消失,通过修改子孙节点的属性也无法显示。 visibility: hidden;是继承属性,子孙节点消失是由于继承了hidden值,那么只要设置原创 2017-08-09 21:47:45 · 1129 阅读 · 1 评论 -
Sass学习笔记
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。可以通过命令行的方式编译Sass:sass input.scss output.css还可以命令 Sass 监视文件的改动并更新 CSS :sass --watch input.scss:output.css但一般就会使用gulp、webpack原创 2017-08-07 14:21:50 · 342 阅读 · 0 评论 -
CSS动画的性能优化
在移动端的一些h5页面或其他地方经常要使用css动画,但是在pc端看着好好的动画到移动端上却出现了卡顿,遂搜集了一些有关css动画性能优化方面的资料。GPU 现代浏览器大都利用了GPU来加速网页渲染。GPU是专用于图形渲染的芯片,它擅长做如下事情: 绘制位图到屏幕上 对图片进行处理,例如:修改位置、旋转和缩放等等 知道GPU擅长什么之后,让我们以Chrome为例子分析原创 2017-07-06 11:55:42 · 775 阅读 · 0 评论 -
:nth-child和:nth-of-type之间的差异
参考文章 CSS3选择器:nth-child和:nth-of-type之间的差异举例来说:p:nth-child(2)选择的是其父元素下的第二个子元素,且为p元素。此处关键的是一定选择的是其父元素下的第二个子元素,若刚好为p元素则可以选择,若不是p元素则不会选择上任何元素。p:nth-of-type(2)选择的是其父元素下第二个p元素。注意此时选择的不一定是父元素的第几个子元素,但是一定原创 2017-07-13 09:37:54 · 337 阅读 · 0 评论 -
CSS学习笔记:浮动
浮动float: left;float: right;float: none;CSS的float 属性可以使一个元素脱离正常的文档流,然后被安放到它所在容器的的左端或者右端,并且其他的文本和行内元素围绕它安放。浮动元素会以某种方式将浮动元素从文档的正常流中删除,但是它还是会影响布局:其他内容会环绕该元素。浮动元素周围的外边距不会合并。如果要浮动一个非替换元素,必须为该元素声明一个width原创 2016-11-17 20:34:19 · 667 阅读 · 0 评论 -
CSS:可继承的属性
border-collapse border-spacingcolor cursor directionfont-family font-size font-style font-variant font-weight fontline-heightlist-style-image list-style-position list-style-type list-stylete原创 2017-03-03 10:11:32 · 322 阅读 · 0 评论 -
CSS:等高布局
方法一:使用数值非常大正padding-bottom与负margin-bottom<div id = "container"> <div id="left"></div> <div id = "right"></div></div>*{ margin:0; padding:0;}#container{ overflow:hidden;}#left{ width:30原创 2017-02-16 10:50:25 · 1314 阅读 · 0 评论 -
CSS学习笔记:优先级
一个规则的优先级按如下规则计算:a:ID选择器的数量b:类选择器、属性选择器、伪类选择器的数量c:元素选择器、伪元素选择器数量忽略通配选择器和结合符Examples:* /* a=0 b=0 c=0 -> specificity = 0 */li /* a=0 b=0 c=1 -> specificity = 1 */ul原创 2016-07-24 11:08:37 · 417 阅读 · 0 评论 -
white-space、word-wrap和word-break
white-space 用来设置如何处理元素中的空格、换行符和是否允许内容过长时自动转行。属性值:normal(默认值):合并连续空格、换行符为一个空白符、允许自动换行no-wrap:合并连续空格、换行符为一个空白符、不允许自动换行pre:不合并连续空格、换行符保留,不允许自动换行。 也就是保留内容中原本的格式,但是不自动换行pre-wrap:不合并连续空格、换行符保留,允许自动换行原创 2017-09-02 13:43:37 · 535 阅读 · 0 评论 -
CSS学习笔记:border-radius
概念border-radius 用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两个半径时确定一个椭圆这个(椭)圆与边框的交集形成圆角效果。即使元素没有边框,圆角也可以用到 background 上面,具体效果受 background-clip 影响。这是一个简写属性,用来设置:border-top-left-radiusborder-top-right-radiusborder-原创 2016-12-26 21:28:47 · 1171 阅读 · 0 评论 -
一些CSS的奇淫技巧
用纯CSS创建一个三角形当一个盒容器的两条边框在边角处相交时,浏览器就会在交点处按某个角度绘制接合线。 如果将这个盒容器的width和height设置为0,并为每条边框设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接到一起的三角形,它们分别指向不同的方向:<div id="demo"></div>#demo { width: 0; height: 0; border-w原创 2016-12-25 20:15:54 · 1821 阅读 · 0 评论 -
CSS学习笔记:flexbox
CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为。概念在定义方面来说,弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。 弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。块级布局更侧重于垂直方向、行内布局更侧重于水平原创 2016-12-17 20:52:01 · 479 阅读 · 0 评论 -
CSS学习笔记:box-sizing
box-sizing 属性用来改变默认的 CSS 盒模型 对元素宽高的计算方式。/* 关键字值 */box-sizing: content-box;box-sizing: border-box;content-box:默认值,标准盒模型。weight和height都只包括内容的宽和高,不包括边框、内边距和外边距。border-box: width 与 height 包括内边距与边框,不包括原创 2016-12-10 15:42:01 · 295 阅读 · 0 评论 -
CSS学习笔记:生成内容
CSS2提出了一个称为生成内容的新特性。这是指由浏览器创建的内容,而不是由标志或内容来表示。例如,列表标志就是生成内容,这不是开发人员写的而是由浏览器自动生成的。插入生成内容为了向文档中插入生成内容,可以使用:before和:after伪元素。这些为元素会根据content属性把生成内容放在一个元素内容的前面或后面。注意,生成内容和元素之间没有空格,如果想要空格就要在content中指定好。例如,可原创 2016-12-09 17:08:05 · 573 阅读 · 0 评论 -
CSS的简写属性
今天的面试中被问到了,半天才理解面试官到底是什么意思,晕……一开始还以为要问margin合并呢……backgroundbackground: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [ba原创 2017-08-28 21:48:28 · 872 阅读 · 0 评论 -
CSS学习笔记:background
CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position为了更好的驾驭背景图片,CSS3添加了3个新的background相关属性,以及一系列的相关属性值:background-ori转载 2016-10-10 22:21:18 · 657 阅读 · 0 评论 -
使用timeline分析动画性能
在使用动画的时候,在PC上看往往察觉不到太明显的卡顿,但在移动端中却会出现明显的卡顿,这是就要使用硬件加速来提升动画性能,具体可以看CSS动画的性能优化。这篇文章主要写的是如何通过chrome的timeline来观察到动画性能的提升。timeline面板可以用来录制页面运行的某一时间段,由此分析性能。 timeline面板主要包含以下几块:Controls:一些选项,以及开始和停止记录的按钮O原创 2017-08-23 21:40:09 · 1494 阅读 · 0 评论 -
知识点:CSS实现一个图案
也是面试中遇到的,要实现这样一个图形: 其实就是使用一个宽高为0的边框实现这个图案,然后再旋转45度。<div id="box"> <div></div></div>#box{ width:100px; height:100px; border-radius:50px; overflow:hidden;}#box>div{ width:0; height:0;原创 2017-08-23 16:28:39 · 434 阅读 · 0 评论 -
CSS学习笔记:inline和inline-block的区别
display:inline 该元素生成一个或多个行内框display:inline-block 该元素生成一个块级别框,但是整个框的行为就像是一个内联元素。inline 和 inline-box的区别在于:margin与padding inline元素只能设定左右margin、padding,上下的是不起作用的inline-block的上下左右都可以设定margin和paddingwi原创 2016-07-28 16:17:46 · 5012 阅读 · 0 评论 -
CSS学习笔记:长度值和颜色
长度值demo相对字体em 1em:父元素的font-size大小。em会继承父元素的字体大小,因此其实是相对于父元素的font-size进行计算的。 因为em是相对于父元素进行计算的,因此如果一层一层嵌套:html { font-size: 14px;}div { font-size: 1.2rem;}<body> <div> Test <!-原创 2016-10-31 10:44:11 · 473 阅读 · 0 评论 -
CSS学习笔记:盒模型
盒模型CSS假定每个元素都会生成一个或多个矩形框。每个框中心都有一个内容区,这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的,原因是它们的宽度可以设置为0。 可以用多种属性设置各外边距、边框和内边距。内容的背景也会应用到内边距外边距通常是透明的,从中可以看到父元素的背景内边距不能是负值,但外边距可以。边框的颜色如果没有设置,那么将取元素内容的前景色。如果边框样式有某种原创 2016-11-15 21:48:42 · 1417 阅读 · 0 评论 -
CSS学习笔记:定位
定位利用定位,可以准确地定义元素框相对于其正常位置应该出现在哪里,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。基本概念定位的类型/* 关键字值 */position: static;position: relative;position: absolute;position: fixed;position: sticky;static:元素框正常生成。块级元素生成一个矩形框,作原创 2016-11-20 11:29:08 · 860 阅读 · 0 评论 -
CSS知识点:媒体查询
概述媒体查询可以根据用户所使用的的设备或显示器特性来自定义样式,从而实现适配不同终端的网页效果。下面是一个例子:@media screen and (max-width: 600px) { .facet_sidebar { display: none; }}语法媒体查询包含:媒体类型 all:适用于所有设备,默认值print:打印screen:显示器speech:语音合原创 2017-01-02 21:08:37 · 487 阅读 · 0 评论 -
CSS学习笔记:columns
概述太长的文本行十分不容易阅读,CSS多列布局就是允许简单地定义多列文本。使用多列布局列计数器和宽度有两个CSS属性控制是否实现多列布局和显示多少列: column-count 和column-width。 这两个属性可以同时使用,也可以只使用其中一个。column-count 设置特定数量的列数,宽度会自动计算。column-width 设置期望的最小列宽。如果 column-count 没原创 2017-01-02 21:41:37 · 378 阅读 · 0 评论 -
CSS学习笔记:选择器
标签选择器选择器为某个html元素类选择器通过设置元素的 class 属性,可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。在写样式表时,类选择器是以英文句号(.)开头的。多类选择器一个class值可能包含一个词列表,各个词之间用空格分隔。 通过把两个类选择器连接在一起,就可以选择同时包含这些类名的元素。如 .warning.urgent,就选中同时有这两个类的元素原创 2016-10-18 17:03:15 · 577 阅读 · 0 评论 -
CSS学习笔记:border-image
border-image 属性能给元素的边框添加背景图片。 使用 border-image 时,其将会替换掉 border-style 属性所设置的边框样式。语法border-image其实是一个简写属性,由以下属性集合而成:border-image-sourceborder-image: none | url("/images/border.png")指定边框图片的地址。 none 表示bord原创 2017-01-01 21:16:19 · 398 阅读 · 0 评论 -
CSS学习笔记:表格
表是一种很特别的布局,它本身就能确定其他元素的元素大小,例如,可以让一行中的所有单元格都有相同的高度,而不论每个单元格中可能包含多少内容。还可以让一列中的单元格都有相同的宽度。表格式化表的视觉编排CSS对于表元素和内部表元素有很分明的界限。内部表元素生成矩形框,这些框有内容、内边距和边框,但没有外边距。 因此,不能通过指定外边距来定义单元格之间的间隔。 如果试图对单元格、行或其他任何内部表元素原创 2016-11-27 13:22:16 · 571 阅读 · 0 评论 -
CSS学习笔记:列表
list-style-type要修改用于列表项的标志类型,可以使用属性list-style-type。初始值是disc,即原点。应用于display为list-item的元素CSS无法区分有序列表项和无序列表项,因此,完全可以设置一个有序列表使用实心圆而非数字作为列表项标志。由于list-style-type的默认值就是disc,所以可以得出结论:如果没有显式地声明其他列表类型,所有列表(有序原创 2016-12-06 21:46:56 · 420 阅读 · 0 评论 -
CSS学习笔记:内边距、边框和外边距
基本元素框所有文档元素都生成一个矩形框,就是一个盒子,它描述了一个元素在文档布局中所占的空间大小。因此,每个框都影响着其他元素框的位置和大小。宽度和高度一个元素的width被定义为从左内边界到右内边界的距离,height被定义为上内边界到下内边界的距离。对这两个属性有一点很重要:它们不能应用到行内非替换元素。外边距和内边距元素框在元素之间只提供了很少的空间,有三种方法可以在元素外围生成额外的空间:原创 2016-11-17 15:46:29 · 4945 阅读 · 0 评论 -
CSS学习笔记:层叠和继承
特殊性对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明上。如果元素有两个或多个冲突的属性声明,那么有最高特殊性的声明就会胜出。ID选择器:0 1 0 0类选择器、属性选择器、伪类选择器:0 0 1 0元素选择器、伪元素选择器: 0 0 0 1结合符和通配符对特殊性没有任何贡献要注意几点:ID选择器和指定id属性的属性选择器在特殊性上不同内联样式比其他声明原创 2016-10-27 22:12:32 · 410 阅读 · 0 评论 -
CSS学习笔记:基础知识
替换和非替换元素替换元素替换元素的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的 外部对象。 典型的可替换元素有:< img>< object>< video> 表单元素,如< textarea>、 < input> 。 某些元素只在一些特殊情况下表现为可替换元素,例如 < audio> 和 < canvas> 。 通过 CSS content 属性来插入的对象 被称原创 2016-10-18 09:47:18 · 482 阅读 · 0 评论 -
CSS学习笔记:字体
font-family/* 一个字体名和一个通用的字体族名 */font-family: Gill Sans Extrabold, sans-serif;font-family: "Goudy Bookletter 1911", sans-serif;/* 仅有通用的字体族名 */font-family: sans-serif;font-family: serif;font-family:原创 2016-11-06 12:51:24 · 1567 阅读 · 0 评论 -
CSS设计模式读书笔记
块级元素盒子会扩展到与父元素同宽行内元素盒子会“收缩包裹”其内容,并且会尽可能包紧原创 2016-08-04 11:37:55 · 695 阅读 · 0 评论 -
CSS学习笔记:功能查询
通过 @support,你可以在 CSS 中使用一小段的测试来查看浏览器是否支持一个特定的 CSS 功能(这个功能可以是 CSS 的某种属性或者某个属性的某个值),然后根据测试的结果来决定是否要应用某段样式。 比如:@supports ( display: grid ) { // 如果浏览器支持 Grid,这里面的代码才会执行}如果浏览器能够理解 display: grid,那么,大括号原创 2016-12-17 21:59:16 · 375 阅读 · 0 评论