下载文档原格式
CSS背景图像background属性简写background属性简写background属性可以像margin padding属性⼀样，有简写⽅法，它的简写顺序是：1. background-color2. background-image3. background-repeat4. background-attachment5. background-position如果某属性不想写，可以忽略。
下⾯的代码演⽰了background属性简写的⽤法。
<!DOCTYPE html><html><head><title>background简写</title><style type="text/css">body {background: url("") no-repeat center top;color: #665544;padding: 20px;}h1 {color: white;}</style></head><body><h1>软件开发，成就梦想</h1><h2>学编程，上利永贞⽹ </h2><p>我们能为中国‘996’程序员做些什么？怎样才能能引起西⽅媒体和政府的关注？</p><p>在程序员圈⼦⾥颇有名⽓的代码托管平台GitHub上，有⼈发起了⼀个名为“996.ICU”的项⽬，意为“⼯作996，⽣病ICU”，“996”即许多企业的程序员⼯作状态，从上午9点⼲到晚上9点，每周⼯作6天。
这⼀项⽬得到了⼤量程序员的响应，⾃从3⽉26⽇注册以来，截⾄4⽉2⽇Star数已突破15万整数关⼝，表⽰⾄少有15万名程序员关注了这个项⽬。
</p></body></html>。
微信⼩程序图⽚绝对定位（背景图⽚）微信⼩程序图⽚绝对定位前⾔：在⼩程序中，有时需要⽤到背景图⽚，但是如果使⽤background-image的话，就⽆法控制图⽚的⼤⼩，background-image⼀般⽤于将图⽚压缩为1像素的背景图⽚，然后⾃动填充铺满。
使⽤背景图⽚的话，⼀般使⽤⼀些新的view层，如<image class="jxlogo" src="../../image/jx.png"/>等，但是⼩程序与html类似，⼀个不同的 css或wxss会占据⼀个位置，然后接下来的css或wxss会⾃动往下排版，但是很多时候这并不是我们想要的，于是需要⽤的绝对定位。
使⽤绝对定位，最好使⽤⼀个新的wxss将所有⼦控件包含起来，然后在这个包含所有⼦控件的wxss中，定义⼀个属性position: relative，在每个⼦控件中，定义 position: absolute，现在就可以通过绝对定位来修改位置，如top等，以下附上部分wxss代码：.jx_card{width: 100%;height: 295rpx;background-color:#e6e6e6;position: relative}.jxlogo{top: 47.5rpx;margin-left: 50rpx;width: 200rpx;height: 200rpx;float: left;position: absolute;}然后附上wxml代码：<view class="jx_card"><image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/优惠券_03.png"><image class="jxlogo" src="../../image/jx.png"/></image></view>⼤概内容就是这样，主要是通过position先定义定位的类型，然后通过top去找到图⽚上的位置，并定义上去。
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代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
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（设置元素层级）等。
关于background-image调整⼤⼩和位置的⽅法笔记遇到background-image的问题有点多，直接上⽹搜资料⾃⼰整理⼀下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#divtest{width:400px;height:400px;background-color: aqua;background-image: url("img/2.jpg");/*background: url("img/2.jpg") 10% 20% no-repeat;!*图⽚从左往右移动的百分⽐⼤⼩，从上往下百分⽐⼤⼩，重复⽅式换成数值同样如此，在这⾥没有调整⼤⼩的⽅法*!*/background-position: 10% 40%;/*这个是按从左往右，从上往下的百分⽐位置进⾏调整*/background-size: 50% 50%;/*按⽐例缩放*//*background-size: 100px 100px;!*这个是按数值缩放*!*/background-repeat: no-repeat;/*还有repeat-x,y等*/}</style></head><body><div id="divtest"></div></body></html>。
css中元素定位方法
在CSS中，元素的定位方法主要有以下几种：
1.静态定位：这是元素的默认定位方式，元素按照正常的文档流进行排列。
使用position: static
属性设置。
2.相对定位：元素相对于其正常位置进行定位，因此“left:20px”会使元素向右移动20px。
相对定位
的元素不会脱离文档流，因此会占据空间。
使用position: relative属性设置。
3.绝对定位：元素相对于最近的已定位父元素（即设置了position: absolute或position: relative
的父元素）进行定位。
如果没有已定位的父元素，那么元素相对于初始包含块（通常是html元素）进行定位。
绝对定位的元素会脱离文档流，不占据空间。
使用position: absolute属性设置。
4.固定定位：元素相对于浏览器窗口进行定位，即使在滚动页面时，它也不会移动。
固定定位的元
素不脱离文档流，但会根据其设置的偏移量从正常位置偏移。
使用position: fixed属性设置。
以上四种定位方式各有特点，可以根据具体需求选择使用。
CSS——静态定位，相对定位，绝对定位，固定定位CSS中的定位使⽤来布局的熟练应⽤对页⾯美化有很好的帮助，下⾯就进⾏详细介绍：定位分为静态定位，相对定位，绝对定位，固定定位这四种，定位有不同的参数，例如：left、right、top、bottom、z-index等。
1、静态定位（static）⼀般的标签元素不加任何定位属性都属于静态定位，在页⾯的最底层属于标准流。
2、绝对定位（absolute）绝对定位的元素从⽂档流中拖出，使⽤left、right、top、bottom等属性相对于其最接近的⼀个最有定位设置的⽗级元素进⾏绝对定位，如果元素的⽗级没有设置定位属性，则依据 body 元素左上⾓作为参考进⾏定位。
绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为⽆单位的整数，⼤的在上⾯，可以有负值。
绝对定位的定位⽅法：如果它的⽗元素设置了除static之外的定位，⽐如position:relative或position:absolute及position:fixed，那么它就会相对于它的⽗元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的⽗元素没有设置定位，那么就得看它⽗元素的⽗元素是否有设置定位，如果还是没有就继续向更⾼层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位的第⼀个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中⼀种定位，那么它就会相对于⽂档body来定位（并⾮相对于浏览器窗⼝，相对于窗⼝定位的是fixed）。
将class="two"的div定位到距离的顶部和左侧分别50px的位置。
会改变其他元素的布局，不会在此元素本来位置留下空⽩。
3、相对定位（relative）相对定位元素不可层叠，依据left、right、top、bottom等属性在正常⽂档流中偏移⾃⾝位置。
同样可以⽤z-index分层设计。
css属性（cssproperties）css属性（css properties）CSS properties DaquanFont properties: (font)Size font-size: X-LARGE; (large) XX-Small; (minimal) general Chinese can not be used, as long as the value can be, units: PX, PDStyle font-style: oblique; (partial italic) Italic; (italic) normal; (normal)Line height line-height: normal; (normal) units: PX, PD, EM The thickness of font-weight: (BOLD) bold; lighter; normal; (Figure) (normal)Variant font-variant: small-caps; (small capitalization) normal; (normal)Case text-transform: capitalize; (initial uppercase) uppercase; (uppercase) lowercase; (lower case) none; (no)Modify text-decoration: underline; (underline) overline; (line up) line-through; (delete line) blink; (blinking)Commonly used fonts: (font-family)"Courier, New", Courier, monospace, Times, New, Roman, Times, serif, Arial, Helvetica, sans-serif, VerdanaFont projection effect: filter:dropshadow (color=#FFFFFF, offx=1, offy=1, positive=1);Background properties: (background)Color background-color: #FFFFFF;Picture background-image:, URL ();Repeat background-repeat: no-repeat;Scroll background-attachment: fixed; (fixed) scroll; (scroll)Position background-position: left (horizontal) top (vertical);Shorthand method, background:#000, URL (...) repeat, fixed, left, top;Block properties: (Block)Word spacing letter-spacing: normal; numeric valueYes, Liu text-align: justify; (align at the end) left; (left aligned) right; (right aligned) center; (centered)Indent the text-indent: value px;Vertically aligned vertical-align: baseline; (baseline) sub; (subscript) super; (subscript) top; text-top; middle; bottom; text-bottom;Word spacing word-spacing:, normal; numerical valueSpace white-space: pre; (reserved) nowrap; (no line feed)Display:block (block); inline; list-item; (embedded) (list) run-in (additional); compact (compact); marker; table;inline-table (marker); table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group;table-column; table-cell; table-caption; (table title)Box properties: (Box)Width:; height:; float:; clear:both; padding:; margin:; order: right, left, leftBorder properties: (Border)Border-style: dotted; (dot line) dashed; (dotted line) solid; double; (double line) groove; (slot line) ridge; (ridged) inset; (SAG) outset;Border-width:; border widthBorder-color:#;Shorthand method border:width, style, color;List properties: (List-style)Type list-style-type: disc; (DOT) circle; (circle) square;(Fang Kuai) decimal; (number) lower-roman; (Ronaldinhonumber) upper-roman; lower-alpha; upper-alpha;Location list-style-position: outside; (external) inside;Image list-style-image:, URL (...);Location attributes: (Position)Position: absolute; relative; static;Visibility: inherit; visible; hidden;Overflow: visible; hidden; scroll; auto;Clip:, Rect (12px, auto, 12px, auto) (cut)CSS property code GuinnessOne CSS text property:Color: #999999; / * * / text colorFont-family: Arial, sans-serif; / * * / text fontFont-size: 9pt; / * * / text sizeFont-style:itelic; / * * / italic textFont-variant:small-caps; / * * / small fontLETTER-SPACING: 1pt; / * * / distance between wordsLine-height: 200%; / * * / set the rowFont-weight:bold; / * * / bold textVertical-align:sub; / * * / word.Vertical-align:super; / * * / word.Text-decoration:line-through; / * * / strikethroughText-decoration:overline; / * and * / top lineText-decoration:underline; / * * / underlineText-decoration:none; / * * / delete link underlineText-transform: capitalize; / * * / first character uppercase 文本转换：大写；/ * * /英文大写文本转换：小写；/ * * /英文小写文本对齐：右；/ * * /文字右对齐文本对齐：左；/ * * /文字左对齐文本对齐：中心；文字居中对齐/ * * /文本对齐：对齐；/ * * /文字分散对齐垂直对齐属性垂直对齐：顶；/ * * /垂直向上对齐垂直对齐：底部；/ * * /垂直向下对齐垂直对齐：中部；/ * * /垂直居中对齐垂直对齐：文字/ * * /文字垂直向上对齐顶；垂直对齐：文字/ * * /文字垂直向下对齐底；布局：垂直流/ * * /文字竖着排列表意二、CSS边框空白填料：10px；/ * * /上边框留空白填充右：10px；/ * * /右边框留空白座垫：10px；/ * * /下边框留空白填充左：10px；/*左边框留空白三、CSS符号属性：目录样式类型：无；/ * * /不编号目录样式类型：十进制；/ * * /阿拉伯数字目录样式类型：低/ * * /小写罗马数字罗马；目录样式类型：大写罗马数字；/ * * /大写罗马数字目录样式类型：低α；/ * * /小写英文字母目录样式类型：上α；/ * * /大写英文字母目录样式类型：盘；/ * * /实心圆形符号目录样式类型：圆；/ * * /空心圆形符号目录样式类型：广场；/ * * /实心方形符号列表样式图像：URL（/点。
两种⽅法可以达到背景图不缩放的效果⽅法⼀. 把图⽚作为background有⼏个CSS的属性要提⼀下：background-size：cover，这个CSS3的属性作⽤是把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域，背景图像的某些部分也许⽆法显⽰在背景定位区域中，如果不使⽤这个属性，在IE11和FireFox中缩放浏览器，背景图⽚会随之缩⼩，同时使⽤-webkit-background-size: cover和-o-background-size: cover兼容webkit内核浏览器和Opera浏览器；background-attachment属性设置背景图像是否固定或者随着页⾯的其余部分滚动，当设置为fixed时页⾯的其余部分滚动时，背景图像不会移动。
HTML：代码如下:<div id="con"></div>CSS：代码如下:body{ margin:0; padding:0;}#con{position:absolute;top:0;left:0;height:100%;width:100%;background-image:url("maskimg/star.jpg");background-position: center 0;background-repeat: no-repeat;background-attachment:fixed;background-size: cover;-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */-o-background-size: cover;/* 兼容Opera */zoom: 1;}⽅法⼆.不把图⽚作为背景，⽽是使⽤<img>标签，效果是图⽚尺⼨不会随浏览器缩放⽽变化，但是如果有竖直滚动条时，图⽚不会固定⽽会随滚动条移动。
图片精灵Sprite及PNG8和PNG24区别一、图片精灵：Spritecss sprites直译过来就是CSS精灵。
通常被解释为“CSS图像拼合”或“CSS贴图定位”。
其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。
1、CSS Sprites原理CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
2、CSS Sprites优点（1）利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因;（2）个人认为能CSS Sprites能减少图片的字节，我曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、CSS Sprites缺点诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点（1）在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景;这些还好，做痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂;（2）CSS Sprites在开发的时候比较麻烦，你要通过photoshop 或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐;幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop 测量来的方便多了，而且样式直接生成，复制，拷贝就OK!（3）CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无序改的地方最好不要动，这样避免改动更多的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;(下标) top; 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;(表格标题) /*display 属性的了解很模糊*/方框属性：(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: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表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large|small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra- expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-width border-bottom-widthborder-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w- resize|s-resize|se-resize|sw-resize}CSS属性大全[背景]属性共有六项：「背景颜色」〔background-color〕，设置背景颜色。
css中position：fixed实现div居中上下左右居中上下左右居中代码如下复制代码代码如下:div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;height:150px;}如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中，那么把 left:0; 或者 right:0; 即可下⾯附⼀个DIV 元素在浏览器窗⼝居中其实，实现这个效果并不复杂，利⽤ CSS 中的 position 定位就可以轻松搞定了。
来看看代码吧：代码如下复制代码代码如下:<style type="text/css">.dialog{position: fixed;_position:absolute;z-index:1;top: 50%;left: 50%;margin: -141px 0 0 -201px;width: 400px;height:280px;border:1px solid #CCC;line-height: 280px;text-align:center;font-size: 14px;background-color:#F4F4F4;overflow:hidden;}</style><div class="dialog">我是在窗⼝正中央的，呵呵！</div>设置的技巧全部在这⾥：代码如下复制代码代码如下:.dialog{position: fixed;_position:absolute; /* hack for IE6 */z-index:1;top: 50%;left: 50%;margin: -141px 0 0 -201px;width: 400px;height:280px;border:1px solid #CCC;line-height: 280px;text-align:center;font-size: 14px;background-color:#F4F4F4;overflow:hidden;}设置 position: fixed; _position:absolute;设置 left:50% 和 top:50%;设置 margin: -(DIV的offsetWidth/2) 0 0 -（DIV的offsetHeight/2）。
CSS之定位布局（position，定位布局技巧）1.什么是定位：css中的position属性，position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置⼀些不规则的布局，使⽤TLBR(top,left,bottom,right)来调整元素位置。
2.各个属性值的描述：static(静态) 没有特别的设定，遵循基本的定位规定，不能通过z-index进⾏层次分级，在普通流中，各个元素默认的属性。
relative(相对定位) 对象不可层叠、不脱离⽂档流，参考⾃⾝静态位置通过 top,bottom,left,right 定位。
absolute(绝对定位) 脱离⽂档流，通过 top,bottom,left,right 定位。
选取其最近⼀个最有定位设置的⽗级对象进⾏绝对定位，如果对象的⽗级没有设置定位属性，absolute元素将以body坐标原点进⾏定位。
fixed（固定定位）这⾥所固定的参照对像是可视窗⼝⽽并⾮是body或是⽗级元素。
使⽤了fixed的元素不会随着窗⼝的滚动⽽滚动。
属于absolute的⼦集。
3.各个属性值的具体作⽤：A.static：（静态，默认的属性）通常情况下都不会使⽤，但是会存在有些场景，就是你想把position的值从其他值修改成默认时使⽤。
B.relative：（相对定位）⼀个元素设定了position:relative，因为其不脱离⽂本流，如果不设置TLBR(top,left,bottom,right)的话，它的位置不会被改变，且不会影响当前布局，相当于没事发⽣⼀样。
如果设置了TLBR后，元素就可以向指定的⽅向偏移，但是他原有的位置还是占据着的，例⼦如图：图⼀：对child-1 设置了position：relative图⼆：再对child-1 调位置 top：20px left：20pxC.absolute: (绝对定位)，完全脱离⽂本流（普通流），原来的位置不再占有，且可以设置TLBR任意移动；特别说明⼀下，对元素设置了absolute后，其⽗级元素都没有设置position：absolute/relative/fixed其会以body为⽗级。
CSS常⽤样式–背景属性⼀、背景颜⾊ background-color属性名：background-color作⽤：在盒⼦区域添加背景颜⾊的修饰加载区域：在 border 及以内加载背景颜⾊属性值：颜⾊名、颜⾊值<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;background-color: slateblue;}</style></head><body><div class="box"> 背景颜⾊ </div></body></html>⼆、背景图⽚ background-image属性名：background-image作⽤：给盒⼦添加图⽚的背景修饰加载范围：默认的加载到边框及以内部分。
后期如果图⽚不重复加载，加载从 border 以内开始属性值：url(图⽚路径)url：uniform resource locator，统⼀资源定位符，⼩括号内部书写查找图⽚的路径.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagouwang.jpg);}如果图⽚不重复，从 border 以内开始加载背景图和背景颜⾊可以同时设置，背景图会压盖背景颜⾊，没有背景图的区域会显⽰背景颜⾊三、背景重复 background-repeat属性名：background-repeat作⽤：设置添加的背景图是否要在盒⼦中重复进⾏加载根据属性值不同，有四种重复加载⽅式| 属性值 | 作⽤ || repeat | 重复，默认属性值，表⽰会使⽤背景图⽚重复加载填满整个盒⼦背景区域 || no-r epeat | 不重复，不论背景图是否⼤于盒⼦范围，都只加载⼀次图⽚ || repeat--x | ⽔平重复，使⽤背景图⽚⽔平重复加载铺满第⼀⾏，垂直⽅向不重复 || repeat--y | 垂直重复，使⽤背景图⽚垂直重复加载铺满第⼀列，⽔平⽅向不重复 |.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagou_small.jpg);/* background-repeat: repeat; *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; */background-repeat: repeat-y;}四、背景定位 background-position属性名：background-position作⽤：主要⽤于设置不重复的图⽚在背景区域的加载开始位置属性值：分为三种写法，单词表⽰法、像素表⽰法、百分⽐表⽰法。
网页设计中利用CSS实现背景图片平铺的技巧在我们进行网站的设计制作过程中，使用css来针对背景图片进行设置，其实就与传统的做法一样十分简单方便。
不过，相对于传统的一些操作方式，css可以提供更多的可控选项，我们先了解一下一引起最基本的设置图片的方法。
css代码如下：#content {border:1px solid #000fff;height:500px;background-image:url(images/bg.GIF);}xhtml代码如下：<div id="content"></div>在网页中id为content的元素，都被我们设置了使用images文件夹下的bg.GIF作为背景。
这与传统表格式布局中的设置并无差别。
不过在默认状态下，背景同样以平铺的方式出现在元素之中。
然而使用css来控制背景当然不可能如此简单，实际上css为我们提供了更多用于控制背景的属性，包含可以控制元素是否需要平铺。
改进后的代码：#content {border:1px solid #000fff;height:500px;background-image:url(images/bg.GIF);background-repeat: repeat-x;}加了background-repeat:repeat-x;之后,背景现在只在X轴即横向进行了平铺操作，纵向并没有进行平铺。
这便是css对于背景细节的控制之一。
background-repeat是针对背景平铺的属性设置，可选的值包含：复制代码代码如下:repeat 即默认方式，完全平铺背景;no-repeat 在X及Y轴方向均不平铺;repeat-x 横向平铺背景;repeat-y 纵向平铺背景。
另外，需要注意的是平铺选项是在网页设计中能够经常使用到的一个选项，例如网页中常用的渐变式背景。
采用传统方式制作渐变式背景，往往需要宽度为1px的背景进行平铺，但为了使纵向不再进行平铺，往往高度设为高于1000px。
CSS中背景图片的定位
作者：请叫我二狗哥
假若设计图效果如下图所示，背景图片定位在元素的距离右侧边缘15px、底部边缘8px， div元素背景颜色#9cbbbe。
想要通过CSS代码实现这种背景图片定位效果，可以通过不同的属性方案实现。
一、backgrond-position方案
div {
/* 核心样式 */
background:#9cbbbe url(./GreyWolf-alpha.png) no-repeat ;
background-position:right15px bottom8px;
/* 外围样式 */
width:500px;
height:400px;
}
若是要考虑不支持background-position属性的早期浏览器兼容性问题，可以做一个恰当的回退方案：
div {
/* 回退方案 */
background:#9cbbbe url(./GreyWolf-alpha.png) no-repeat ri ght bottom ;
/* 核心样式 */
background-position: right15px bottom8px;
/* 外围样式 */
width:500px;
height:400px;
}
在不支持background-position属性的浏览器中背景图片置于右下角，否则没有回退机制，背景图片会置于默认右上角。
不考虑回退机制可以采用简写方式的代码，不太推荐这种写法，因为若浏览器不兼容简写属性，将导致整个样式丢失不支持：
div {
/* 核心样式 */
background:#9cbbbe url(./GreyWolf-alpha.png) no-repeat ri ght15px bottom8px ;
/* 外围样式 */
width:500px;
height:400px;
}
二、background-origin方案
div {
/* 核心样式 */
background: #9cbbbe url(./GreyWolf-alpha.png) no-repeat rig ht bottom;
padding: 10px15px;
background-origin: content-box;
/* 外围样式 */
width: 470px;
height: 380px;
}
background-origin属性用于控制背景位置区域，默认值为padding-box，表示背景图片是以内间距盒（padding-box）相关进行绘制。
背景源设置为content-box是背景图片以内容盒（content-box）相关进行绘制。
background-origin并不影响背景颜色（background-color）,若需要对背景颜色范围进行控制，可以使用背景剪切属性（background-clip）。
三、calc()方案
div {
/* 核心样式 */
background: #9cbbbe url(./GreyWolf-alpha.png) no-repeat;
background-position: calc(100% - 15px) calc(100% - 10px);
/* 外围样式 */
width: 500px;
height: 400px;
}
基于calc()函数计算背景图片的位置。
需要注意在calc()计算时，数值与减号“-”之间必须有空格。
1、在background-position中百分比数值代表什么含义？
W3C官网中对background-position百分比数值有如下规定：
A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size.
For example, with a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of, usually, the box’s padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the area. With a value pair of 75% 50%, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.
译文：
水平偏移设置为百分比值，相对于（背景定位区域的宽度-背景图像的宽度）。
垂直偏移的百分比是相对于（背景定位区域的高度-背景图像的高度）的，其中图像的大小是由background-size给出的大小。
例如，值对为0％0％时，图像的左上角通常与框的内间距边缘的左上角对齐。
100％100％的值对将图像的右下角放置在该区域的右下角。
使用值为75％50％的值对时，图像的75％跨度和50％向下的点将放置在区域的75％跨度和50％的点下。
W3C官网中的英文介绍的核心就是background-position属性中的百分比数值是将背景图片中的点与背景定位区域的点进行对应数值的映射来进行定位。
即背景图片中自身宽度75%、高度50%的点对应背景定位区域宽度75%、高度50%
的点来实现定位。
以上图为示例进行实例扩展。
矩形区域ABCD代表背景定位区域，矩形abcd代表背景图片大小。
在实例中AB=356px,AD=236px,ab=236px,ad=118px。
在background-position:75%50%; 值的渲染计算时，其等价像素计算值可以如下换算（即a点到AB、AD的距离）：水平方向距离=AB*75%-ab*75%
代入数值 356*75%-236*75%=90
垂直方向距离= AD*50%-ad*50%
代入数值 236*50%-118*50%=59
即上面实例中的background-position:75%50%;等价于background-position:90px59px;
通过代码进行模拟在浏览器中是完全等效的：
div {
/* 核心样式 */
background: #9cbbbe url(./greenPic.png) no-repeat;
/* 外围样式 */
width: 356px;
height: 236px;
/* background-position: 75% 50%; */
background-position: 90px59px; }。
