CSS 参考手册(CSS 属性组明细对照表)

css属性⼤全中⽂对照表Aalign-content 规定弹性容器内的⾏之间的对齐⽅式，当项⽬不使⽤所有可⽤空间时。

align-items 规定弹性容器内项⽬的对齐⽅式。

align-self 规定弹性容器内所选项⽬的对齐⽅式。

all 重置所有属性（除了 unicode-bidi 和 direction）。

animation 所有 animation-* 属性的简写属性。

animation-delay 规定开始动画的延迟。

animation-direction 规定动画是向前播放、向后播放还是交替播放。

animation-duration 规定动画完成⼀个周期应花费的时间。

animation-fill-mode 规定元素在不播放动画时（在开始之前、结束之后、或同时）的样式。

animation-iteration-count 规定动画的播放次数。

animation-name 规定 @keyframes 动画的名称。

animation-play-state 规定动画是播放还是暂停。

animation-timing-function 规定动画的速度曲线。

Bbackface-visibility 定义当⾯对⽤户时元素的背⾯是否应可见。

background 所有 background-* 属性的简写属性。

background-attachment 设置背景图像是与页⾯的其余部分⼀起滚动还是固定的。

background-blend-mode 规定每个背景图层（颜⾊/图像）的混合模式。

background-clip 定义背景（颜⾊或图像）应在元素内延伸的距离。

background-color 规定元素的背景⾊。

background-image 规定元素的⼀幅或多幅背景图像。

background-origin 规定背景图像的初始位置。

background-position 规定背景图像的位置。

background-repeat 设置是否以及如何重复背景图像。

Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位：几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc pica 1in = 6pc相对单位：较常用em 1em = 相应字体的font-size值ex 1ex = 相应字体中的小写x字母的高度值，较难求得，一般取0.5em px 最为常用的CSS中的元素分类display 设定元素所属类别，不可继承none(设定为不显示在屏幕上)block(块级元，包括 P,H1-H6,list,div,body)inline(内联元，包括 a,em,span)list-item(列表元，如 LI)颜色与背景类color 设置文字颜色#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色，格式同上；不可继承，可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设置背景图片，默认为none，不可继承，可用于所有元url(imageURL) nonebody{backround-image:url(back.jpg);}background-repeat 设置背景图片是否重复排列，不可继承，用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列，默认值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否卷动，不可继承，用于所有元scroll(随网页卷动，默认值) fixed(不随网页卷动)BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置，不可继承，用于块级元和可替换元top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性，不要求顺序，各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。

cascading style sheet手册范文模板及概述**1. 引言**1.1 概述本篇长文将介绍CSS（Cascading Style Sheets）手册的范文模板及概述。

CSS 是一种用于描述HTML文档显示样式的语言，通过定义元素的外观和布局来美化网页。

为了方便开发人员学习和使用CSS，本手册提供了基础知识、常用样式属性、布局与盒模型以及高级技巧与技术实践等内容。

1.2 文章结构本文按照逻辑顺序分为六个主要部分。

首先是引言部分，对文章进行概述和介绍。

其次是CSS基础知识，包括CSS简介、语法和选择器等内容。

第三部分涵盖了CSS样式属性，包括字体样式属性、背景样式属性和边框样式属性等。

接着是布局与盒模型部分，讲解盒模型概述、定位与浮动以及响应式布局等相关内容。

第五部分将介绍高级CSS技巧与技术实践，包括Flexbox布局技术、动画与过渡效果以及平台兼容性注意事项等。

最后，在结论中对全文进行总结并给出未来进一步学习的建议。

1.3 目的本篇长文的目的是为读者提供一个全面且易于理解的CSS手册范文模板，并通过详细介绍各个部分的内容，帮助读者深入了解CSS的基础知识和常用技巧。

通过本手册，读者将能够掌握如何使用CSS来实现网页的样式及布局，并获得一些高级技巧与技术实践，以便在实际开发中更加灵活地运用CSS。

以上是关于文章“1. 引言”部分内容的详细清晰描述。

2. CSS基础知识:2.1 CSS简介:CSS（层叠样式表）是一种用于定义网页样式和布局的标记语言，它可以控制HTML文档中的元素如何显示在浏览器中。

通过使用CSS，我们可以改变文本、图像、背景、边框等方面的样式，以及控制元素的大小、位置和对齐方式。

2.2 CSS语法:CSS的语法由选择器和声明块组成。

选择器用于选择要应用样式的HTML元素，而声明块则包含了一系列属性以及其对应的值。

一个基本的CSS规则由选择器和声明块构成，例如：```h1 {color: blue;font-size: 24px;}```上述例子中，`h1`是选择器，它表示要应用该规则的HTML元素为所有的`<h1>`标签。

CSS 背景属性（Background）属性描述CSS background在一个声明中设置所有的背景属性。

