![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
A_山水子农
这个作者很懒,什么都没留下…
展开
-
常见浏览器兼容性问题与解决方案
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。碰到频率:100%解决方案:CSS里 *{margin:0;padding:0;}备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。浏览器兼容问题二:块属转载 2016-06-07 12:53:34 · 625 阅读 · 0 评论 -
CSS 轮廓
1、CSS 轮廓(outline) 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。 2、所有CSS 轮廓(outline)属性 outline:在一个声明中设置所有的外边框属性outline-color、outline-style、outline-width、inherit原创 2016-06-20 14:34:28 · 572 阅读 · 0 评论 -
CSS 盒子模型
1、CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model): 不同部分的说明: Margin(外边原创 2016-06-19 16:39:58 · 610 阅读 · 0 评论 -
CSS 表格
1、表格边框 指定CSS表格边框,使用border属性。下面的例子指定了一个表格的Th和TD元素的黑色边框:table, th, td{border: 1px solid black;} 请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框,使用 border-collapse属性。table,th,td{border原创 2016-06-19 16:36:02 · 912 阅读 · 0 评论 -
CSS 列表
1、CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像2、列表 在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等) 有序列表 - 列表项的标记有数字或字母 使用CSS,可以列出进一步的样式,并可用图像作列表项标记。3、不同的列表项标记原创 2016-06-19 16:31:44 · 951 阅读 · 0 评论 -
CSS 链接
1、链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。这四个链接状态是: a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻a:link {colo原创 2016-06-19 16:30:43 · 606 阅读 · 0 评论 -
CSS(3) 字体
一、CSS 字体1、CSS字型 在CSS中,有两种类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif" 或 "Monospace") 特定字体系列 - 一个特定的字体系列(如 "Times" 或 "Courier") Serif:字体中字符在行的末端拥有额外的装饰 Sans-serif:是指无 - 这些字体在末端没有额外的装饰原创 2016-06-19 16:22:38 · 1158 阅读 · 0 评论 -
CSS(3) Text(文本)
一、CSS文本格式1、Text Color 颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定:十六进制值 - 如"#FF0000";一个RGB值 - "RGB(255,0,0)";颜色的名称 - 如"红"。一个网页的背景颜色是指在主体内的选择: body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0)...原创 2016-06-19 16:11:34 · 10103 阅读 · 0 评论 -
CSS(3) Background(背景)
一、CSS 背景1、CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-position2、背景颜色 background-color 属性定义原创 2016-06-19 16:01:42 · 1882 阅读 · 0 评论 -
CSS3 过渡
CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。1、CSS3 过渡是元素从一种样式逐渐改变为另一种的效果要实现这一点,必须规定两项内容: 指定要添加效果的CSS属性 指定效果的持续时间实例:应用于宽度属性的过渡效果,时长为 2 秒:div{ transition: width 2s; -webkit-trans...原创 2016-08-17 17:06:26 · 705 阅读 · 0 评论 -
CSS(3) 边框
一、CSS 边框1、边框样式 边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式border-style 值: none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定...原创 2016-06-20 16:17:16 · 1213 阅读 · 0 评论 -
浏览器的标准模式和怪异模式
要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。 所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的转载 2016-06-07 12:57:40 · 798 阅读 · 0 评论 -
CSS Flex布局
flex 布局 2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。通过学习,编写了flex布局demo保存在github上:https://github.com/San-Shui/flex-box-demodemo演示地址:http://www.wjnxx.com.cn原创 2017-09-14 11:07:30 · 1436 阅读 · 0 评论 -
CSS Margin(外边距)和Padding(填充)
一、CSS Margin(外边距)1、Margin margin清除周围的元素(外边框)的区域。margin没有背景颜色,是完全透明的。margin可以单独改变元素的上,下,左,右边距。也可以一次改变所有的属性。2、可能的值 auto :设置浏览器边距。这样做的结果会依赖于浏览器。 length:定义一个固定的margin(使用像素,pt,em等)。 %:定义一个使原创 2016-06-20 14:41:54 · 9957 阅读 · 1 评论 -
CSS Display(显示) 与 Visibility(可见性)
1、隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。h1.原创 2016-06-20 14:47:10 · 1538 阅读 · 0 评论 -
CSS 下拉菜单
1、基本下拉菜单当鼠标移动到指定元素上时,会出现下拉菜单。 下拉菜单实例|菜鸟教程(runoob.com) .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position:原创 2016-06-20 16:12:09 · 1161 阅读 · 0 评论 -
CSS 选择器参考手册
选择器例子例子描述CSS.class.intro选择 class="intro" 的所有元素。1#id#firstname选择 id="firstname" 的所有元素。1**选择所有元素。2elementp选择所有 <p> 元素。1element,elementdiv,p选择所有 <div> 元素和所有 <p> 元素。1element elementdiv p...转载 2016-07-14 16:15:04 · 690 阅读 · 0 评论 -
CSS3 动画
1、CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。2、浏览器支持 Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animatio...原创 2016-07-14 17:07:56 · 3301 阅读 · 0 评论 -
CSS3 渐变(Gradients)
1、CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradient原创 2016-07-07 19:15:45 · 1978 阅读 · 2 评论 -
IE10之-ms-touch-action
本文主要内容来自:http://technet.microsoft.com/zh-cn/library/hh772044 -ms-touch-action --------------- 在IE10下给元素增加触控效果 auto 默认值,允许浏览器给元素添加touch行为n转载 2016-07-06 15:10:15 · 1568 阅读 · 0 评论 -
CSS 水平对齐(Horizontal Align)
1、中心对齐,使用margin属性 块元素可以把左,右页边距设置为"自动"对齐。Note: 在IE8中使用margin:auto属性无法正常工作,除非声明 !DOCTYPEmargin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素。提示: 如果宽度是100%,对齐是没有效果的。.center{margin:auto;width:70%;backgroun原创 2016-07-06 15:44:48 · 6722 阅读 · 0 评论 -
CSS3 多列
1、CSS3 创建多列column-count 属性指定了需要分割的列数。以下实例将 元素中的文本分为 3 列:.newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}注意: Internet Explo原创 2016-07-07 19:03:58 · 791 阅读 · 0 评论 -
CSS3 图片
1、圆角图片img { border-radius: 8px;}圆角图片使用 border-radius 属性来创建圆角图片: img { border-radius: 50%;}椭圆形图片使用 border-radius 属性来创建椭圆形图片: 2、缩略图我们使用 border 属性来创建原创 2016-07-07 19:19:47 · 724 阅读 · 0 评论 -
CSS3 用户界面
1、CSS3 调整尺寸(Resizing) CSS3中,resize属性指定一个元素是否应该由用户去调整大小。这个 div 元素由用户调整大小。 (在 Firefox 4+, Chrome, 和 Safari中)<!DOCTYPE html><html><head> <style> div { border: 2px ...原创 2016-07-07 19:23:12 · 692 阅读 · 0 评论 -
CSS Positioning(定位)与Float(浮动)
一、CSS Positioning(定位)1、Positioning(定位) CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法。2、Static 定位原创 2016-06-20 14:52:40 · 5256 阅读 · 0 评论 -
CSS3 2D 转换
1、translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。<!DOCTYPE html><html><head> <style> div { width...原创 2016-07-07 18:56:51 · 729 阅读 · 0 评论 -
CSS3 3D 转换
1、rotateX() 方法rotateX()方法,围绕其在一个给定度数X轴旋转的元素<!DOCTYPE html><html><head> <style> div { width: 100px; height: 75px; background-color: red; border:...原创 2016-07-07 18:59:19 · 665 阅读 · 0 评论 -
CSS3 overflow-y 与overflow-y属性
1、overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 div{width:110px;height:110px;border:thin solid black;overflow-x:hidden;overflow-y:hidden;}这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落原创 2016-07-06 15:27:15 · 5086 阅读 · 0 评论 -
sass
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,这份参考资料使用的就是此语法。第二种比较老的语法成为缩排语法(原创 2017-09-20 22:23:17 · 1631 阅读 · 0 评论