![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 66
_尊哥
坚持到底就是胜利
展开
-
WebKit的默认样式
来源:https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css1 /*2 * The default style sheet used to render HTML.3 *4 * Copyright (C) 2000 Lars Knoll (knoll@kde.org)5 * Copyr...原创 2018-08-22 16:55:47 · 3861 阅读 · 0 评论 -
animation
这个属性是css3里的,具体的浏览器兼容性大家可以去Can I Use里面查看。语法animation: name duration timing-function delay iteration-count direction fill-mode play-state ; 定义和用法animation 属性是一个简写属性,用于设置六个动画属性:animation-name ...原创 2018-09-03 13:15:17 · 3944 阅读 · 0 评论 -
transform
transform属性向元素应用 2D 或 3D 转换。允许我们对元素进行旋转、缩放、移动或倾斜。 Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。 Safari 和 Chrome 支持替代的 -webkit-transform...原创 2018-09-03 13:30:00 · 2798 阅读 · 0 评论 -
flex弹性布局
简介Flex 是 Flexible Box 的缩写。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器,必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display:...原创 2018-09-10 11:40:58 · 262 阅读 · 0 评论 -
grid布局
重要术语Grid Container、Grid Item、Grid Line、Grid Track、Grid Cell、Grid Area 具体术语介绍内容很多可自行下载后面的文档学习:grid.docx 总的来说 Web 布局经历了以下四个阶段: 1、table表格布局,通过 Dreamweaver 拖拽表格或者手写 table 标签布局 2、float浮动及position...原创 2018-09-10 14:51:15 · 392 阅读 · 0 评论 -
Css3气泡框
第一步,生成基本的方框。 第二步,生成圆角。 第三步,制作线性渐变的效果。 第四步,在容器后面添加一个空元素,并将长度和宽度都设为0。 第五步,指定这个空元素为块级元素,并且四个边框之中,只显示上方的边框,其他三个边框,都设为透明。因为该元素的大小为0,所以它的每一个边框,都是一个等腰三角形。 第六步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右...原创 2018-09-10 14:59:33 · 944 阅读 · 0 评论 -
CSS3功能
圆角(Rounded Corner).box_round { -moz-border-radius: 30px; /* FF1+ */ -webkit-border-radius: 30px; /* Saf3+, Chrome */ border-radius: 30px; /* Opera 10.5, IE 9 */}只要设好一个半径值就可以了。border-top-le...原创 2018-09-10 18:40:04 · 637 阅读 · 0 评论 -
CSS3图形绘制
直接用CSS3画出这些图形,要比贴图性能更好,体验更加,是一种非常好的网页美观方式。 这里有图形绘制的效果图:BaseGraphCSS3.html,还有图形绘制的源代码:CSS3图形绘制.docx 使用CSS3还可以制作图标,可参考:CSS3制作的72个webapp图标,源代码在此处:https://github.com/JR93/css3-icon...原创 2018-09-07 16:36:00 · 327 阅读 · 0 评论 -
CSS背景图片定位
背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。 前两种定位,都是将背景图片左上角的原点,放置...原创 2018-09-07 16:39:14 · 6995 阅读 · 0 评论 -
CSS流体布局
流体特性图片宽度一直width:100%,依次点击3个按钮,结果随着margin, padding, border的出现,其可用宽度自动跟着减小,形成了自适应效果。就像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性。实例:flow.html流体布局稍微做一个调整,div距离容器左侧margin 15...原创 2018-09-07 16:44:14 · 3091 阅读 · 0 评论 -
BFC布局
BFC是什么BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。Block fomatting context = block-level box + Formatting ContextBox B...原创 2018-09-07 16:57:37 · 155 阅读 · 0 评论 -
CSS浮动的清除
clear清除浮动(添加空div法):在浮动元素下方添加空div,并给该元素写css样式: {clear:both;height:0;overflow:hidden;},但缺点就是如果页面浮动浮动布局多的话,就要添加很多空div去清除浮动,不便优化,不建议使用给浮动元素父级设置高度:我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的,那么我们给它的设置适当的高度就可以解决这个问题了。 ...原创 2018-09-07 17:00:13 · 171 阅读 · 0 评论 -
zoom的用法
zoom在非IE浏览器中的作用 zoom在非IE浏览器中表现为支持放大或者缩小,但是由于这个属性是一个不标准的css属性,因此一般在非IE浏览器中不用zoom来实现div 的缩放效果,现在要放大或者缩小直接用css3的transform属性。火狐浏览器不支持zoom属性。 webkit内核浏览器中支持。 效果图:zoom.htmlzoom在IE浏览器中的作用 通常,当浮动子元素导致父元素...原创 2018-09-07 17:07:09 · 4678 阅读 · 0 评论 -
zoom和transform:scale的区别
zoom简介在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等。 其支持的值类型有: 百分比值:zoom:50%,表示缩小到原来的一半。 数值:zoom:0.5,表示缩小到原来的一半。 normal关键字:zoom:normal等同于zoom:1.区别虽然Chrome/Safari浏览器支持了zoom...原创 2018-09-07 17:40:49 · 1373 阅读 · 1 评论 -
CSS hack
什么是CSS hack由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hac...原创 2018-09-07 18:54:44 · 315 阅读 · 0 评论 -
遗留问题
Clip-path : geometry-box ? Transform: ①matrix矩阵算法? ②perspective(n)? Animation:animation-fill-mode both的实例? 居中方式: “精灵元素”(ghost element)技术? CSS变量:利用这一点,可以 debug? Grid布局:grid和inline-grid有什么区别?...原创 2018-09-11 10:08:11 · 1477 阅读 · 0 评论 -
transition
这个属性是css3里的,具体的浏览器兼容性大家可以去Can I Use里面查看。语法transition: property duration timing-function delay; 定义和用法transition 属性是一个简写属性,用于设置四个过渡属性:transition-property 规定设置过渡效果的 CSS 属性的名称。transition-...原创 2018-09-03 12:27:54 · 5992 阅读 · 0 评论 -
CSS居中方式
水平居中块级元素水平居中 通过把固定宽度块级元素的margin-left和margin-right设成auto,就可以使块级元素水平居中。 参考实例:block-x-center.html内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline...原创 2018-09-07 21:37:53 · 208 阅读 · 0 评论 -
css变量
变量的声明声明变量的时候,变量名前面要加两根连词线(–)。例如: body { --foo: #7F583F; --bar: #F7EFD2;}变量不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文。如果发现变量值是不合法的,则使用缺省值,例如:body...原创 2018-09-07 21:24:58 · 478 阅读 · 0 评论 -
Firefox的默认样式
/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/...原创 2018-08-22 18:17:48 · 986 阅读 · 0 评论 -
CSS选择器
一、基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. footer id选择器,匹配所有id属性等于footer的元素实例:* { margin...原创 2018-08-23 01:07:09 · 298 阅读 · 0 评论 -
层叠的概念
前言咱们先从CSS名称入手,CSS全称Cascading Style Sheets,大家都知道Style Sheets的意思是样式表,就是由咱们写的无数的选择器组成的样式,那么Cascading层叠是什么意思,为什么把我们写的样式表叫‘层叠’样式表?咱们来看看下面这个页面代码:层叠的概念...原创 2018-08-23 01:54:55 · 1645 阅读 · 0 评论 -
元素的分类与转化
页面元素可以分为下面三种:块状元素、内联元素、内联块状元素。块状元素 常见块状元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl> 、 <l原创 2018-08-23 13:56:04 · 577 阅读 · 0 评论 -
样式来源
咱们写代码常用的就是上面三种,后两种考虑的很少,咱们来看看:浏览器自定义样式 例如chrome浏览器中,我们就可以这样设置字号和字体 浏览器默认样式 当你不为html设置任何样式时,显示在浏览器上,b标签会显示粗体、p有纵向margin、h1字号比p大一倍……这是为什么呢?这就是因为浏览器自带一个默认的样式,咱们可以在浏览器的右下角看到这些默认样式: 实例请戳:defaul...原创 2018-08-23 14:01:03 · 213 阅读 · 0 评论 -
CSS优先级
1)优先级就近原则,同权重的样式谁离标签内容近谁就优先级高; 2)载入样式以最后载入的定位为准; 3)!important优先级最高; 4)权重计算: (1)内联,如style=”“——1000, (2)id,如#content——100, (3)类、伪类和属性选择器,如.content——10, (4)标签选择器和伪元素选择器,如div p——1 (5)通配符、子选择器和相邻选择...原创 2018-08-23 14:03:25 · 11210 阅读 · 0 评论 -
样式继承
样式继承有如下规则:外层元素的样式,会被内层元素进行继承。CSS文本属性(红色)、列表属性(蓝色)都会被继承 azimuth, border-collapse, border-spacing, caption-side, color, cursor, direction, elevation, empty-cells, font-family, font-size, font-st...原创 2018-08-23 14:10:05 · 988 阅读 · 0 评论 -
书写顺序
浏览器对CSS属性也有自己一个渲染顺序,规则如下: (1)定位属性:position display float left top right bottom overflow clear z-index (2)自身属性:width height padding border margin background (3)文字样式:font-family fo...原创 2018-08-23 14:14:34 · 334 阅读 · 0 评论 -
隐藏元素
介绍五种隐藏元素的方式,分别为display、visibility、opacity、position、clip-path。display将display属性设为none确保元素不可见并且连盒模型也不生成。被隐藏的元素不占据任何空间,子元素也会一同从盒子模型中消失。给他和它的子元素添加的任何动画效果交互效果都会不起作用。任何用户对该元素直接的交互操作都不生效,此外,读屏软件?也不会读到元素的...原创 2018-08-23 14:46:06 · 250 阅读 · 0 评论 -
Clip-path
浏览器会裁剪掉裁剪区域以外的区域,不仅是背景及其它类似的内容,也包括 border、text-shadow 等。浏览器不会捕获元素裁剪区域以外的 hover、click 等事件。 IE浏览器不支持,且低版本webkit内核浏览器需要添加-webkit-前缀。具体的浏览器兼容性请戳:Can I Use语法clip-path: <clip-source> | [ &am原创 2018-08-24 10:15:02 · 1228 阅读 · 0 评论 -
b/strong和i/em的区别
一句话理解: b和i是样式上强调。 strong和em是语义上强调。 <em>用来局部强调,<strong>则是全局强调。从视觉上考虑,<em>的强调是有顺序的,阅读到某处时,才会注意到。 <strong>的强调则是一种随意无顺序的,看见某文时,立刻就凸显出来的关键词句。 <b>和原创 2018-08-28 12:59:15 · 678 阅读 · 0 评论 -
HTML4的默认样式
来源:https://www.w3.org/TR/CSS21/sample.htmlhtml, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre ...原创 2018-08-24 10:28:33 · 749 阅读 · 0 评论 -
IE的默认样式
标签 IE6 IE7 IE8 IE9 a color: #00F;text-decoration: underline; color: #06C;text-decoration: underline;原创 2018-08-24 15:15:59 · 549 阅读 · 0 评论 -
direction和unicode-bidi
css中unicode-bidi和direction属性决定了HTML或XML文字渲染方向,两个属性结合使用可以改变文字书写顺序。 direction属性有三个值:ltr : 文本流从左到右rtl : 文本流从右到左inherit : 继承父元素的设置...原创 2018-08-25 02:08:25 · 1749 阅读 · 0 评论 -
transition,transform,animation对比
transition其作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。 transformtransform指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西,拉伸,压缩,旋转,偏移。 transform属性要是加上transition的过渡特性,可谓如虎添翼。...原创 2018-09-04 19:39:33 · 734 阅读 · 0 评论 -
伪类(:)和伪元素(::)的区别
伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,CSS3才对这两个概念做了相对较清晰的概念,下面看看css2和css3中对这两个概念的定义:伪类 - pseudo classesCSS2中对伪类的定义:CSS 伪类用于向某些选择器添加特殊的效果。单单看定义看不懂在讲什么。CSS3对伪类的定义:The pseudo-class conc...原创 2019-04-10 17:52:07 · 3343 阅读 · 0 评论