1 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

1 background-color设置元素的背景颜色。

1 background-image设置元素的背景图像。

1 background-position设置背景图像的开始位置。

1 background-repeat设置是否及如何重复背景图像。

1CSS 边框属性（Border 和Outline）属性描述CSS border在一个声明中设置所有的边框属性。

1 border-bottom在一个声明中设置所有的下边框属性。

1 border-bottom-color设置下边框的颜色。

2 border-bottom-style设置下边框的样式。

2 border-bottom-width设置下边框的宽度。

1 border-color设置四条边框的颜色。

1 border-left在一个声明中设置所有的左边框属性。

1 border-left-color设置左边框的颜色。

2 border-left-style设置左边框的样式。

2 border-left-width设置左边框的宽度。

1 border-right在一个声明中设置所有的右边框属性。

1 border-right-color设置右边框的颜色。

2 border-right-style设置右边框的样式。

2 border-right-width设置右边框的宽度。

1 border-style设置四条边框的样式。

1 border-top在一个声明中设置所有的上边框属性。

1 border-top-color设置上边框的颜色。

2 border-top-style设置上边框的样式。

2 border-top-width设置上边框的宽度。

css属性大全CSS属性大全。

CSS（Cascading Style Sheets）是一种用来为网页添加样式和布局的样式表语言。

它可以控制网页的字体、颜色、间距、边框、背景等各种样式，是网页设计中不可或缺的一部分。

在这篇文档中，我们将详细介绍CSS中的各种属性，帮助您更好地掌握CSS的应用。

1. 字体属性。

字体属性用于设置网页中文本的字体样式、大小、粗细等。

常用的属性包括font-family（设置字体系列）、font-size（设置字体大小）、font-weight（设置字体粗细）、font-style（设置字体样式）等。

2. 文本属性。

文本属性用于设置文本的对齐方式、行高、间距等。

常用的属性包括text-align（设置文本对齐方式）、line-height（设置行高）、letter-spacing（设置字符间距）、word-spacing（设置单词间距）等。

3. 背景属性。

背景属性用于设置网页元素的背景样式。

常用的属性包括background-color（设置背景颜色）、background-image（设置背景图片）、background-repeat（设置背景重复方式）、background-position（设置背景位置）等。

4. 边框属性。

边框属性用于设置网页元素的边框样式。

常用的属性包括border-width（设置边框宽度）、border-style（设置边框样式）、border-color（设置边框颜色）、border-radius（设置边框圆角）等。

5. 盒模型属性。

盒模型属性用于设置网页元素的尺寸、内边距、外边距等。

常用的属性包括width（设置元素宽度）、height（设置元素高度）、padding（设置内边距）、margin（设置外边距）等。

6. 定位属性。

定位属性用于设置网页元素的位置。

常用的属性包括position（设置定位方式）、top（设置元素顶部位置）、left（设置元素左侧位置）、z-index（设置元素层级）等。

css参考文献CSS是指层叠样式表，是一种用于为网页添加样式和布局的语言。

它是网站设计中不可或缺的一部分，可以控制网页元素的样式、大小、位置和行为等。

CSS样式可以通过外部样式表、内部样式表和内联样式表嵌入到网页中。

CSS参考文献可以帮助网页设计师和开发人员熟悉CSS语言、快速定位和解决问题。

下面是一些常用的CSS参考文献：1. CSS权威指南（CSS: The Definitive Guide）：该书是CSS方面的经典著作之一，由Eric A. Meyer撰写，已经出版到第四版。

本书从基础知识讲起，深入浅出地介绍了CSS的各种特性与应用场景。

适合初学者和专业人士阅读。

2. CSS揭秘（CSS Secrets）：该书由前Google工程师LeaVerou撰写，内容涵盖了一些高级CSS技巧和实用小技巧，如形状、渐变、动画、弹性布局等。

本书中的案例和示例非常实用，适合有经验的前端开发人员学习。

3. CSS布局经典实例（CSS Layout Cookbook）：该书由Ian Yates和Smashing Magazine团队合著，收录了100多个CSS布局解决方案和实例。

该书从网页布局的基础开始，逐步介绍各种布局技巧和应用场景。

本书的实例非常丰富，适合学习CSS布局的初学者和开发人员。

4. CSS3手册（CSS3: The Missing Manual）：该书由David Sawyer McFarland撰写，介绍了CSS3的新特性和语法规则。

本书涵盖了响应式设计、媒体查询、变形和过渡等重要的CSS3技术。

适合已经熟悉CSS基础的开发人员学习。

5. CSS参考手册（CSS Pocket Reference）：该书由Eric A. Meyer撰写，是一本小型的CSS参考手册。

该书简洁明了地列出了CSS的各种语法规则和属性值，是一个非常实用的工具书。

以上是一些常用的CSS参考文献。

