CSS3常用属性大全
css3transform属性详解
css3transform属性详解CSS3变形是⼀些效果的集合，⽐如平移translate() 、旋转rotate()、缩放scare()和倾斜skew()效果，每个效果都被称作为变形函数（Transform Function）,它们可以操控元素发⽣旋转、缩放、和平移等变化。
CSS3的2D transform函数包括了translate()、scale()、rotate()和skew()。
translate()函数接受CSS的标准度量单位；scale()函数接受⼀个0和1之间的⼗进制值；rotate()和skew()两个函数都接受⼀个径向的度量单位值deg。
除了rotate()函数之外，每个函数都接受X轴和Y轴的参数。
CSS3变形中具有X /Y可⽤的函数：translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。
（translateX(正的向右)，translateY（负的向上））2D transform常⽤的transform-function的功能:translate()：⽤来移动元素，可以根据X轴和Ｙ轴坐标重新定位元素位置。
在此基础上有两个扩展函数：translateX()和translateY()。
scale()：⽤来缩⼩或放⼤元素，可以使⽤元素尺⼨发⽣变化。
在此基础上有两个扩展函数：scaleX()和scaleY()。
rotate()：⽤来旋转元素。
skew()：⽤来让元素倾斜。
在此基础上有两个扩展函数：skewX()和skewY()。
matrix()：定义矩阵变形，基于X轴和Y轴坐标重新定位元素位置。
3D transform常⽤的transform-function的功能:translate3d()：移元素元素，⽤来指定⼀个3D变形移动位移量translate()：指定3Ｄ位移在Ｚ轴的位移量。
scale3d()：⽤来缩放⼀个元素。
菜鸟教程css3
菜鸟教程css3菜鸟教程CSS3CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，是一种用于描述网页样式和布局的技术。
与CSS2相比，CSS3拥有更多的新特性和功能，可以让开发者更加灵活地控制网页的外观和交互效果。
无论是在移动端还是在桌面端，CSS3都被广泛应用于网页开发中。
下面将介绍CSS3的几个重要特性和用法。
1. 选择器CSS3引入了一些新的选择器，让开发者可以更精确地选择网页中的元素。
比如：属性选择器（Attribute Selectors）允许根据元素的属性值选择元素；伪类（Pseudo-classes）可以根据元素的状态或位置选择元素；伪元素（Pseudo-elements）可以创建某些元素的特定部分。
2. 盒子模型CSS3中的盒子模型（Box Model）得到了进一步的增强。
开发者可以通过box-sizing属性来控制元素的尺寸计算方式，可以选择使用content-box（默认）或者border-box。
此外，CSS3还引入了弹性盒子布局（Flexible Box Layout）和网格布局（Grid Layout），使得网页布局更加灵活和响应式。
3. 文本效果CSS3中提供了一系列的文本效果特性，可以使得网页中的文字更加生动和丰富。
比如：text-shadow可以为文本添加阴影效果；text-overflow可以控制文本超出容器时的显示方式；word-wrap可以实现自动换行；@font-face可以引入自定义的字体等。
4. 渐变和渲染CSS3中引入了线性渐变（linear gradient）和径向渐变（radial gradient）两种新的渐变方式，可以用来创建更加丰富的背景和图形效果。
此外，CSS3还提供了多种渲染方式，比如：盒子阴影（box-shadow）、边框图像（border-image）和文本轮廓（text-outline）等。
5. 过渡和动画过渡（Transition）和动画（Animation）是CSS3中用于实现元素变化效果的重要特性。
css3 手册所有
css3 手册所有一、引言CSS（层叠样式表）是一种用于描述文档样式的标记语言，具体包括字体、颜色、布局等方面的样式定义。
CSS3是CSS的最新版本，是Web开发中常用的样式定义语言之一。
本手册将详细介绍CSS3的各项属性及其使用方法。
二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一，通过元素名称来选择文档中的元素。
例如，使用`p`选择器可以选择所有的`<p>`标签。
2. 类选择器类选择器用于选择带有特定类名的元素。
通过在类名前面加上点号（.），例如`.red`，可以选择具有`red`类的元素。
3. ID选择器ID选择器用于选择具有特定ID的元素。
通过在ID名称前面加上井号（#），例如`#header`，可以选择具有`header`的ID的元素。
4. 属性选择器属性选择器用于选择具有特定属性值的元素。
通过在属性名前加上方括号（[]），例如`[type="text"]`，可以选择type属性值为"text"的元素。
5. 伪类选择器伪类选择器用于选择元素的特殊状态。
常见的伪类选择器有`hover`、`active`和`visited`等。
6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。
常见的伪元素选择器有`::before`和`::after`等。
三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。
例如，`font-family: Arial, sans-serif;`可以设置字体为Arial。
2. 颜色可以使用`color`属性设置元素的文本颜色。
例如，`color: red;`可以将文本颜色设置为红色。
3. 背景可以使用`background-color`属性设置元素的背景颜色。
例如，`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。
四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。
div均等分 css3 间隔
div均等分 css3 间隔【最新版】目录1.CSS3 简介2.div 的概述3.如何使用 CSS3 实现 div 的均等分4.CSS3 中的间隔属性5.总结正文1.CSS3 简介CSS3 是层叠样式表（Cascading Style Sheets）的第三版，它是一种用于描述 HTML 或 XML 文档样式的样式表语言。
CSS3 在 CSS2 的基础上进行了很多改进和扩展，提供了更多的功能和特性，使得网页设计更加灵活和丰富。
2.div 的概述div（Division）是 HTML 中的一个元素，用于划分文档结构。
它没有固定的样式，可以包含其他 HTML 元素，如 p（段落）、img（图片）等。
div 在网页设计中被广泛使用，主要原因是它具有灵活的样式和布局功能。
3.如何使用 CSS3 实现 div 的均等分要使用 CSS3 实现 div 的均等分，可以使用 CSS3 的 Flexbox 布局模块。
Flexbox 是一种用于在页面上布置元素的布局方式，它可以使页面元素在不同设备和屏幕尺寸上自适应排列。
以下是一个使用 Flexbox实现 div 均等分的示例：```html<!DOCTYPE html><html><head><style>.container {display: flex;flex-wrap: wrap;justify-content: space-between; }.box {width: 100px;height: 100px;background-color: red;}</style></head><body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></body></html>```在这个示例中，我们创建了一个名为 container 的 div，它包含了四个名为 box 的子 div。
20个CSSCSS3常用样式汇总
20个CSSCSS3常⽤样式汇总1.强制⽂本单⾏显⽰：white-space:nowrap;2.设置溢出⽂本显⽰为省略标记：text-overflow:ellipsis;(注：text-overflow:clip | ellipsis | ellipsis-word;（css3新增加的）其中clip表⽰直接裁切溢出的⽂本；值ellipsis表⽰⽂本溢出时，显⽰省略标记(...)，省略标记代替最后⼀个字符；值ellipsis-word表⽰⽂本溢出时，也是显⽰省略标记(...),不同的是，省略标记代替的是最后⼀个词)3.例如⼀段代码：<a href="javascript:void(0)"><img src="images/suba.gif"></a>当点击a标签⾥⾯的图⽚的时候，有虚线框，IE中图⽚还有边框，如何解决？解决办法：a{outline:none;}//主要是针对⽕狐等浏览器，但IE不⾏img{border:0;}a:active{noOutline:expression(this.onFocus=this.blur());}//解决IE6，IE7中的虚线框。
对于a标签来说，⼀般简单的解决办法是：在a标签⾥加⼊js控制，当a标签被聚焦时，强制取消焦点，这时候a标签⾃然不会有虚线框。
<a href="#" onfocus="this.blur();">测试</a>但是当连接太多的时候，⼀个⼀个的加这段代码不实⽤4.html中两张图横向回车导致间隙,怎么才能去除成为⽆间隙？例如：div 宽300px ; img 宽100px; border:0px;复制代码代码如下:<div><img /><img /><img /></div>//上⾯情况刚好显⽰三张图</p> <p><div><img /><img /><img /></div>这种情况就⽆法在横向显⽰三张图，因为回车导致两图间有间隙。
CSS3box-shadow属性的使用
CSS3box-shadow属性的使⽤每次使⽤box-shadow,都要查阅资料才能实现对应的效果,现在总结⼀下,⽅便以后查看。
⼀、语法：E {box-shadow: inset x-offset y-offset blur-radius spread-radius color};E {box-shadow: 投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊};⼆、取值：1. 阴影类型：此参数可选，默认的投影⽅式是外阴影；如果取其唯⼀值“inset”,就是将外阴影变成内阴影；2.X-offset:是指阴影⽔平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边；3. Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部；4.阴影模糊半径：此参数是可选，只能为正值，如果其值为0时，表⽰阴影不具有模糊效果，值越⼤阴影的边缘就越模糊；5. 阴影扩展半径：此参数可选，其值可为正负值，正值，则整个阴影都延展扩⼤，反之，则缩⼩6. 阴影颜⾊：此参数可选，不设定任何颜⾊时，浏览器会取默认⾊，但各浏览器默认⾊不⼀样，特别是在webkit内核下的safari和chrome浏览器将⽆⾊，也就是透明，建议不要省略此参数。
三、兼容浏览器的写法：//Firefox4.0--moz-box-shadow:投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊;//Safari and Google chrome10.0--webkit-box-shadow:投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊;//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9box-shadow:投影⽅式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜⾊;box-shadow和text-shadow⼀样可以使⽤⼀个或多个投影，如果使⽤多个投影时必须需要⽤逗号“，”分开。
css3 中对溢出的处理
css3 中对溢出的处理
在CSS3中，有以下几种对溢出进行处理的属性：
1. `overflow`属性：控制内容溢出容器时的处理方式。
常用值有：
- `overflow: visible;`（默认值）：内容可溢出容器并显示在容器外部。
- `overflow: hidden;`：内容溢出容器时将被裁剪隐藏。
- `overflow: scroll;`：内容溢出容器时显示滚动条，无论内容是否溢出。
- `overflow: auto;`：自动决定是否显示滚动条，当内容溢出容器时显示滚动条。
2. `text-overflow`属性：控制文本溢出容器时的处理方式。
常用值有：
- `text-overflow: clip;`（默认值）：直接裁剪文本，不显示省略号。
- `text-overflow: ellipsis;`：将溢出的文本显示为省略号。
3. `white-space`属性：控制文本的换行方式。
常用值有：
- `white-space: normal;`（默认值）：允许文本换行。
- `white-space: nowrap;`：禁止文本换行，超出容器宽度时会溢出。
4. `word-break`属性：控制文本在换行时的断字方式。
常用值有：
- `word-break: normal;`（默认值）：按照默认的断字规则进
行断字。
- `word-break: break-all;`：无论是否有空格或连字符，都会进行断字。
这些属性可以根据需求进行组合使用，来处理溢出的情况。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
css3属性手册
CSS3 动画属性（Animation）属性描述CSS @keyframes规定动画。
3 animation所有动画属性的简写属性，除了 animation-play-state3属性。
animation-name规定 @keyframes 动画的名称。
3 animation-duration规定动画完成一个周期所花费的秒或毫秒。
3 animation-timing-function规定动画的速度曲线。
3 animation-delay规定动画何时开始。
3 animation-iteration-count规定动画被播放的次数。
3 animation-direction规定动画是否在下一周期逆向地播放。
3 animation-play-state规定动画是否正在运行或暂停。
3 animation-fill-mode规定对象动画时间之外的状态。
3 CSS 背景属性（Background）属性描述CS background在一个声明中设置所有的背景属性。
1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
1 background-color设置元素的背景颜色。
1 background-image设置元素的背景图像。
1 background-position设置背景图像的开始位置。
1 background-repeat设置是否及如何重复背景图像。
1 background-clip规定背景的绘制区域。
3 background-origin规定背景图片的定位区域。
3 background-size规定背景图片的尺寸。
3 CSS 边框属性（Border 和Outline）属性描述CS border在一个声明中设置所有的边框属性。
1border-bottom在一个声明中设置所有的下边框属性。
1 border-bottom-color设置下边框的颜色。
2 border-bottom-style设置下边框的样式。
css3 元素对齐
css3 元素对齐CSS3是一种强大的样式表语言，它提供了许多用于对齐元素的属性和方法。
在本文中，我们将讨论一些常见的 CSS3 元素对齐技术，以及如何使用它们来实现各种布局。
一、水平对齐1. text-align 属性text-align 属性用于水平对齐文本。
它可以设置为 left、right、center 或 justify，分别代表左对齐、右对齐、居中和两端对齐。
例如：```.container {text-align: center;}```2. margin 属性margin 属性可以用于水平对齐块级元素。
设置 margin-left 和margin-right 属性的值为 auto 可以使元素水平居中对齐。
例如：```.container {width: 50%;margin: 0 auto;}```3. flexbox 布局flexbox 是一种强大的布局模式，它可以轻松实现水平和垂直对齐。
使用 display: flex 将容器元素设置为 flex 容器，然后使用justify-content 属性来指定子元素的水平对齐方式。
例如：```.container {display: flex;justify-content: center;}```二、垂直对齐1. line-height 属性line-height 属性用于设置行高，它可以用于垂直对齐内联元素和行内块元素。
将 line-height 属性的值设置为等于容器高度可以使元素垂直居中对齐。
例如：```.container {height: 100px;line-height: 100px;}```2. vertical-align 属性vertical-align 属性用于垂直对齐表格单元格中的内容。
它可以设置为 top、middle、bottom 或 baseline，分别代表顶部对齐、居中对齐、底部对齐和基线对齐。
例如：```td {vertical-align: middle;}```3. flexbox 布局flexbox 布局也可以用于垂直对齐。
CSS3新增属性
CSS3新增属性⼀、transform变换效果 CSS3 提供了元素变形效果，也叫做变换。
它可以将元素实现旋转、缩放和平移的功能。
属性有两个：transform 和 transform-origin对于 transform 的属性值，具体如下表：属性值说明none⽆变换translate(长度值或百分数值) translateX(长度值或百分数值) translatY(长度值或百分数值)在⽔平⽅向、垂直⽅向或两个⽅向上平移元素。
scale(数值) scaleX(数值) scaleY(数值)在⽔平⽅向、垂直⽅向或两个⽅向上缩放元素rotate(⾓度)旋转元素skew(⾓度) skewX(⾓度) skewY(⾓度)在⽔平⽅向、垂直⽅向或两个⽅向上使元素倾斜⼀定的⾓度matrix(4~6 数值，逗号隔开)指定⾃定义变换//向⽔平和垂直各移动 200 像素，也可以使⽤百分⽐transform: translate(200px,200px);//向⽔平平移 200 像素，不加后⾯的 0 也可以transform: translate(200px,0);transform: translateX(200px);//向垂直平移 200 像素transform: translate(0,200px);transform: translateY(200px);//⽔平、垂直⽅向放⼤ 1.5 倍transform: scale(1.5);transform: scale(1.5,1.5);//⽔平、垂直⽅向缩⼩ 0.8 倍transform: scale(0.8,0.8);//⽔平⽅向放⼤ 1.5 倍transform: scaleX(1.5);//垂直⽅向放⼤ 1.5 倍transform: scaleY(1.5);//旋转元素，0 ~ 360 度之间，负值均可transform: rotate(-45deg);//倾斜元素，0 ~ 360 度之间，负值均可transform: skew(45deg, 20deg);//⽔平倾斜元素，0 ~ 360 度之间，负值均可transform: skewX(45deg);//垂直倾斜元素，0 ~ 360 度之间，负值均可transform: skewY(45deg);//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧transform: matrix(1,0,0,1,30,30);//不同的值可以累计，通过空格分割transform: rotate(-45deg) scale(1.5);⼆．transform-origintransform-origin 属性可以设置变换的起点。
3.2 CSS3样式属性
6.@font-face属性（使用服务器端字体）
@font-face{ }
font-famliy:字体名称; src:字体路径;
CSS3背景样式属性
网页能通过背景图像给浏览者留下深刻的印象，不同主题的网站 特色往往会体现在网站背景上，合理控制背景颜色和背景图像至 关重要，在网页设计制作中，通过CSS3的一系列背景样式属性 来控制网页背景的显示效果，如背景颜色、背景图像背景图像平 铺方式、背景图像位置等属性。
background-image:linear-gradient(渐变角度,颜色值1,颜色值2,...,颜色值n)
CSS3渐变属性
2.径向渐变 径向渐变是网页中另外一种常用的渐变，在径向渐变过程中，起 始颜色会从一个中心点开始，依据椭圆或圆形形状进行扩张渐变 。运用CSS3中的“background-image:radial-gradient(参数值 );”样式可以实现线性渐变效果，其基本语法格式如下。
P{font-family:”微软雅黑”;}
2.font-size属性(字体大小)
p{font-size:12px;}
3.color属性（字体颜色）
p{color:#FF00000;}
CSS3文本样式属性
4.font-style属性(字体风格)
p{font-style:italic;}
5.font-weight属性(字体粗细)
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2,...,颜色值n)
CSS3边框样式属性
网页制作中元素的边框是经常需要美化和修饰的，通过HTML定 义的元素边框风格单一，无法满足网页美观的要求。在CSS样式 中，通过对boder属性进行定义边框的宽度、样式、颜色、圆角 边框等，可以使网页元素的边框有更丰富的样式，从而使元素的 效果更加美观。
CSS3常用属性大全
CSS3动画属性(Animation)@keyframes//规定动画。
animation//所有动画属性的简写属性，除了animation-play-state属性。
animation-name//规定@keyframes动画的名称。
animation-duration//规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function//规定动画的速度曲线。
animation-delay//规定动画何时开始。
animation-iteration-count//规定动画被播放的次数。
animation-direction//规定动画是否在下一周期逆向地播放。
animation-play-state//规定动画是否正在运行或暂停。
animation-fill-mode//规定对象动画时间之外的状态。
CSS背景属性(Background)background-attachment//设置背景图像是否固定或者随着页面的其余部分滚动。
background //在一个声明中设置所有的背景属性。
background-color //设置元素的背景颜色。
background-image //设置元素的背景图像。
background-position //设置背景图像的开始位置。
background-repeat //设置是否及如何重复背景图像。
background-clip //规定背景的绘制区域。
background-origin //规定背景图片的定位区域。
background-size //规定背景图片的尺寸。
CSS边框属性(Border和Outline)border //在一个声明中设置所有的边框属性。
border-bottom //在一个声明中设置所有的下边框属性。
border-bottom-color //设置下边框的颜色。
border-bottom-style //设置下边框的样式。
人机交互界面设计第五章 CSS3详解_OK
07 css3中的动画
07-01 2d变形
07-03 3d变形
07-02 css3过渡
07-04 animation动画
2
01 css3概述
CSS(Cascading Style Sheets)，即层叠样式表。他用来设置网页中各种标签的样式，如设 置文字大小，颜色，行高，背景等等。“层叠”是指当在 HTML文件中引用多个样 式文件时，浏览器将依据层叠顺序及就近原则进行处理，以避免发生冲突。
Css部分： p a{
color:#ff0000; font-size:14px; }
11
03 css的声明及选择器
通配符选择器
它由星号*来表示选择器的名称，可以定义所有的网页元素显示 格式。通配符一般用于统一浏览器设置
例如： *{ margin:0; padding:0; } 意思是，将该页面的所有标签样式 中的外边距、内边距重置为0，来统 一浏览器样式
16
05 css3基本属性
----背景属性 背景图片
图片路径的设置与之前插入图片一样，分为相对路径和绝对路径。 语法为background-image:url(图片路径)
背景位置
在网页中需要将背景图片放在我们希望的位置，所以可以通过backgroundposition属性来改变默认的位置。 background-position：top center background-position:10px 10px background-position:50% 50% background-position:left 20px top 10px
20
05 css3基本属性
----背景属性 案例
请完善html及css。将素材提供的bg.jpg放到页面中间，并且可以根据页面大小自 动缩放，不重复，背景图片以外填充#dff2f4天蓝色。文字大小为20像素。
css3面试题及答案
css3面试题及答案CSS（层叠样式表）是前端开发中用于控制网页样式的一种标记语言。
CSS3是CSS的升级版，引入了许多新的特性和功能。
在前端开发工作中，掌握CSS3的知识是必要的，而在面试过程中，也经常会被问及CSS3的相关问题。
本文将提供一些常见的CSS3面试题及它们的相应答案。
一、CSS3选择器1. 介绍CSS3选择器的概念及常用的几种选择器。
答案：CSS3选择器是用于选择HTML或XML文档中的特定元素的一种方式。
常用的CSS3选择器包括：- 元素选择器（Element Selector）：通过元素名称来选择元素，例如p选择器用于选择所有的段落元素。
- 类选择器（Class Selector）：通过元素类名来选择元素，以“.”开头，例如.class选择器用于选择class属性为class的元素。
- ID选择器（ID Selector）：通过元素ID来选择元素，以“#”开头，例如#id选择器用于选择id属性为id的元素。
- 属性选择器（Attribute Selector）：通过元素的属性来选择元素，例如[type="text"]选择器用于选择type属性为text的元素。
- 伪类选择器（Pseudo-class Selector）：通过元素的状态或位置来选择元素，以“:”开头，例如:hover选择器用于选择鼠标悬停在元素上的状态。
2. 什么是伪元素选择器？请举例说明。
答案：伪元素选择器用于选择元素中的特定部分或位置，以“::”开头。
常用的伪元素选择器包括：- ::before：在元素内容之前插入内容。
- ::after：在元素内容之后插入内容。
- ::first-letter：选择元素的第一个字母。
- ::first-line：选择元素的第一行。
举例说明：使用::before伪元素选择器可以在某个元素的内容前插入内容，例如：```p::before {content: "前缀 ";}```二、CSS3动画与过渡1. CSS3过渡和动画有什么区别？答案：CSS3过渡（Transition）是在元素的一种状态到另一种状态之间平滑地过渡，可以实现简单的动画效果。
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接
CSS3选择器——属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、伪链接属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。
CSS3中新增了 3 种属性选择器：E[att^=value]、E[att$=value] 和 E[att*=value]1.E[att^=value] 属性选择器 E[att^=value] 属性选择器是指选择名称为 E 的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的⼦字符串。
其中 E 是可以省略的，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id^=section] 表⽰匹配包含 id 属性，且 id 属性值是以 “section” 字符串开头的 div 元素。
2.E[att$=value] 属性选择器 E[att$=value] 属性选择器是指选择器名称为 E 的标记，且该选择器定义了 att 属性，att 属性值包含后缀为 value 的⼦字符串。
与E[att$=value]选择器⼀样，E元素可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id$=section]表⽰匹配包含 id 属性，且 id 属性值是以 “section” 结尾的 div 元素。
3.E[att*=value] 属性选择器 E[att*=value] 选择器⽤于选择名为 E 的标记，且该标记定义了 att 属性，att 属性值包含 value ⼦字符串，该选择器与前两个选择器⼀样，E 元素也可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。
如：div[id*=section] 表⽰匹配包含 id 属性，且 id 属性包含 “section” 字符串的 div 元素。
关系选择器 CSS3中的关系选择器主要包括⼦代选择器和兄弟选择器，其中⼦代选择器由符号 “>” 连接，兄弟选择器由符号 “+”和 “~” 连接。
1.⼦代选择器（>） ⼦代选择器主要⽤来选择某个元素的第⼀级⼦元素，如希望选择只作为 h1 元素⼦元素的 strong 元素，可以写为：h1 > strong。
css3盒子模型中的box-sizing属性的使用_boxsizing常用的3种属性
css3盒⼦模型中的box-sizing属性的使⽤_boxsizing常⽤的3种属性box-sizing属性⽤来定义元素的width和height所表⽰的区域,该属性⼀般有三种值：content-box、border-box、inherit。
其中inherit表⽰box-sizing的值应该从⽗元素继承。
content-box和border-box的主要区别就是元素的width和height的值包不包括border、padding这两个属性的值。
⼀、content-boxcontent-box也叫标准盒⼦模型，是默认值。
它的width组成仅仅只有content区域（不包括padding区域和border区域）举个例⼦，如果该元素的宽度为100px，那么这表⽰该元素的内容区域宽度为100px,再如果padding为10px,border的宽度为10px，那么它的实际宽度为width+(padding-left)+(padding-right)+(border-left-width)+(border-right-width)=100px+10px+10px+10px+10px=140px;下图是标准盒⼦模型的⽰意图：⼆、border-boxborder-box也叫IE盒⼦模型,它的width组成由content区域、padding区域、border区域举个例⼦，如果这个元素的宽度为100px，那么它的实际宽度就是100px,再如果它的padding为10px,border的宽度为10px，那么该元素的内容区域宽度为width-(padding-left)-(padding-right)-(width-left-width)-(width-right-width)=100px-10px-10px-10px-10px=60px;下图是IE盒⼦模型的⽰意图：。
CSS3学习
语法描述:语法描述:4.其他CSS3选择器1.E~F:通用兄弟元素选择器。
选择匹配F的所有元素，且匹配元素位于匹配E的元素后面。
2.E:not(s):否定伪类选择器。
选择匹配E的所有元素，且过滤掉匹配s选择符的任意元素。
E:not(s)选择器相当于二次过滤，适合精确选择元素。
E[att*="val"]属性att的值包含"val"字符串的元素CSS3学习一、CSS3新增选择器1.CSS3属性选择器E[att^="val"]属性att的值以"val"开头的元素E[att$="val"]属性att的值以"val"结尾的元素作用：这个属性允许你为元素添加边框背景。
2.border-image属性二、CSS3设置边框属性1.border-radius属性作用:这个属性允许你为元素添加圆角边框。
语法:3.E:target:目标伪类选择器类型。
选择器匹配E的所有元素,且匹配元素被相关URL指向。
该选选择器,只有当存在的URL指向该匹配的元素时,样式效果才能够起效。
source slice width outset repeat语法描述:值h-shadowv-shadowblurspreadcolor语法：语法描述:语法：语法描述：值border-boxpadding-boxcontent-box 语法：语法描述:值lengthpercentagecovercontain四、CSS3设置文本字体颜色描述background-clip:border-box\padding-box\content-box描述默认值。
从边框区域向外裁剪背从补白区域外裁剪背景从内容区域向外裁剪背景定义边框背景图像的偏移位定义边框背景图像的重复性,重复(repeat(round)定义边框的背景图片源,即定义如何裁切背景图丁一边看背景图像的显示大小(即3.box-shadow属性作用:可以设置一个或多个下拉阴影的框。
css3之display属性
css3之display属性1、定义 语法：display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex 作⽤：设置元素如何显⽰ 初始值：inline 应⽤于：所有元素 继承性：⽆ 注：只有⼀个元素属于inline或是inline-block，其⾝上的vertical-align属性才会起作⽤2、取值 none：隐藏元素并脱离⽂档流，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 inline：指定对象为内联元素；不⽀持设置宽、⾼样式；宽度取决于内容；⾮独占⼀⾏显⽰ block：指定对象为块元素；不设置宽度时，宽度为⽗元素宽度；独占⼀⾏显⽰；⽀持设置宽、⾼样式 inline-block：指定对象为内联块元素；宽度取决于内容；⾮独占⼀⾏显⽰；⽀持设置宽、⾼样式 list-item：指定对象为列表项⽬；不设置宽度时，宽度撑满⼀⾏；⽀持设置宽、⾼样式；独占⼀⾏显⽰ table：指定对象作为块元素级的表格，类同于html标签<table> inline-table：指定对象作为内联元素级的表格，类同于html标签<table> table-caption：指定对象作为表格标题，类同于html标签<caption> table-cell：指定对象作为表格单元格，类同于html标签<td> table-row：指定对象作为表格⾏，类同于html标签<tr> table-row-group：指定对象作为表格⾏组，类同于html标签<tbody> table-column：指定对象作为表格列，类同于html标签<col> table-column-group：指定对象作为表格列组显⽰，类同于html标签<colgroup> table-header-group：指定对象作为表格标题组，类同于html标签<thead> table-footer-group：指定对象作为表格脚注组，类同于html标签<tfoot>3、⽰例<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>display</title><style>body{font:14px/1.5 georgia,simsun,arial;}h1{margin:10px 0;font-size:20px;}ul{margin:0;padding:0;list-style:none;}.table{display:table;border-collapse:collapse;border:1px solid #ccc;}.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}.table-column-group{display:table-column-group;}.table-column{display:table-column;width:100px;}.table-row-group{display:table-row-group;}.table-row{display:table-row;}.table-row-group .table-row:hover,.table-footer-group .table- row:hover{background:#f6f6f6;}.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}.table-header-group{display:table-header-group;background:#eee;font- weight:bold;}.table-footer-group{display:table-footer-group;}</style></head><body><h1>display构造的table⼩例⼦，IE7及以下浏览器不⽀持本⽰例</h1><div class="table"><h2 class="table-caption">花名册：</h2><div class="table-column-group"> <div class="table-column"></div> <div class="table-column"></div> <div class="table-column"></div> </div><div class="table-header-group"> <ul class="table-row"><li class="table-cell">序号</li> <li class="table-cell">姓名</li> <li class="table-cell">年龄</li> </ul></div><div class="table-footer-group"> <ul class="table-row"><li class="table-cell">footer</li> <li class="table-cell">footer</li> <li class="table-cell">footer</li> </ul></div><div class="table-row-group"><ul class="table-row"><li class="table-cell">1</li><li class="table-cell">John</li> <li class="table-cell">19</li></ul><ul class="table-row"><li class="table-cell">2</li><li class="table-cell">Mark</li> <li class="table-cell">21</li></ul><ul class="table-row"><li class="table-cell">3</li><li class="table-cell">Kate</li> <li class="table-cell">26</li></ul></div></div></body></html>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS3 动画属性（Animation）@keyframes //规定动画。
animation //所有动画属性的简写属性，除了animation-play-state 属性。
animation-name //规定@keyframes 动画的名称。
animation-duration //规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function //规定动画的速度曲线。
animation-delay //规定动画何时开始。
animation-iteration-count //规定动画被播放的次数。
animation-direction //规定动画是否在下一周期逆向地播放。
animation-play-state //规定动画是否正在运行或暂停。
animation-fill-mode //规定对象动画时间之外的状态。
CSS 背景属性（Background）background //在一个声明中设置所有的背景属性。
background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。
background-color //设置元素的背景颜色。
background-image //设置元素的背景图像。
background-position //设置背景图像的开始位置。
background-repeat //设置是否及如何重复背景图像。
background-clip //规定背景的绘制区域。
background-origin //规定背景图片的定位区域。
background-size //规定背景图片的尺寸。
CSS 边框属性（Border 和Outline）border //在一个声明中设置所有的边框属性。
border-bottom //在一个声明中设置所有的下边框属性。
border-bottom-color //设置下边框的颜色。
border-bottom-style //设置下边框的样式。
border-bottom-width //设置下边框的宽度。
border-color //设置四条边框的颜色。
border-left //在一个声明中设置所有的左边框属性。
border-left-color //设置左边框的颜色。
border-left-style //设置左边框的样式。
border-left-width //设置左边框的宽度。
border-right //在一个声明中设置所有的右边框属性。
border-right-color //设置右边框的颜色。
border-right-style //设置右边框的样式。
border-right-width //设置右边框的宽度。
border-style //设置四条边框的样式。
border-top //在一个声明中设置所有的上边框属性。
border-top-color //设置上边框的颜色。
border-top-style //设置上边框的样式。
border-top-width //设置上边框的宽度。
border-width //设置四条边框的宽度。
outline //在一个声明中设置所有的轮廓属性。
outline-color //设置轮廓的颜色。
outline-style //设置轮廓的样式。
outline-width //设置轮廓的宽度。
border-bottom-left-radius //定义边框左下角的形状。
border-bottom-right-radius //定义边框右下角的形状。
border-image //简写属性，设置所有border-image-* 属性。
border-image-outset //规定边框图像区域超出边框的量。
border-image-repeat //图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
border-image-slice //规定图像边框的向内偏移。
border-image-source //规定用作边框的图片。
border-image-width //规定图片边框的宽度。
border-radius //简写属性，设置所有四个border-*-radius 属性。
border-top-left-radius //定义边框左上角的形状。
border-top-right-radius //定义边框右下角的形状。
box-decoration-break //box-shadow //向方框添加一个或多个阴影。
Box 属性overflow-x //如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-y //如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
overflow-style //规定溢出元素的首选滚动方法。
Rotation //围绕由rotation-point 属性定义的点对元素进行旋转。
rotation-point //定义距离上左边框边缘的偏移点。
Color 属性color-profile //允许使用源的颜色配置文件的默认以外的规范。
opacity //规定书签的级别。
rendering-intent //允许使用颜色配置文件渲染意图的默认以外的规范。
Content for Paged Media 属性bookmark-label //规定书签的标记。
bookmark-level //规定书签的级别。
bookmark-target //规定书签链接的目标。
float-offset //将元素放在float 属性通常放置的位置的相反方向。
hyphenate-after //规定连字单词中连字符之后的最小字符数。
hyphenate-before //规定连字单词中连字符之前的最小字符数。
hyphenate-character //规定当发生断字时显示的字符串。
hyphenate-lines //指示元素中连续断字连线的最大数。
hyphenate-resource //规定帮助浏览器确定断字点的外部资源（逗号分隔的列表）。
hyphens //设置如何对单词进行拆分，以改善段落的布局。
image-resolution //规定图像的正确分辨率。
marks //向文档添加裁切标记或十字标记。
string-set //CSS 尺寸属性（Dimension）height //设置元素高度。
max-height //设置元素的最大高度。
max-width //设置元素的最大宽度。
min-height //设置元素的最小高度。
min-width //设置元素的最小宽度。
width //设置元素的宽度。
可伸缩框属性（Flexible Box）box-align //规定如何对齐框的子元素。
box-direction //规定框的子元素的显示方向。
box-flex //规定框的子元素是否可伸缩。
box-flex-group //将可伸缩元素分配到柔性分组。
box-lines //规定当超出父元素框的空间时，是否换行显示。
box-ordinal-group //规定框的子元素的显示次序。
box-orient //规定框的子元素是否应水平或垂直排列。
box-pack //规定水平框中的水平位置或者垂直框中的垂直位置。
CSS 字体属性（Font）font //在一个声明中设置所有字体属性。
font-family //规定文本的字体系列。
font-size //规定文本的字体尺寸。
font-size-adjust //为元素规定aspect 值。
font-stretch //收缩或拉伸当前的字体系列。
font-style //规定文本的字体样式。
font-variant //规定是否以小型大写字母的字体显示文本。
font-weight //规定字体的粗细。
内容生成（Generated Content）content //与:before 以及:after 伪元素配合使用，来插入生成内容。
counter-increment //递增或递减一个或多个计数器。
counter-reset //创建或重置一个或多个计数器。
quotes //设置嵌套引用的引号类型。
crop //允许被替换元素仅仅是对象的矩形区域，而不是整个对象。
move-to //从流中删除元素，然后在文档中后面的点上重新插入。
page-policy //确定元素基于页面的occurrence 应用于计数器还是字符串值。
Grid 属性grid-columns //规定网格中每个列的宽度。
grid-rows //规定网格中每个列的高度。
Hyperlink 属性target //简写属性，设置target-name、target-new以及target-position属性。
target-name //规定在何处打开链接（链接的目标）。
target-new //规定目标链接在新窗口还是在已有窗口的新标签页中打开。
target-position //规定在何处放置新的目标链接。
CSS 列表属性（List）list-style //在一个声明中设置所有的列表属性。
list-style-image //将图象设置为列表项标记。
list-style-position //设置列表项标记的放置位置。
list-style-type //设置列表项标记的类型。
marker-offset //设置或检索标记容器和主容器之间水平补白。
即两个容器靠近的一边的间距。
CSS 外边距属性（Margin）margin //在一个声明中设置所有外边距属性。
margin-bottom //设置元素的下外边距。
margin-left //设置元素的左外边距。
margin-right //设置元素的右外边距。
margin-top //设置元素的上外边距。
Marquee 属性marquee-direction //设置移动内容的方向。
marquee-play-count //设置内容移动多少次。
marquee-speed //设置内容滚动得多快。
marquee-style //设置移动内容的样式。
多列属性（Multi-column）column-count //规定元素应该被分隔的列数。
column-fill //规定如何填充列。
column-gap //规定列之间的间隔。
column-rule //设置所有column-rule-* 属性的简写属性。
column-rule-color //规定列之间规则的颜色。
column-rule-style //规定列之间规则的样式。
column-rule-width //规定列之间规则的宽度。