除此之外，还可以通过各种网站和博客学习CSS技巧和实例。

css 属性参考手册(CSS Property Reference Manual) CSS property group:backgroundtextTypefaceOutline and outlineMarginpaddinglistContent generationsizeLocationPrintformPseudo classPseudo elementTips and notes:Property: the property column points to syntax, instances, browser support, and so on.The CSS: "CSS" column indicates which version of the property is defined in the CSS Version (CSS1 or CSS2).Tip: the W3School CSS reference manual is periodically tested in all mainstream browsers. Final test time: October 8, 2009.CSS background property (Background)Property description CSSBackground sets all of the background properties in a statement. OneBackground-attachment sets whether the background image is fixed or scrolls along with the rest of the page. OneBackground-color sets the background color of the element. One Background-image sets the background image of the element. One Background-position sets the start position of the backgroundimage. OneBackground-repeat settings and how to repeat the background image. OneCSS border properties (Border and Outline)Property description CSSBorder sets all of the border properties in a declaration. OneBorder-bottom sets all of the lower border properties in a declaration. OneBorder-bottom-color sets the color of the next border.Two Border-bottom-style sets the style of the next border.Two Border-bottom-width sets the width of the next border.One Border-color sets the color of the four borders. OneBorder-left sets all the left border attributes in a declaration. OneBorder-left-color sets the color of the left border. Two Border-left-style sets the style of the left border. TwoBorder-left-width sets the width of the left border. OneBorder-right-colorsets the color of the right border.Two Border-right-style sets the style of the right border.Two Border-right-width sets the width of the right border.One Border-top-color sets the color of the upper border.Two Border-top-stylesets the style of the upper border.TwoBorder-top-width sets the width of the upper border.One Border-width sets the width of the four borders. One Outline-color sets the color of the outline. TwoOutline-style sets the outline style. TwoBorder-right sets all right border attributes in a declaration.OneBorder-style sets the style of the four borders. OneBorder-top sets all of the upper border properties in a declaration. OneOutline sets all of the outline attributes in a declaration.Two Outline-width sets the width of the outline. TwoCSS text attributes (Text)Property description CSSColor sets the color of the text. OneDirection specifies the direction / writing direction of the text. TwoLETTER-SPACING sets character spacing. OneLine-height sets the line height. OneText-align specifies the horizontal alignment of text. OneText-decoration specifies the decorative effect added to the text. OneText-indent provides the first line indent text block. OneText-shadow specifies the shadow effect added to the text. TwoText-transform controls text case. OneUnicode-bidi sets text direction. TwoWhite-space specifies how to handle the space in an element. One Word-spacing sets word spacing. OneCSS font property (Font)Property description CSSFont sets all font attributes in a declaration. OneFont-family specifies the font family of text. OneFont-size specifies the font size of the text. OneFont-size-adjust specifies the aspect value for an element. Two Font-stretch shrinks or stretches the current font family. Two Font-style specifies the font style of the text. OneFont-variant specifies the font style of the text. OneFont-weight specifies the size of the font. OneCSS outer distance attribute (Margin)Property description CSSMargin sets all external distance attributes in a statement. OneMargin-bottom sets the lower outer margin of the element. OneMargin-left sets the left outer margin of the element. OneMargin-right set the elements of the right margin. OneMargin-top set the elements of the margin. OneCSS inner margin attribute (Padding)Property description CSSPadding sets all internal margin attributes in a declaration. OnePadding-bottom sets the inner margin of the element. OnePadding-left sets the left inner margin of the element. OnePadding-right sets the right inner margin of the element. OnePadding-top sets the upper margin of the element. OneCSS list attribute (List)Property description CSSList-style sets all of the list properties in a declaration. OneList-style-image sets the image to list item tags. OneList-style-position sets the placement position of the list item flag. OneList-style-type sets the list item label type. OneMarker-offset 2Content generation (Generated, Content)Property description CSSContent and before, and after pseudo elements are used in conjunction to insert the generated content. TwoCounter-increment increments or decrements one or more counters. TwoCounter-reset creates or resets one or more counters. TwoQuotes sets the quotation marks for nested references. TwoCSS size attribute (Dimension)Property description CSSHeight sets element height. OneMax-height sets the maximum height of the element. TwoMax-width sets the maximum width of the element. TwoMin-height sets the minimum height of the element. TwoMin-width sets the minimum width of the element. TwoWidth sets the width of the element. OneCSS location attribute (Positioning)Property description CSSBottom sets the offset between the outer margin margin of the locating element and the lower boundary of the block. TwoClear specifies which side of the element does not allow other floating elements. OneClip tailoring absolute positioning elements. TwoCursor specifies the type (shape) of the cursor to display. Two Display specifies the type of box that the element should generate. OneFloat specifies whether the box should float. OneLeft sets the offset between the left outer margin margin of the positioning element and the left boundary of the block containing it. TwoOverflow specifies what happens when the contents overflow element box. TwoPosition specifies the location type of the element. TwoRight set the location element right margin contains the offset between the block boundaries with the right boundary. TwoTop positioning elements contain margin boundaries with theoffset between the block boundary. TwoVertical-align sets the vertical alignment of the elements. OneVisibility specifies whether the element is visible. TwoZ-index sets the stacking order of elements. TwoCSS print property (Print)Property description CSSOrphans sets the minimum number of rows that must be left at the bottom of the page when elements are paged inside. TwoThe paging behavior after the page-break-after sets the element. TwoPage-break-before paging behavior before setting elements. TwoPage-break-inside sets the paging behavior inside the element. TwoWidows sets the minimum number of rows that must be reserved at the top of the page when elements are paged inside. TwoCSS table attribute (Table)Property description CSSBorder-collapse specifies whether to merge the table borders. TwoBorder-spacing specifies the distance between the borders of adjacent cells. TwoCaption-side specifies the location of the title of the form. Twobackgrounds on the empty cells in the table. TwoTable-layout sets the layout algorithm for the table. TwoCSS pseudo class (Pseudo-classes)Property description CSS:active adds styles to elements that are activated. One:focus adds styles to elements that have the keyboard input focus. TwoHover: when a mouse is suspended above an element, add a style to the element. One:link adds styles to an unexpected link. One:visited adds styles to links that have been accessed. One:first-child adds a style to the first child element of the element. Two:Lang adds a style to the element with the specified Lang attribute. Two伪元素(css pseudo elements.属性描述cssfirst letter向文本的第一个字母添加特殊样式.first line向文本的首行添加特殊样式.2. before在元素之前添加内容.:after在元素之后添加内容.production打印属性打印html web我们可以借助打印属性让打印文档总是会出现问题.在css2中，内容更容易一些.属性描述值设置元素放在页面底部时所允许的最少文本行数）children.设置是否在内容区之外但是在画布的可打印区域内放〃十字标志marks”.请注意，css2. 1已删除该属性.none cropcross这个属性与属性结合可以指定打印一个元素时所用的特定页面类型page size.请注意，css2. 1已删除该属性.auto identificationpage break after driving设置元素后是否应当放置分页符. alwaysnewleftrightpage break before driving设置元素前否应当放置分页符.alwaysnewleftright page break inside car设置元素内部是否应当放置分页符.newsize利用这个属性，创作人员可以声明打印一个元素时所用页框的大小和方向.它可以与page结合使用.不过并不要求一定如此.请注意，css2. 1已删除该属性.autoportraitlandscapeon设置元素放在页面顶部时所允许的最少文本行数.)。

常用的CSS 标签标记属性翻译注释1、字体属性(type)font-family (使用什么字体)font-style(字体的样式，是否斜体)：normal/italic/obliquefont-variant (字体大小写)：normal/small-capsfont-weight (字体的粗细)：normal/bold/bolder/lithterfont-size(字体的大小)：absolute-size/relative-size/length/percentage2、颜色和背景属性(backgroud)color(定义前景色，例如：p{color:red})background-color ( 定义背景色)background-imag e(定义背景图片)background-repeat( 背景图案重复方式)：repeat-x/repeat-y/no-repeatbackground-attachment (设置滚动)：scroll( 滚动)/fixe( 固定的)background-position( 背景图案的初始位置)：percentage/length/top/left/right/bottom3、文本属性：(block)定义间距：word-spacing(单词之间的距离)letter-spacing(字母之间的距离)text-decoration (定义文字的装饰)：nore/underline/overline/line-through/blinkvertical-align ( 元素在垂直方向的位置) ：baseline( 基线)/sub/super/top/text-top/middle/bottom/text-bottomtext-transform ( 使文本转换为其它方式) ：capitalize( 大写)/uppercase(首字母大写)/lowercase( 小写)/nonetext-align (文字的对齐)：left/right/center/justifytext-indent( 文本的首行缩进)length/percentageline-height( 文本的行高):normal/numbet/lenggth/percentage( 百分比)定义超链接：a：link {color:green;text-decoration:nore}( 未访问过的状态) a：visited {color:ren;text-decoration:underline;16pt}( 访问过的状态)a:hover {color:blue;text-decoration:underline;16pt}( 鼠标激活的状态)4、块属性(block)边距属性：margin-top (设置顶边距)margin-right( 设置右边距)margin-bottom (设置底边距)margin-left (设置左边距)填充距属性：padding-top 设置顶端真充距)padding-right 设置顶端真充距)padding-bottom 设置顶端真充距)padding-left 设置顶端真充距)5、边框属性(border )border-top-width (顶端边框宽度)border-right-width (右端边框宽度)border-bottom-width (底端边框宽度)border-left-width (d 左边框宽度)border-width (一次定义边框宽度)border-color (设置边框颜色)border-style(设置边框样式)border-top (一次定义顶端各种属性)border-right (一次定义右端各种属性)border-bottom (一次定义底端各种属性)border-left (一次定义左端各种属性)图文混排：width (定义宽度属性)height(定义高度属性)float (文字环绕在一个元素的四周)clear(定义某一边是否有环绕)6、项目符号和编号(list)display(定义是否显示)white-space(怎样处理空白部分)：normal/pre/nowraplist-style-type(在列表前加项目符号)disc( 圆点)/circle( 圈)/square（方形）/decima l （阿拉伯数字）/lower-roman ( 小写罗马数字)/upper-roman ( 大写罗马数字) /lower-alpha (小写英文字母)/upper-alpha (大写英文字母)/norelist-style-tyle(在列表前加图案): <url>/nonelist-style-position(决定列表项中第二行的起邕位置)list-style( 一次性定义所有属性)7、定位（positioning）即层属性Type：设定对象的定位方式。

边框：border-style none ：无轮廓。

border-color 与border-width 将被忽略,hidden ：隐藏边框。

dotted ：点状轮廓。

dashed ：虚线轮廓。

solid ：实线轮廓double ：双线轮廓。

两条单线与其间隔的和等于指定的border-width 值,groove ：3D 凹槽轮廓。

ridge ：3D 凸槽,轮廓。

inset ：3D 凹边轮廓。

outset ：3D 凸边轮廓。

border-radius ： 设置对象使用圆角边框 <length>：用长度值设置对象的圆角半径长度。

不允许负值 <percentage>：用百分比设置对象的圆角半径长度。

不允许负值 这两个对象一般为10px ；border-top-right-radiu s设置对象右上角圆角边框 border-top-left-radius 设置对象左上角圆角边框 border-bottom-left-rad ius设置对象左下角圆角边框border-bottom-right-ra dius 设置对象右下角圆角边框背景：属性 简介background 复合属性。

设置对象的背景特性 background-color 设置对象的背景颜色background-image设置对象的背景图像none ：无背景图。

<url>：使用绝对或相对地址指定背景图像。

background-repeat 设置对象的背景图像如何铺排填充repeat-x ：背景图像在横向上平铺 repeat-y ：背景图像在纵向上平铺 repeat ：背景图像在横向和纵向平铺 no-repeat ：背景图像不平铺 round ：背景图像自动缩放直到适应且填充满整个容器。

（CSS3）space ：背景图像以相同的间距平铺且填充满整个容器或某个方向。

（CSS3）background-attachment 设置对象的背景图像是随对象内容滚动还是固定的fixed ：背景图像相对于窗体固定。

CSS属性⼤全1. ⽂字属性「字体族科」（font-family），设定时，需考虑浏览器中有⽆该字体。

「字体⼤⼩」（font-size），注意度量单位。

《绝对⼤⼩》|《相对⼤⼩》|《长度》|《百分⽐》(⼀般设置双数)「字体加粗」（font-weight），除了 normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9种以像素为度量为单位的设置⽅式（100，200，300，400，500，600，700，800，900）。

「字体风格」（font-style），也就是字型。

（normal : 正常的字体italic : 斜体。

对于没有斜体变量的特殊字体，将应⽤obliqueoblique : 倾斜的字体）「字体变形」（font-variant），字体变形属性决定了字体显⽰是normal (普通) ，还是Small-caps（⼩型⼤写字母）当⽂字中所有字母都是⼤写的时候，⼩型⼤写字母（值）会显⽰⽐⼩写字母稍⼤的⼤写字符。

「字体」（font），《字体风格》|《字体变形》|《字体加粗》|《字体⼤⼩》|《⾏⾼》|《字体族科》2. ⽂本属性「⽂字间距」（word-spacing），主要⽤于控制⽂字间相隔的距离。

有正常（normal）和值（⾃定义间隔值）两种选择⽅式。

「字母间距」（letter-spacing），其作⽤与字符间距类似，也有正常（normal）和值（⾃定义间隔值）两种选择⽅式。

「垂直对齐」（vertical-align），控制⽂字或图像相对于其母体元素的垂直位置。

如将⼀个2×3像素的GIF图像同其母体元素⽂字的顶部垂直对齐，则该GIF图像将在该⾏⽂字的顶部显⽰。

共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（sub，将元素以下标的形式显⽰）,上标（super，将元素以上标的形式显⽰）、顶部（top ，将元素顶部同最⾼的母体元素对齐）、⽂本顶对齐（text-top，将元素的顶部同母体元素⽂字的顶部对齐）、中线对齐（middle，将元素的中点同母体元素的中点对齐）、底部（bottom，将元素的底部同最低的母体元素对齐）及值（⾃定义）等9种选择。

2009-03-22 04:55图解CSS的padding,margin,border属性(详细介绍及举例说明)图解CSS的padding,margin,border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。

盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。

对于初学者，经常会搞不清楚margin，background-color，background-image，padding，content，border之间的层次、关系和相互影响。

这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

∙margin：层的边框以外留的空白∙background-color：背景颜色∙background-image：背景图片∙padding：层的边框到层的内容之间的空白∙border：边框∙content：内容padding、margin两个重要属性的详细介绍及举例说明本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin 和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.如果有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, div, ul等;2. Inline element: 指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等;3. Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.Box Model: 任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片), border(边框), margin五个部分组成. 立体图如下(Fig.1):该立体图引自:/url.asp?url=/ (Under the Creative Commons License)平面图如下(Fig. 2):根据以上两图, 相信大家对于Box model会有个直观的认识.以下说明margin和padding属性:1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于Fig. 2所示的上右下左margin值均为40px, 因此代码为:margin-top: 40px;margin-right: 40px;margin-bottom: 40px;margin-left: 40px;根据上, 右, 下, 左的顺时针规则, 简写为margin: 40px 40px 40px 40px;为便于记忆, 请参考下图:当上下, 左右margin值分别一致, 可简写为:margin: 40px 40px;前一个40px代表上下margin值, 后一个40px代表左右margin值.当上下左右margin值均一致, 可简写为:margin: 40px;2. Padding: 包括padding-top, padding-right, padding-bottom,padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.至此, 我们已经基本了解margin和padding属性的基本用法. 但是, 在实际应用中, 却总是发生一些让你琢磨不透的事, 而它们又或多或少的与margin有关.注: 当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 再此Jorux建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素, 垂直方向的margin中. 文字说明可能让人费解, 下面用一个例子说明margin-collapsing现象.例: 在html文件的<body></body>之间写入如下代码:<div id=”ID1″><h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1与ID2的margins在垂直方向折叠.</h1></div>在与其外联的css文件中写入:* {padding:0;margin:0;}#ID1 {background-color: #333;color: #FFF;margin-top: 10px;margin-bottom: 10px;}#ID2 {font: normal 14px/1.5 Verdana, sans-serif;margin-top: 30px;margin-bottom: 30px;border: 1px solid #F00;}代码解释:1. 在html写入的代码表示, 在html中插入id分别为ID1和ID2的两个块级元素div, h1;2. *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零;3. #ID1{…}: 使id为ID1的元素div的背景颜色为#333, 字体颜色为#FFF, margin-top/bottom为10px;4. #ID2{…}: 使id为ID2的元素h1的字体大小为14px, verdana字体, 行高为字体高的150%, 正常粗细. margin-top/bottom为30px, 边框为1px宽, 红色实线.依据以上解释, 我们应该得到如下效果(Fig. 3):即ID1的margin-top/bottom=ab=ef=10px;ID2的margin-top/bottom=bc=de=30px;但用浏览器打开html文件, 却得到Example4的效果, 如下图(Fig. 4):即ab=cd=30px, ID1的margin-top/bottom=10px被折叠了, 而且ID1应有的margin黑色背景也一同被折叠消失了.为什么会折叠: 造成以上现象的原因是, 我们在css中并没有声明id为ID1的元素div的height(高), 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离, 即Fig. 4中bc的长度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出现了Fig. 4中ab与cd之间的空白区域. 因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如div, h1, p等, 我们是不可能预先知道它的高是多少的, 因此在css文件中是不能常规通过声明元素的高来解决折叠问题.我们需要在css文件中加入如下代码(红色部分):#ID1 {background-color: #333;color: #FFF;margin-top: 10px;margin-bottom: 10px;padding-top:1px;padding-bottom:1px;}或是：#ID1 {background-color: #333;color: #FFF;margin-top: 10px;margin-bottom: 10px;border-top:1px solid #333;border-bottom:1px solid #333;}通过增加以上代码, 便可使浏览器重新计算ID1的高, 使其为子元素ID2的margin-top/bottom外缘(outer top/bottom)之间的距离, 即Fig. 3中be的距离.附加：CSS中Padding 属性中参数个数的定义，例如：body { padding: 20px;}body { padding: 20px 30px; }body { padding: 20px 30px 10px; }body { padding: 20px 30px 10px 20px; }详细说明如下：如果只提供一个，将用于全部的四条边；如果提供两个，第一个用于上－下，第二个用于左－右；如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

CSS基本语法CSS常⽤选择器1、页⾯中，所有的CSS代码，需要写⼊到<style></style>标签中。

style标签的type属性应该选择text/css2、CSS 注释CSS修改页⾯中的所有标签，必须借助选择器选中。

选择器中，可以写多对CSS属性，⽤{}包裹：每个属性名与属性值之间⽤:分隔，多对属性之间，必须⽤;分隔。

3、【CSS常⽤选择器】①标签选择器写法： HTML标签名{}作⽤：可以选中页⾯中，所有与选择器同名的HTML标签。

②类选择器(class选择器)写法： .class名{}调⽤：在需要调⽤选择器样式的标签上，使⽤class="class名"调⽤选择器优先级： >标签选择器③ID 选择器写法： #ID名{}调⽤：需要调⽤样式的标签，起⼀个id="ID名"优先级： ID选择器>class选择器注意：⼀个页⾯中，不能出现同名ID【Class选择器与ID选择器的区别】写法不同:class选择器⽤.声明，ID选择器⽤#声明；优先级不同： ID选择器>class选择器作⽤范围不同： class选择器可以多次调⽤，ID选择器只能使⽤⼀次。

【选择器的命名规范】只能有字母、数字、下划线、减号组成；开头不能是数字。

也不能是只有⼀个减号。

⼀般，起名要求有语义，使⽤英⽂单词与数字的组合。

④通⽤选择器写法： *{}作⽤：可以选中页⾯中所有的HTML标签。

优先级：最低⑤并集选择器写法：选择器1,选择器2,……,选择器n{}⽣效规则：多个选择器取并集，只要标签满⾜其中任意⼀个选择器，样式即可⽣效。

⑥交集选择器写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔⽣效规则：多个选择器取交集，则必须满⾜所有选择器的要求，才能⽣效⑦后代选择器写法：选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔⽣效规则：只要满⾜，后⼀选择器是前⼀个选择器的后代，即可成效。

一、类型Font-family:字体Font-size:字体大小Font-style:字体风格，如斜体、正常等Line-height:行高（用来设定字行间距）Font-weight:字体浓淡Font-variant:字体变量（用来设定字体是正常显示，还是以小型大写字母显示）Text-transform:文本转换（用来设定字体的大小写转换）Text-decoration（字体装饰）:underline下划线Overline上划线line-through线-穿过blink闪光none 无二、背景Background-color:背景颜色Background-image:背景图片Background-repeat:背景重复Background-attachment:背景附着（用来设定背景图片是否随文档滚动）Background-position:背景位置XBackground-position:背景位置Y三、区块Word-spacing:词间距Letter-spacing:字符间距Vertical-align:垂直对齐Text-align:水平对齐Text-indent:文本缩进White-space:空白Display:显示四、方块Width:宽度Height:高度Float:浮动Clear:规定元素的哪一侧不允许出现其他浮动元素Padding间隙（用来填充一些空白，参考如下图）:Top 上Right 右Bottom 下Left 左Margin：边距（用来设定边距的宽度）五、边框Style:样式（如：虚线等）Width:宽度Color:颜色六、列表List-style-type:列表样式类型（用来设定列表项标记（list-item marker）的类型）List-style-image:列表列表样式图片（用来设定列表样式图片标记的地址）List-style-Position:列表样式位置（用来设定列表样式标记的位置）七、定位Position:位置Width:宽度Height:高度Visibility:规定元素是否可见（即使不可见，但仍占用空间，建议使用display来创建不占页面空间的元素）Z-index:设置元素的堆叠顺序（该属性设置一个定位元素沿Z轴定义为垂直延伸到显示区的轴，如果为正数，则离用户更近，为负数则表示离用户更远）Overflow:规定当内容溢出元素框时发生的事情Placement:放置Clip：裁剪绝对定位元素八、扩展Page-break-before:属性设置元素前Page-breaking行为Page-break-after:属性设置元素后Page-breaking行为Cursor：规定要显示的光标的类型（鼠标放在指定位置鼠标的形状）Filter:过滤友情提醒：尽量少的使用分页属性，并且在表格、浮动元素、带有边框的元素中使用分页属性。

CSS基础以及属性⼤全⼀、CSS偷个懒，啥是CSS我就不介绍啦⼆、CSS语法 CSS语法：选择符{属性：属性值；属性：属性值；}选择符表⽰要定义样式的对象，可以是元素本⾝，也可以是⼀类元素或者制定名称的元素.属性：属性是指定选择符所具有的属性，它是css的核⼼，css2共有150多个属性属性值：属性值包括法定属性值及常见的数值加单位，如25px，或颜⾊值等。

说明：1）每个CSS样式由两部分组成，即选择符和声明，声明⼜分为属性和属性值；2）属性必须放在花括号中，属性与属性值⽤冒号连接。

3）每条声明⽤分号结束。

4）当⼀个属性有多个属性值的时候，属性值与属性值不分先后顺序。

5）在书写样式过程中，空格、换⾏等操作不影响属性显⽰。

css中的注释：/* 我是css的注释 */三、样式的创建(内部样式外部样式内联样式)、两种引⼊外部样式表的区别A、内部样式语法：<style type="text/css">/*css语句*/</style>注：使⽤style标记创建样式时，最好将该标记写在<head></head>;B、外部样式*⽅法⼀：外部样式表的创建：<link rel="stylesheet" type="text/css" href="⽬标⽂件的路径及⽂件名全称" />说明：使⽤link元素导⼊外部样式表时，需将该元素写在⽂档头部，即<head>与</head>之间。

rel（relation）：⽤于定义⽂档关联，表⽰关联样式表；type：定义⽂档类型；*⽅法⼆：外部样式表的导⼊<style type="text/css">@import url(⽬标⽂件的路径及⽂件名全称);</style>注：@和import之间没有空格 url和⼩括号之间也没有空格；必须结尾以分号结束；C、内联样式（⾏间样式，⾏内样式，嵌⼊式样式）语法：<标签 style="属性：属性值;属性:属性值;"></标签>四、CSS选择符（选择器）常⽤的选择符有⼗种左右类型选择符，id选择符，class选择符，通配符，群组选择符、包含选择符，伪类选择符(伪类选择符CSS中已经定义好的选择器,不能随便取名)，伪对象选择符(设置在对象后发⽣的内容。

CSS属性大全完整版字体属性：(font)大小font-size:x-large; (特大) xx-small; (极小)一般中文用不到，只要用数值就可以，单位：PX、PD 样式font-style:oblique; (偏斜体) italic; (斜体) normal; (正常)行高line-height:normal; (正常) 单位：PX、PD、EM粗细font-weight:bold; (粗体) lighter; (细体) normal; (正常)变体font-variant:small-caps; (小型大写字母) normal; (正常)大小写text-transform:capitalize; (首字母大写) uppercase; (大写)lowercase; (小写) none; (无)修饰text-decoration:underline; (下划线) overline; (上划线)line-through; (删除线) blink; (闪烁)常用字体font-family:"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment:fixed; (固定) scroll; (滚动)位置background-position:Left (水平) top (垂直);简写方法background:#000 url(..) repeat fixed left top;区块属性：(Block)字间距letter-spacing: normal; 数值对齐text-align:justify; (两端对齐) left; (左对齐)right; (右对齐) center; (居中)缩进text-indent: 数值px;垂直对齐vertical-align:baseline; (基线) sub; (下标) super; (下标)text-top; 文本顶端对齐| middle; 居中|bottom; 底部| text-bottom; 相对文本底端对齐词间距word-spacing: normal; 数值空格white-space:pre; (保留) nowrap; (不换行)显示display:block; (块) inline; (内嵌) list-item; (列表项)run-in; (追加部分) compact; (紧凑) marker; (标记)table; 表格inline-table; 内嵌表格table-raw-group;table-header-group; table-footer-group; table-raw;table-column-group; table-column; table-cell;table-caption; (表格标题)方框属性：(Box)width:; 宽height:; 高float:; 浮动clear:both; 清除浮动margin:; 外边距padding:; 内边距顺序：上右下左边框属性：(Border)border-style:dotted; (点线) dashed; (虚线) solid; (实线)double; (双线) groove; (槽线) ridge; (脊状)inset; (凹陷) outset; (外凸)border-width:; 边框宽度border-color:#; 边框颜色简写方法border：width style color;列表属性：(List-style)类型list-style-type:disc; (圆点) circle; (圆圈) square; (方块) decimal; (数字) lower-roman; (小写罗码数字) upper-roman; (大写罗码数字)lower-alpha; (小写字母) upper-alpha; (大写字母)位置list-style-position:outside; (外) inside; (里)图像list-style-image: url(..);定位属性：(Position)位置Position:absolute; 绝对位置|relative; 相对位置|static; 静止可见性visibility:inherit; 继承父元素| visible; 可见| hidden; 隐藏内容超出时overflow:visible; 可见| hidden; 隐藏| scroll; 滚动| auto; 自动裁切clip: rect(12px,auto,12px,auto)css属性代码大全一CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/ text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/ text-decoration:none; /*删除链接下划线*/ text-transform : capitalize; /*首字大写*/ text-transform : uppercase; /*英文大写*/ text-transform : lowercase; /*英文小写*/ text-align 水平对齐text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/ vertical-align 垂直对齐vertical-align:top; /*垂直向上对齐*/ vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白/三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标经过链接*/鼠标光标样式：链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：<div><form><p>用户: <input type="text" class="text"></p>...</form></div>type属性取值单行文本域<p>用户: <input type="text" class="text"></p><input type="text" size="" maxlength="">单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数多行文本域<p> <textarea cols="45" rows="5"></textarea></p>Cols：字符宽度rows：行数提交重置<p> <input type="submit" id="按钮" value="提交" /><input type="reset" id="重置" value="重置" /></p>提交到服务器的按钮,当这个按钮被点击时,就会连接到表单form属性action指定的url地址。