2023年6月20日发(作者：)

css拖动样式_css核⼼样式css核⼼样式font-weight粗细作⽤：设置⽂字粗细，是font的单⼀属性。属性值：有两种类型，（1）单词类型，（2）数字类型。单词类型：

属性值 | 说明 --- | --- normal | 默认值，标准字体 bold | 粗体，b（没有语义）、Strong（有语义）标签的默认值 bolder | 更粗的字体 lighter | 更细的字体数字类型：100-900之间的整百数字，数字越⼤，字体越粗。其中，400等价于normal，700等价于bold。实际100~500都是正常的，600~900都是加粗的。font-style字体风格作⽤：设置⽂字是否斜体显⽰，是font的单⼀属性。属性值 | 说明 --- | --- normal | 正常字体，默认 italic | 设置斜体的⽂字，主要针对英⽂。且带有倾斜属性的字体才能设置倾斜操作。i标签的默认值。 obique | 倾斜的⽂字，只是将⽂字倾斜显⽰，与字体⽆关。没有倾斜属性的字体也可以设置倾斜操作。（不常⽤，了解即可）line-height⾏⾼作⽤：设置的是⼀⾏⽂字实际占有的⾼度，⽂字字号在⾏⾼中是垂直居中的，font的单⼀属性，⽂字有默认⾏⾼。属性值 | 说明 --- | --- px像素值 | 设置⾏⾼的具体像素值 百分⽐数值 | 参考本⾝字号像素值的百分⽐量取⾏⾼的步骤：（fireworks⼯具）确定字体和字号。根据已知的字号和字体，在书写上下对齐的两⾏⽂字，调整属性⾯板的⾏⾼值，直到两⾏⽂字都对齐。font字体综合写法1：两个属性，必须有字号和字体，字号必须在前，字体在后。写法2：三个属性，字体，字号，⾏⾼。书写⽅式： 字号/⾏⾼ 字体写法3：如果需要设置加粗和斜体，这两个属性只能写在最前⾯，两个值之间可以相互换位置。后⾯的字号，⾏⾼，字体不能变换位置。text-align⽔平对齐作⽤：设置⽂本⽔平⽅向的对齐⽅式属性值 | 说明 --- | --- left | 左对齐，默认 right | 右对齐 center | 居中对齐text-decoration⽂本修饰作⽤：设置⽂本整体是否有线条的修饰效果。属性值 | 说明 --- | --- none | 没有修饰，⼤部分标签的默认值 overline | 上划线 line-through | 中划线（删除线），del标签的默认值underline | 下划线，a标签的默认值text-indent⽂本缩进作⽤：设置段落⾸⾏是否缩进。属性值 | 说明 --- | --- px单位 | 表⽰缩进多少像素 em单位 | 缩进⼏个中⽂字符的位置（常⽤） 百分⽐ | 缩进⽂字所在标签的⽗级标签的width属性值得百分⽐属性值区分正负，正数代表向右缩进，负数代表向左缩进。盒模型属性宽度width，⾼度height，边框border，内边距padding，外边距margin。常见盒模型区域，根据不同属性的效果，可以划分书写元素内容区域：width+height盒⼦可以实体化（可以加颜⾊）的区域：width+height+padding+border盒⼦实际占位的位置：width+height+padding+border+margin宽度width：作⽤：设置元素的宽度属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的宽度。（参考⽗元素） px | 像素值定义的宽度 % | 定义参考⽗元素宽度width的百分⽐宽度 注：body元素⽐较特殊，不需要设置宽度，⾃适应浏览器窗⼝的宽度。⾼度height：作⽤：设置元素的⾼度。属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的⾼度，⾼度会被内容撑开 px | 像素值定义的⾼度 % | 定义参考⽗元素⾼度height的百分⽐⾼度内边距padding：作⽤：设置元素内部到宽⾼之间的距离。特点：可以添加背景，但是不能书写内容。属性值：常⽤px为单位的数值。padding是⼀个复合属性，有四个⽅向。顺序为上右下左，顺时针⽅向。简写（四种）：四值法：padding: 10px 20px 30px 40px，上，右，下，左。三值法：padding: 10px 20px 30px，上，左右，下。⼆值法：padding: 10px 20px，上下，左右。单值法：padding: 10px，上右下左。边框border：作⽤：设置的是内边距外⾯的边界区域，作为合资实体化的最外层。属性值：由三个值组成，分别为线的宽度，线的形状，线的颜⾊。顺序不是必须的。复合属性。线宽border-width，线型border-style，边框颜⾊border-color。线宽border-width，有四值写法。线型border-style，有四值写法，属性值：none⽆边框，solid实线，dashed虚线（有兼容问题），dotted点线。边框颜⾊border-color，有四值写法。按边框⽅向划分：border-top，border-right，border-bottom，border-left。根据⽅向和类型，进⼀步细分：border-⽅向-类型。顺序不能错。外边距margin：作⽤：设置的是盒⼦和盒⼦之间的距离。特点：不能渲染背景。属性值：常⽤px为单位的数值。外边距的设置⽅式与内边距的⽅式同。盒模型扩展-清除默认样式作⽤：为避免默认样式对整体布局效果造成影响。⼤部分容器级标签都有默认边距。ul和ol列表有默认的列表前缀，需要清除list-style属性。a标签的默认样式：设置color和text-decorationh系列标签,b标签，strong标签有加粗效果，设置font-weight。给body设置整体⽂字样式，让⼤部分后代标签全部去继承。body { color: #666; font-size: 14px; font-family: Arial,"宋体";}盒模型扩展-height应⽤根据不同的需求，⾼度可以设置，也可以不设置，如果设置了⾼度，盒⼦占有的⾼度位置就定死了，后⾯的同级元素会紧挨着加载，如果不设置⾼度，会根据标签内部内容⾼度⾃动撑开。必须设置⾼度：设计图中盒⼦⾼度占位是固定的，后⾯同级元素在⾼度下⾯加载。注：设置⾼度后，如果盒⼦中的内容很多的话，也不会把盒⼦撑开，且盒⼦后⾯的元素位置不变。overflow属性：对溢出的内容显⽰进⾏设置属性值| 说明 --- | --- visible | 默认值，溢出的部分显⽰。 hidden | 溢出的部分隐藏，隐藏超过边框范围的内容 scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏的部分，多出盒⼦⾼度的部分不显⽰，不论有没有溢出，⽔平和垂直⽅向都会出现滚动条 auto |⾃动的，如果没有溢出就正常显⽰，如果有溢出，溢出的⽅向⾃动出现滚动条必须不设置⾼度：要求盒⼦⾼度必须⾃适应内部内容的⾼度，或者设置height的属性值是⾃动的。盒模型扩展-居中⽂本⽔平居中：text-align属性，不论单⾏或多⾏都可以设置。单⾏⽂本垂直居中：设置⽂字的line-height等于盒⼦的⾼度。多⾏⽂本垂直居中：让元素⾼度⾃适应或者正好等于多⾏⽂本的⾼度，设置元素内边距上下值相同。元素垂直居中：让⽗元素⾼度⾃适应，⼦元素⾼度⾃动撑开⽗级的⾼度，再给⽗元素设置相同的上下边距。元素⽔平居中：⼦盒⼦的宽度低于⽗盒⼦的宽度，可以设置⼦盒⼦的margin值，为margin：0 auto；原因：auto只在⽔平⽅向有作⽤，⽔平⽅向的margin如果设置为auto，边距会⾃动⽆限增⼤，直到撑满整个⽗元素除了⼦元素之外剩余的区域，如果两个⽔平⽅向都是auto，两边都要⽆限⼤，只能达到⼀个平衡，两边距离相同，导致盒⼦居中。盒模型扩展-⽗⼦盒模型⼀般情况下，⼀个⽗元素内部可以放⼀个或者多个⼦元素，⽽且多个⼦元素要排成⼀⾏显⽰，必须保证⽗元素的宽度⼀定要⾜够（不考虑溢出情况），需要循环⼀个设置尺⼨的规律：所以⼦元素的宽度加在⼀起不能⼤于⽗元素的宽度width。⽗元素的width >= 所有⼦元素width + padding + border + margin如果不满⾜条件：要么多余的⼦元素掉下来不能在⼀排，要么溢出⽗元素。特殊情况：盒模型⾃动内减（只针对width）⽗⼦盒模型中，只有⼀个⼦元素，且⼦元素是类似div标签必须占⼀⾏的。不设置⼦元素的width属性，⼦元素的width属性值会⾃动加载⽗级元素的width。如果同时设置了⼦元素⽔平⽅向的padding和border、margin，不需要⼿动去进⾏内减，⼦元素的width会⾃动收缩尺⼨。⼦元素所有⽔平⽅向的属性值加和等于⽗元素的宽度。盒模型扩展-margin塌陷现象margin塌陷现象：在垂直⽅向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，⽽是两个边距中值⽐较⼤的，边距⼩的塌陷到了边距值⼤的值内部。同级元素塌陷：上⾯的元素有下边距，下⾯的元素有上边距，两个边距相遇，真正盒⼦间距离是较⼤的那个值。⽗⼦元素塌陷（margin-top传递问题）：⽗⼦元素之间也会出现margin塌陷，（1）⽗元素和⼦元素都设置了同⽅向的margin-top值，两个属性之间没有其他内容进⾏隔离，导致两个属性相遇，发⽣margin塌陷。（2）本⾝⽗元素与上⼀个元素的距离是0，⼦元素如果设置了垂直⽅向的上边距，会带着⽗级元素⼀起掉下来（⽗元素的上边距0塌陷到了⼦元素的上边距30⾥⾯）。解决办法：同级元素：如果两个元素垂直⽅向有间距，只需要设置给⼀个元素，不要进⾏拆分。⽗⼦元素：让两个边距不要相遇，中间可以使⽤⽗元素border或padding将边距分隔开；更加常⽤的⽅法，⽗⼦盒模型之间的距离就不要⽤⼦元素的margin去设置，⽽是⽤⽗元素的padding挤出来。注：⽔平⽅向没有margin塌陷。标准⽂档流标准⽂档流，指的是元素排版布局过程中，元素会默认⾃动从左往右，从上往下的流式排列⽅式。前⾯内容发⽣了变化，后⾯的内容位置也会随着发⽣变化。html就是⼀种标准⽂档流⽂件。HTML中的标准⽂档流特点通过两种⽅式体现：微观现象和元素等级。微观现象：（1）空⽩折叠现象。（2）⽂字类的元素如果排在⼀⾏会出现⼀种⾼低不齐、底边对齐效果。（3）⾃动换⾏，元素内⼀⾏内容写满元素的width时会⾃动进⾏换⾏。元素等级：在标准流中，⼤部分元素是区分等级的，习惯将元素划分为⼏种常见的加载级别：块级元素，⾏内元素，⾏内块元素。块级元素：a、块级元素可以设置宽⾼，在浏览器中正常加载。b、块级元素必须独占⼀⾏，不能与其他任何标签并排⼀⾏。c、块级元素如果不设置width，会⾃动撑满⽗级的width区域；⾼度height不设置，会被内容⾃动撑开⾼度。⾏内元素： a、⾏内元素不能设置宽度和⾼度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题，b、⾏内元素可以与其他的⾏内或⾏内块元素并排显⽰。c、⾏内元素不论是否设置宽⾼，宽⾼只能被内容⾃动撑开。⾏内块元素：a、可以设置宽度和⾼度。b、可以与其他的⾏内或⾏内块并排显⽰。c、如果不设置宽⾼，要么以原始尺⼨加载，要么被内容⾃动撑开。d、具有标准流的微观性质，例如空⽩折叠现象。显⽰模式-display标准流中的元素有⾃⼰默认的浏览器加载模式，但是加载模式不是⼀成不变的，后期可以通过display属性改变⼀个标签的显⽰模式。属性值 | 作⽤ --- | --- block | 以块级元素模式加载，具备块级特点 inline | 以⾏内元素模式加载，具备⾏内特点 inline-block | 以⾏内块模式加载，具备⾏内块特点 none | 直接隐藏，不占标准⽂档流的位置脱离⽂档流：display属性改变的显⽰模式并没有改变标准流本质性质，页⾯还是只能从上往下加载，存在空⽩折叠现象等微观性质。要想实现更多的页⾯布局效果需要脱离标准流的限制。元素脱离标准⽂档流的⽅法包括：浮动、绝对定位、固定定位。浮动定义：⼀种⾮常重要的布局属性。属性值：left--左浮动，right--右浮动。作⽤：让元素脱离标准流，同⼀级的浮动元素可以并排显⽰。性质：（1）浮动的元素脱离标准流。标准⽂档流特点：区分⾏块。浮动的元素脱离了标准流的限制，具备⾏块⼆象性，浮动的元素可以设置宽⾼，还可以并排显⽰，且不会有空⽩折叠现象，如果元素不设置宽⾼，可以被元素内容⾃动撑开。（2）浮动的元素依次贴边。 （3）浮动的元素没有margin塌陷。margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不在具有margin塌陷现象。 （4）浮动的元素会让出标准流的位置元素浮动后，脱离了标准流，会将原来占有的标准流位置让给后⾯的⼀个同级元素。压盖效果（字围现象），ie6、ie7会出现兼容问题，所以⼀般不会使⽤这种⽅法，⼀般使⽤定位制作。如果没有特殊需求，不允许⼀个⽗元素的⼦元素有的浮动，有的不浮动，同级元素中有⼀个浮动其他的也要浮动。浮动问题：问题1：标准流中的元素，不设置⾼度的情况下，都能被内部的标准流元素⾃动撑⾼。如果内部的⼦元素进⾏了浮动，浮动的⼦元素是撑不⾼标准流⽗亲的。问题2：⽗元素没有⾼度，会影响后⾯元素的标准流位置，如果浮动的⼦元素⾜够⾼时，有可能影响到后⾯浮动元素的贴边。清除浮动清除浮动1：给标准流的⽗元素强制⼀个合适的⾼度。解决：⽗元素有⾼度了，前⾯的浮动不能影响后⾯元素的标准流位置和贴边。问题：⽗元素⾼度不是⾃适应，⼀旦⼦元素⾼度变化，问题可能再次出现。清除浮动2：clear属性给标准流⽗元素添加clear属性，⽗元素不受前⾯浮动影响，不会再占有浮动让出的位置。属性值 | 说明 --- | --- left | 清除前⾯左浮动带来的影响 right | 清除前⾯右浮动带来的影响 both | 清除前⾯所以浮动带来的影响解决：浮动元素影响后⾯元素标准流位置和贴边问题：⽗元素不能⾼度⾃适应，两个⽗元素之前如果有margin效果不正确。清除浮动3：隔墙法外墙法：在两个⼤的⽗盒⼦之间，添加⼀个空的div标签，标签上带有clear：both属性。解决：浮动影响后⾯元素标准流位置和贴边，模拟⽗元素间的距离。问题：⽗元素没有⾼度⾃适应。内墙法：在⽗元素内部，所以浮动的⼦元素后⾯添加⼀个空的div元素，标签⾼度为0，添加clear属性。解决：⽗元素⾼度⾃适应，浮动影响后⾯的元素位置和贴边。缺点：浮动是css样式属性带来的问题，内墙法使⽤html结构去辅助解决问题，如果页⾯中浮动元素很多，需要添加多个没有语义的空标签，造成html结构的冗余。清除浮动4：伪类本质：使⽤css的伪类，模拟⼀堵内墙。伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。:after：这个伪类表⽰选中的是某个标签内部的最后的位置。将伪类添加给⼀个选中⽗盒⼦的选择器后⾯，⼀般给需要清除浮动的⽗盒⼦设置⼀个clearfix的类名。 .clearfix:after {content: " "; //可写内容

display: block;height: 0px;clear: both;visibility: hidden; //content有属性的时候写}清除浮动5：溢出隐藏给内部有浮动⼦元素的⽗元素添加溢出隐藏overflow:hidden属性，可以解决浮动的所有问题。⾼度⾃适应原因：⼀个⽗元素没有设置⾼度，同时设置了溢出隐藏，浏览器在加载盒⼦尺⼨时，遇到溢出隐藏浏览器会强制性的去检索内部的⼦元素的⾼度，不论⼦元素是标准流还是浮动，都会将最⾼的⾼度作为⽗盒⼦⾼度加载。浮动影响后⾯的元素：⽗元素有了⾼度以后，可以管理住内部所有的浮动元素，不会延伸到后⾯标签中，影响贴边效果。总结：如果⽗元素⾼度是固定的，建议使⽤height属性解决。如果⽗元素⾼度需要⾃适应，建议使⽤overflow属性解决浮动问题。css伪类选择器概念：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使⽤，伪类选择器后⾯添加的样式不⼀定⽴即加载到浏览器之上，只有⽤户触发了对应的⾏为，伪类的样式才会⽴即加载。伪类选择器的权重与普通的类选择器相同。a标签的伪类：link访问前状态，visited访问后状态，hover⿏标悬浮状态，active⿏标点击状态。a标签的伪类书写顺序：link，visited，hover，active。⼀般会将访问前和访问后状态设置为⼀样的效果，保证了页⾯的统⼀性。css背景属性背景颜⾊：background-color。背景图⽚：background-image。背景重复：background-repeat。背景定位：background-position。属性值：分为三种写法，单词表⽰法，像素表⽰法，百分⽐表⽰法。单词表⽰法：⽔平⽅向可选单词：left，center，right。垂直⽅向可选单词：top，center，bottom。背景附着：background-attachment。作⽤：设置的是背景图⽚是否要随着页⾯或者是盒⼦的滚动⽽滚动。属性值 | 说明 --- | --- scroll | 滚动的，表⽰背景图⽚与盒⼦保持相对位置不变，随着页⾯的滚动⽽滚动。 fixed | 固定的，背景图的定位的参考点从盒⼦border以内的左上顶点变为了浏览器窗⼝的左上顶点，页⾯滚动时，浏览器窗⼝的左上顶点是不变的，导致背景图固定在浏览器窗⼝的某个位置，不会随着页⾯滚动⽽滚动。综合写法时，没有顺序要求。⼀般background: url() no-repeat center top fixed #fff;注意事项： 1、如果属性值没有设置完全，其他没有设置的单⼀属性会按照默认值加载。2、如果想去层叠综合属性中的⼀部分，其他的属性保持不变，最好使⽤单⼀属性写法进⾏层叠。背景应⽤-背景图替换插⼊图背景图替换插⼊图：如果想解决SEO问题，可以将HTML结构中，插⼊图换成搜索关键字，然后使⽤css添加背景给a标签或者h1标签。⽂字隐藏法：（1）将⽂字字号设为0（ie8以下不兼容），（2）给abiaoqian设置⼀个text-indent属性，属性值为负的很⼤的值，⽂字会⾛到盒⼦外部，直接在设置溢出隐藏。背景应⽤-padding区域背景图padding区域可以加载背景，但是不会有书写内容。⽅法：在⼀个盒⼦中有背景图部分，⽽且有⽂字内容，⽂字会让开背景图区域进⾏加载，背景区域应该使⽤padding挤出位置。四个⽅向都可以。背景应⽤-精灵图技术当⽤户访问⼀个⽹站时，需要向服务器发送请求，⽹页上的每张图⽚都要经过⼀次请求才能展现给客户。然⽽，⼀个⽹页中旺旺会应⽤很多⼩的背景图像作为修饰，当⽹页中的图像过多时，服务器就会频繁地接受和发送请求，这将⼤⼤降低页⾯的加载速度。为了更有效地减少服务器接受和发送请求的次数，提⾼页⾯的加载速度，出现了css精灵技术。css精灵：是处理⽹页背景图像的⽅式，它将⼀个页⾯涉及到的所有的零星背景图像都集中到⼀张⼤图中去，然后将⼤图应⽤于⽹页，这样，当⽤户访问该⽹页时，只需要向服务器发送⼀次请求，⽹页中的背景图像即可全部展⽰出来。通常情况下，这个由很多⼩的背景图合成的⼤的图就被成为精灵图。技术依据：（1）将⽹页中需要⽤到的⼩的尺⼨的背景图制成⼀张背景透明的png图⽚。（2）利⽤背景定位技术，将精灵图的每个⼩图⽚加载到对应的标签上。注意事项：（1）精灵图上放的都是⼩的修饰性质的背景图，插⼊图⽚不能⽹上放。（2）精灵图的宽度取决于最宽的那个背景图⽚的标签宽度。（3）精灵图可以横向摆放，也可以纵向摆放，但是每个图⽚之间必须有留⾜够多的空⽩，保证背景图⽚加载到⼀个标签内部时，不能出现多余内容。（4）在精灵图的底部，尽量留出⼀些空⽩，⽅便以后添加其他精灵图。css3新增背景属性背景半透明：颜⾊值增加了⼀种rgba模式。rgba模式：在rgb基础上增加了⼀个不透明度的设置，不透明度alpha取值范围在0-1之间，0表⽰完全透明，1表⽰完全不透明，0.5表⽰半透明。背景半透明指的是盒⼦背景半透明，不会影响盒⼦⾥⾯的内容。背景缩放background-size（只能单独写，不能合写）：通过这个属性设置背景图⽚的尺⼨，就像我们设置img的尺⼨⼀样，在移动web开发中左屏幕适配应⽤⾮常⼴泛。属性值 | 说明 --- | --- px值 | 1-2个像素值，只设置1个值，垂直⽅向等⽐例拉伸；设置2个值，按照设置值加载 百分⽐ | 同像素值设置⽅法相同，设置百分⽐时，数值参照盒⼦的宽、⾼属性 cover | ⾃动调整缩放⽐例，把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。（填满区域） contain | ⾃动调整缩放⽐例，把图像扩展⾄最⼤尺⼨，保证图⽚始终完整显⽰在背景区域。 （图⽚最⼤，可能会有空⽩）多背景：css3中规定，⼀个盒⼦上，可以添加多个背景图⽚。background-image的属性值书写时，以逗号分隔多背景的url路径地址。背景加载时，先写的背景压盖后写的背景图⽚。定位定位属性：position属性值 | 说明 --- | --- relative | 相对定位 absolute | 绝对定位 fixed | 固定定位作⽤：设置定位的元素，它需要根据某个参考元素发⽣位置的偏移。偏移量属性：定位的元素想发⽣位置的移动，必须搭配偏移量属性进⾏设置。⽔平⽅向：left，right。垂直⽅向：top，bottom。属性值：常⽤px为单位的数值，或者百分⽐。相对定位属性值：relative。参考元素：标签加载的原始位置。必须搭配偏移量属性才能发⽣位置移动。性质：相对定位的元素不脱离标签的原始状态（标准流，浮动），不会让出原来占有的位置。元素显⽰效果上：原位留坑，形影分离。注意：（1）偏移量属性区分正负。（2）同⼀⽅向上，不能设置两个偏移量属性，如果⽔平⽅向同时设置了left和right属性，只会加载left属性。垂直⽅向只会加载top属性。（3）由于相对定位的参考元素是⾃⾝，left的正值等价于right的负值，top的正值等价于bottom的负值。实际应⽤：（1）由于相对定位元素⽐较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的⼦绝⽗相情况。（2）相对定位⽐较稳定，可以在占有原始位置的情况下，对加载效果区域进⾏位置调整，进⾏微调设置。或者对⽂字进⾏微调。绝对定位属性值：absolute。参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考body。必须搭配偏移量属性才有位置的移动。性质：绝对定位的元素脱离标准流，会让出标准流的位置，可以设置宽⾼，也可以随时定义位置，绝对定位的元素不设置宽⾼时只能被内容撑开。注意：（1）绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。（2）由于参考点不同，left的正值不在等于right的负值。body为参考元素的参考点：以body为参考元素时，参考点的确定与偏移量⽅向有关。如有top参与的定位，参考点就是body页⾯的左上顶点和右上顶点。⾃⾝的对⽐点是盒⼦的所有盒模型属性最外⾯的左上⾓或右上⾓。如有bottom参与的定位，参考点就是body页⾯⾸屏的坐下顶点或右下顶点。对⽐点是盒⼦的所有盒模型属性最外⾯的左下⾓或右下⾓。注：实际应⽤中，如果以body为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使⽤body作为参考元素。祖先级为参考元素参考元素：参考的是祖先元素中有任意定位的，在html结构中距离⽬标最近的祖先。根据绝对定位的参考元素的位置类型不同，有三种定位组合⽅式：⼦绝⽗相，⼦绝⽗绝，⼦绝⽗固，由于相对定位的祖先级位置更稳定，⼤多使⽤⼦绝⽗相的情况。祖先元素参考点如果绝对定位的参考元素是某个祖先级，参考点是盒⼦border以内的四个顶点，组合⽅向决定了参考点。绝对定位的元素只关⼼对⽐点和参考点之间的距离，会忽视参考元素的padding区域。left、top：参考点是祖先的border以内的左上顶点，对⽐点是盒⼦⾃⾝的左上⾓。right、top：参考点是祖先的border以内的右上顶点，对⽐点是盒⼦⾃⾝的右上⾓。left、bottom：参考点是祖先的border以内的左下顶点，对⽐点是盒⼦⾃⾝的左下⾓。right、bottom：参考点是祖先的border以内的右下顶点，对⽐点是盒⼦⾃⾝的右下⾓。固定定位属性值：fixed。参考元素：浏览器窗⼝。参考点：浏览器窗⼝的四个顶点。跟偏移量组合⽅向有关。由于浏览器窗⼝的四个顶点位置不会发⽣变化，会导致固定定位的元素会始终显⽰在定位位置。性质：脱离标准流，让出标准流位置，可以设置宽⾼，根据偏移量属性可以任意设置在浏览器窗⼝的位置。固定定位的元素会始终显⽰在浏览器窗⼝上。定位应⽤-压盖所有的定位类型都可以实现压盖效果。由于绝对定位的元素脱离标准流，不占据标准流位置，压盖效果更加彻底，在实际⼯作中，常见的是绝对定位制作的压盖。定位应⽤-居中定位的元素，如果想在参考元素中居中显⽰，有⾃⼰的居中⽅法：（1）在居中的⽅向使⽤⼀个偏移量属性，例如left，设置属性值为50%。导致图⽚的左顶点移动到参考元素的中⼼位置。（2）给绝对定位的⼦盒⼦设置⼀个同⽅向的margin，例如margin-left，属性值为负的⾃⾝宽度的⼀半。（不论⼦盒⼦的宽度是否⽐参考元素更宽，都能使⽤以上⽅法进⾏居中设置。 ）扩展：（1）解决标准流中，宽的⼦盒⼦在窄的⽗盒⼦中的居中，可以设置⼤的⼦盒⼦相对定位，利⽤相对定位居中的⽅法进⾏居中。 （⼤盒⼦在⼩盒⼦中居中）（2）浮动的元素居中，在不改变原始浮动状态情况下，可以利⽤相对定位居中⽅法。压盖顺序z-index默认压盖顺序：定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。如果都是定位的元素，在html中后写的定位压盖先写的定位。⾃定义压盖顺序：如果想要更改定位的元素的压盖顺序，可以设置⼀个z-index属性。属性值：数字。注意：属性值⼤的会压盖属性值⼩的，设置z-index属性的会压盖没有设置的。如果属性值相同，⽐较html书写顺序，后写的压盖先写的。z-index属性只能设置给定位的元素才会⽣效，如果给没有定位的元素设置，不会⽣效。⽗⼦盒模型中，如果⽗⼦盒⼦都进⾏了定位，与其他的⽗⼦级有压盖的部分：⽗级盒⼦：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值⼤的压盖值⼩的。⼦级盒⼦：如果⽗级没有设置z-index属性，⼦级z-index⼤的会压盖⼩的；如果⽗级设置了z-index值，⽆论⼦级值是多少，都是⽗级的值⼤的⼦级压盖⽗级值⼩的⼦级，俗称“从⽗效应”。

2023年6月20日发(作者：)

css拖动样式_css核⼼样式css核⼼样式font-weight粗细作⽤：设置⽂字粗细，是font的单⼀属性。属性值：有两种类型，（1）单词类型，（2）数字类型。单词类型：

属性值 | 说明 --- | --- normal | 默认值，标准字体 bold | 粗体，b（没有语义）、Strong（有语义）标签的默认值 bolder | 更粗的字体 lighter | 更细的字体数字类型：100-900之间的整百数字，数字越⼤，字体越粗。其中，400等价于normal，700等价于bold。实际100~500都是正常的，600~900都是加粗的。font-style字体风格作⽤：设置⽂字是否斜体显⽰，是font的单⼀属性。属性值 | 说明 --- | --- normal | 正常字体，默认 italic | 设置斜体的⽂字，主要针对英⽂。且带有倾斜属性的字体才能设置倾斜操作。i标签的默认值。 obique | 倾斜的⽂字，只是将⽂字倾斜显⽰，与字体⽆关。没有倾斜属性的字体也可以设置倾斜操作。（不常⽤，了解即可）line-height⾏⾼作⽤：设置的是⼀⾏⽂字实际占有的⾼度，⽂字字号在⾏⾼中是垂直居中的，font的单⼀属性，⽂字有默认⾏⾼。属性值 | 说明 --- | --- px像素值 | 设置⾏⾼的具体像素值 百分⽐数值 | 参考本⾝字号像素值的百分⽐量取⾏⾼的步骤：（fireworks⼯具）确定字体和字号。根据已知的字号和字体，在书写上下对齐的两⾏⽂字，调整属性⾯板的⾏⾼值，直到两⾏⽂字都对齐。font字体综合写法1：两个属性，必须有字号和字体，字号必须在前，字体在后。写法2：三个属性，字体，字号，⾏⾼。书写⽅式： 字号/⾏⾼ 字体写法3：如果需要设置加粗和斜体，这两个属性只能写在最前⾯，两个值之间可以相互换位置。后⾯的字号，⾏⾼，字体不能变换位置。text-align⽔平对齐作⽤：设置⽂本⽔平⽅向的对齐⽅式属性值 | 说明 --- | --- left | 左对齐，默认 right | 右对齐 center | 居中对齐text-decoration⽂本修饰作⽤：设置⽂本整体是否有线条的修饰效果。属性值 | 说明 --- | --- none | 没有修饰，⼤部分标签的默认值 overline | 上划线 line-through | 中划线（删除线），del标签的默认值underline | 下划线，a标签的默认值text-indent⽂本缩进作⽤：设置段落⾸⾏是否缩进。属性值 | 说明 --- | --- px单位 | 表⽰缩进多少像素 em单位 | 缩进⼏个中⽂字符的位置（常⽤） 百分⽐ | 缩进⽂字所在标签的⽗级标签的width属性值得百分⽐属性值区分正负，正数代表向右缩进，负数代表向左缩进。盒模型属性宽度width，⾼度height，边框border，内边距padding，外边距margin。常见盒模型区域，根据不同属性的效果，可以划分书写元素内容区域：width+height盒⼦可以实体化（可以加颜⾊）的区域：width+height+padding+border盒⼦实际占位的位置：width+height+padding+border+margin宽度width：作⽤：设置元素的宽度属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的宽度。（参考⽗元素） px | 像素值定义的宽度 % | 定义参考⽗元素宽度width的百分⽐宽度 注：body元素⽐较特殊，不需要设置宽度，⾃适应浏览器窗⼝的宽度。⾼度height：作⽤：设置元素的⾼度。属性值| 说明 --- | --- auto | 默认值。浏览器可以计算出实际的⾼度，⾼度会被内容撑开 px | 像素值定义的⾼度 % | 定义参考⽗元素⾼度height的百分⽐⾼度内边距padding：作⽤：设置元素内部到宽⾼之间的距离。特点：可以添加背景，但是不能书写内容。属性值：常⽤px为单位的数值。padding是⼀个复合属性，有四个⽅向。顺序为上右下左，顺时针⽅向。简写（四种）：四值法：padding: 10px 20px 30px 40px，上，右，下，左。三值法：padding: 10px 20px 30px，上，左右，下。⼆值法：padding: 10px 20px，上下，左右。单值法：padding: 10px，上右下左。边框border：作⽤：设置的是内边距外⾯的边界区域，作为合资实体化的最外层。属性值：由三个值组成，分别为线的宽度，线的形状，线的颜⾊。顺序不是必须的。复合属性。线宽border-width，线型border-style，边框颜⾊border-color。线宽border-width，有四值写法。线型border-style，有四值写法，属性值：none⽆边框，solid实线，dashed虚线（有兼容问题），dotted点线。边框颜⾊border-color，有四值写法。按边框⽅向划分：border-top，border-right，border-bottom，border-left。根据⽅向和类型，进⼀步细分：border-⽅向-类型。顺序不能错。外边距margin：作⽤：设置的是盒⼦和盒⼦之间的距离。特点：不能渲染背景。属性值：常⽤px为单位的数值。外边距的设置⽅式与内边距的⽅式同。盒模型扩展-清除默认样式作⽤：为避免默认样式对整体布局效果造成影响。⼤部分容器级标签都有默认边距。ul和ol列表有默认的列表前缀，需要清除list-style属性。a标签的默认样式：设置color和text-decorationh系列标签,b标签，strong标签有加粗效果，设置font-weight。给body设置整体⽂字样式，让⼤部分后代标签全部去继承。body { color: #666; font-size: 14px; font-family: Arial,"宋体";}盒模型扩展-height应⽤根据不同的需求，⾼度可以设置，也可以不设置，如果设置了⾼度，盒⼦占有的⾼度位置就定死了，后⾯的同级元素会紧挨着加载，如果不设置⾼度，会根据标签内部内容⾼度⾃动撑开。必须设置⾼度：设计图中盒⼦⾼度占位是固定的，后⾯同级元素在⾼度下⾯加载。注：设置⾼度后，如果盒⼦中的内容很多的话，也不会把盒⼦撑开，且盒⼦后⾯的元素位置不变。overflow属性：对溢出的内容显⽰进⾏设置属性值| 说明 --- | --- visible | 默认值，溢出的部分显⽰。 hidden | 溢出的部分隐藏，隐藏超过边框范围的内容 scroll | 溢出的部分出现滚动条，可以拖动滚动条看到隐藏的部分，多出盒⼦⾼度的部分不显⽰，不论有没有溢出，⽔平和垂直⽅向都会出现滚动条 auto |⾃动的，如果没有溢出就正常显⽰，如果有溢出，溢出的⽅向⾃动出现滚动条必须不设置⾼度：要求盒⼦⾼度必须⾃适应内部内容的⾼度，或者设置height的属性值是⾃动的。盒模型扩展-居中⽂本⽔平居中：text-align属性，不论单⾏或多⾏都可以设置。单⾏⽂本垂直居中：设置⽂字的line-height等于盒⼦的⾼度。多⾏⽂本垂直居中：让元素⾼度⾃适应或者正好等于多⾏⽂本的⾼度，设置元素内边距上下值相同。元素垂直居中：让⽗元素⾼度⾃适应，⼦元素⾼度⾃动撑开⽗级的⾼度，再给⽗元素设置相同的上下边距。元素⽔平居中：⼦盒⼦的宽度低于⽗盒⼦的宽度，可以设置⼦盒⼦的margin值，为margin：0 auto；原因：auto只在⽔平⽅向有作⽤，⽔平⽅向的margin如果设置为auto，边距会⾃动⽆限增⼤，直到撑满整个⽗元素除了⼦元素之外剩余的区域，如果两个⽔平⽅向都是auto，两边都要⽆限⼤，只能达到⼀个平衡，两边距离相同，导致盒⼦居中。盒模型扩展-⽗⼦盒模型⼀般情况下，⼀个⽗元素内部可以放⼀个或者多个⼦元素，⽽且多个⼦元素要排成⼀⾏显⽰，必须保证⽗元素的宽度⼀定要⾜够（不考虑溢出情况），需要循环⼀个设置尺⼨的规律：所以⼦元素的宽度加在⼀起不能⼤于⽗元素的宽度width。⽗元素的width >= 所有⼦元素width + padding + border + margin如果不满⾜条件：要么多余的⼦元素掉下来不能在⼀排，要么溢出⽗元素。特殊情况：盒模型⾃动内减（只针对width）⽗⼦盒模型中，只有⼀个⼦元素，且⼦元素是类似div标签必须占⼀⾏的。不设置⼦元素的width属性，⼦元素的width属性值会⾃动加载⽗级元素的width。如果同时设置了⼦元素⽔平⽅向的padding和border、margin，不需要⼿动去进⾏内减，⼦元素的width会⾃动收缩尺⼨。⼦元素所有⽔平⽅向的属性值加和等于⽗元素的宽度。盒模型扩展-margin塌陷现象margin塌陷现象：在垂直⽅向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，⽽是两个边距中值⽐较⼤的，边距⼩的塌陷到了边距值⼤的值内部。同级元素塌陷：上⾯的元素有下边距，下⾯的元素有上边距，两个边距相遇，真正盒⼦间距离是较⼤的那个值。⽗⼦元素塌陷（margin-top传递问题）：⽗⼦元素之间也会出现margin塌陷，（1）⽗元素和⼦元素都设置了同⽅向的margin-top值，两个属性之间没有其他内容进⾏隔离，导致两个属性相遇，发⽣margin塌陷。（2）本⾝⽗元素与上⼀个元素的距离是0，⼦元素如果设置了垂直⽅向的上边距，会带着⽗级元素⼀起掉下来（⽗元素的上边距0塌陷到了⼦元素的上边距30⾥⾯）。解决办法：同级元素：如果两个元素垂直⽅向有间距，只需要设置给⼀个元素，不要进⾏拆分。⽗⼦元素：让两个边距不要相遇，中间可以使⽤⽗元素border或padding将边距分隔开；更加常⽤的⽅法，⽗⼦盒模型之间的距离就不要⽤⼦元素的margin去设置，⽽是⽤⽗元素的padding挤出来。注：⽔平⽅向没有margin塌陷。标准⽂档流标准⽂档流，指的是元素排版布局过程中，元素会默认⾃动从左往右，从上往下的流式排列⽅式。前⾯内容发⽣了变化，后⾯的内容位置也会随着发⽣变化。html就是⼀种标准⽂档流⽂件。HTML中的标准⽂档流特点通过两种⽅式体现：微观现象和元素等级。微观现象：（1）空⽩折叠现象。（2）⽂字类的元素如果排在⼀⾏会出现⼀种⾼低不齐、底边对齐效果。（3）⾃动换⾏，元素内⼀⾏内容写满元素的width时会⾃动进⾏换⾏。元素等级：在标准流中，⼤部分元素是区分等级的，习惯将元素划分为⼏种常见的加载级别：块级元素，⾏内元素，⾏内块元素。块级元素：a、块级元素可以设置宽⾼，在浏览器中正常加载。b、块级元素必须独占⼀⾏，不能与其他任何标签并排⼀⾏。c、块级元素如果不设置width，会⾃动撑满⽗级的width区域；⾼度height不设置，会被内容⾃动撑开⾼度。⾏内元素： a、⾏内元素不能设置宽度和⾼度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题，b、⾏内元素可以与其他的⾏内或⾏内块元素并排显⽰。c、⾏内元素不论是否设置宽⾼，宽⾼只能被内容⾃动撑开。⾏内块元素：a、可以设置宽度和⾼度。b、可以与其他的⾏内或⾏内块并排显⽰。c、如果不设置宽⾼，要么以原始尺⼨加载，要么被内容⾃动撑开。d、具有标准流的微观性质，例如空⽩折叠现象。显⽰模式-display标准流中的元素有⾃⼰默认的浏览器加载模式，但是加载模式不是⼀成不变的，后期可以通过display属性改变⼀个标签的显⽰模式。属性值 | 作⽤ --- | --- block | 以块级元素模式加载，具备块级特点 inline | 以⾏内元素模式加载，具备⾏内特点 inline-block | 以⾏内块模式加载，具备⾏内块特点 none | 直接隐藏，不占标准⽂档流的位置脱离⽂档流：display属性改变的显⽰模式并没有改变标准流本质性质，页⾯还是只能从上往下加载，存在空⽩折叠现象等微观性质。要想实现更多的页⾯布局效果需要脱离标准流的限制。元素脱离标准⽂档流的⽅法包括：浮动、绝对定位、固定定位。浮动定义：⼀种⾮常重要的布局属性。属性值：left--左浮动，right--右浮动。作⽤：让元素脱离标准流，同⼀级的浮动元素可以并排显⽰。性质：（1）浮动的元素脱离标准流。标准⽂档流特点：区分⾏块。浮动的元素脱离了标准流的限制，具备⾏块⼆象性，浮动的元素可以设置宽⾼，还可以并排显⽰，且不会有空⽩折叠现象，如果元素不设置宽⾼，可以被元素内容⾃动撑开。（2）浮动的元素依次贴边。 （3）浮动的元素没有margin塌陷。margin塌陷现象出现在标准流中，浮动元素已经脱离标准流，不在具有margin塌陷现象。 （4）浮动的元素会让出标准流的位置元素浮动后，脱离了标准流，会将原来占有的标准流位置让给后⾯的⼀个同级元素。压盖效果（字围现象），ie6、ie7会出现兼容问题，所以⼀般不会使⽤这种⽅法，⼀般使⽤定位制作。如果没有特殊需求，不允许⼀个⽗元素的⼦元素有的浮动，有的不浮动，同级元素中有⼀个浮动其他的也要浮动。浮动问题：问题1：标准流中的元素，不设置⾼度的情况下，都能被内部的标准流元素⾃动撑⾼。如果内部的⼦元素进⾏了浮动，浮动的⼦元素是撑不⾼标准流⽗亲的。问题2：⽗元素没有⾼度，会影响后⾯元素的标准流位置，如果浮动的⼦元素⾜够⾼时，有可能影响到后⾯浮动元素的贴边。清除浮动清除浮动1：给标准流的⽗元素强制⼀个合适的⾼度。解决：⽗元素有⾼度了，前⾯的浮动不能影响后⾯元素的标准流位置和贴边。问题：⽗元素⾼度不是⾃适应，⼀旦⼦元素⾼度变化，问题可能再次出现。清除浮动2：clear属性给标准流⽗元素添加clear属性，⽗元素不受前⾯浮动影响，不会再占有浮动让出的位置。属性值 | 说明 --- | --- left | 清除前⾯左浮动带来的影响 right | 清除前⾯右浮动带来的影响 both | 清除前⾯所以浮动带来的影响解决：浮动元素影响后⾯元素标准流位置和贴边问题：⽗元素不能⾼度⾃适应，两个⽗元素之前如果有margin效果不正确。清除浮动3：隔墙法外墙法：在两个⼤的⽗盒⼦之间，添加⼀个空的div标签，标签上带有clear：both属性。解决：浮动影响后⾯元素标准流位置和贴边，模拟⽗元素间的距离。问题：⽗元素没有⾼度⾃适应。内墙法：在⽗元素内部，所以浮动的⼦元素后⾯添加⼀个空的div元素，标签⾼度为0，添加clear属性。解决：⽗元素⾼度⾃适应，浮动影响后⾯的元素位置和贴边。缺点：浮动是css样式属性带来的问题，内墙法使⽤html结构去辅助解决问题，如果页⾯中浮动元素很多，需要添加多个没有语义的空标签，造成html结构的冗余。清除浮动4：伪类本质：使⽤css的伪类，模拟⼀堵内墙。伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。:after：这个伪类表⽰选中的是某个标签内部的最后的位置。将伪类添加给⼀个选中⽗盒⼦的选择器后⾯，⼀般给需要清除浮动的⽗盒⼦设置⼀个clearfix的类名。 .clearfix:after {content: " "; //可写内容

display: block;height: 0px;clear: both;visibility: hidden; //content有属性的时候写}清除浮动5：溢出隐藏给内部有浮动⼦元素的⽗元素添加溢出隐藏overflow:hidden属性，可以解决浮动的所有问题。⾼度⾃适应原因：⼀个⽗元素没有设置⾼度，同时设置了溢出隐藏，浏览器在加载盒⼦尺⼨时，遇到溢出隐藏浏览器会强制性的去检索内部的⼦元素的⾼度，不论⼦元素是标准流还是浮动，都会将最⾼的⾼度作为⽗盒⼦⾼度加载。浮动影响后⾯的元素：⽗元素有了⾼度以后，可以管理住内部所有的浮动元素，不会延伸到后⾯标签中，影响贴边效果。总结：如果⽗元素⾼度是固定的，建议使⽤height属性解决。如果⽗元素⾼度需要⾃适应，建议使⽤overflow属性解决浮动问题。css伪类选择器概念：不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须搭配其他选择器使⽤，伪类选择器后⾯添加的样式不⼀定⽴即加载到浏览器之上，只有⽤户触发了对应的⾏为，伪类的样式才会⽴即加载。伪类选择器的权重与普通的类选择器相同。a标签的伪类：link访问前状态，visited访问后状态，hover⿏标悬浮状态，active⿏标点击状态。a标签的伪类书写顺序：link，visited，hover，active。⼀般会将访问前和访问后状态设置为⼀样的效果，保证了页⾯的统⼀性。css背景属性背景颜⾊：background-color。背景图⽚：background-image。背景重复：background-repeat。背景定位：background-position。属性值：分为三种写法，单词表⽰法，像素表⽰法，百分⽐表⽰法。单词表⽰法：⽔平⽅向可选单词：left，center，right。垂直⽅向可选单词：top，center，bottom。背景附着：background-attachment。作⽤：设置的是背景图⽚是否要随着页⾯或者是盒⼦的滚动⽽滚动。属性值 | 说明 --- | --- scroll | 滚动的，表⽰背景图⽚与盒⼦保持相对位置不变，随着页⾯的滚动⽽滚动。 fixed | 固定的，背景图的定位的参考点从盒⼦border以内的左上顶点变为了浏览器窗⼝的左上顶点，页⾯滚动时，浏览器窗⼝的左上顶点是不变的，导致背景图固定在浏览器窗⼝的某个位置，不会随着页⾯滚动⽽滚动。综合写法时，没有顺序要求。⼀般background: url() no-repeat center top fixed #fff;注意事项： 1、如果属性值没有设置完全，其他没有设置的单⼀属性会按照默认值加载。2、如果想去层叠综合属性中的⼀部分，其他的属性保持不变，最好使⽤单⼀属性写法进⾏层叠。背景应⽤-背景图替换插⼊图背景图替换插⼊图：如果想解决SEO问题，可以将HTML结构中，插⼊图换成搜索关键字，然后使⽤css添加背景给a标签或者h1标签。⽂字隐藏法：（1）将⽂字字号设为0（ie8以下不兼容），（2）给abiaoqian设置⼀个text-indent属性，属性值为负的很⼤的值，⽂字会⾛到盒⼦外部，直接在设置溢出隐藏。背景应⽤-padding区域背景图padding区域可以加载背景，但是不会有书写内容。⽅法：在⼀个盒⼦中有背景图部分，⽽且有⽂字内容，⽂字会让开背景图区域进⾏加载，背景区域应该使⽤padding挤出位置。四个⽅向都可以。背景应⽤-精灵图技术当⽤户访问⼀个⽹站时，需要向服务器发送请求，⽹页上的每张图⽚都要经过⼀次请求才能展现给客户。然⽽，⼀个⽹页中旺旺会应⽤很多⼩的背景图像作为修饰，当⽹页中的图像过多时，服务器就会频繁地接受和发送请求，这将⼤⼤降低页⾯的加载速度。为了更有效地减少服务器接受和发送请求的次数，提⾼页⾯的加载速度，出现了css精灵技术。css精灵：是处理⽹页背景图像的⽅式，它将⼀个页⾯涉及到的所有的零星背景图像都集中到⼀张⼤图中去，然后将⼤图应⽤于⽹页，这样，当⽤户访问该⽹页时，只需要向服务器发送⼀次请求，⽹页中的背景图像即可全部展⽰出来。通常情况下，这个由很多⼩的背景图合成的⼤的图就被成为精灵图。技术依据：（1）将⽹页中需要⽤到的⼩的尺⼨的背景图制成⼀张背景透明的png图⽚。（2）利⽤背景定位技术，将精灵图的每个⼩图⽚加载到对应的标签上。注意事项：（1）精灵图上放的都是⼩的修饰性质的背景图，插⼊图⽚不能⽹上放。（2）精灵图的宽度取决于最宽的那个背景图⽚的标签宽度。（3）精灵图可以横向摆放，也可以纵向摆放，但是每个图⽚之间必须有留⾜够多的空⽩，保证背景图⽚加载到⼀个标签内部时，不能出现多余内容。（4）在精灵图的底部，尽量留出⼀些空⽩，⽅便以后添加其他精灵图。css3新增背景属性背景半透明：颜⾊值增加了⼀种rgba模式。rgba模式：在rgb基础上增加了⼀个不透明度的设置，不透明度alpha取值范围在0-1之间，0表⽰完全透明，1表⽰完全不透明，0.5表⽰半透明。背景半透明指的是盒⼦背景半透明，不会影响盒⼦⾥⾯的内容。背景缩放background-size（只能单独写，不能合写）：通过这个属性设置背景图⽚的尺⼨，就像我们设置img的尺⼨⼀样，在移动web开发中左屏幕适配应⽤⾮常⼴泛。属性值 | 说明 --- | --- px值 | 1-2个像素值，只设置1个值，垂直⽅向等⽐例拉伸；设置2个值，按照设置值加载 百分⽐ | 同像素值设置⽅法相同，设置百分⽐时，数值参照盒⼦的宽、⾼属性 cover | ⾃动调整缩放⽐例，把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。如有溢出部分则会被隐藏。（填满区域） contain | ⾃动调整缩放⽐例，把图像扩展⾄最⼤尺⼨，保证图⽚始终完整显⽰在背景区域。 （图⽚最⼤，可能会有空⽩）多背景：css3中规定，⼀个盒⼦上，可以添加多个背景图⽚。background-image的属性值书写时，以逗号分隔多背景的url路径地址。背景加载时，先写的背景压盖后写的背景图⽚。定位定位属性：position属性值 | 说明 --- | --- relative | 相对定位 absolute | 绝对定位 fixed | 固定定位作⽤：设置定位的元素，它需要根据某个参考元素发⽣位置的偏移。偏移量属性：定位的元素想发⽣位置的移动，必须搭配偏移量属性进⾏设置。⽔平⽅向：left，right。垂直⽅向：top，bottom。属性值：常⽤px为单位的数值，或者百分⽐。相对定位属性值：relative。参考元素：标签加载的原始位置。必须搭配偏移量属性才能发⽣位置移动。性质：相对定位的元素不脱离标签的原始状态（标准流，浮动），不会让出原来占有的位置。元素显⽰效果上：原位留坑，形影分离。注意：（1）偏移量属性区分正负。（2）同⼀⽅向上，不能设置两个偏移量属性，如果⽔平⽅向同时设置了left和right属性，只会加载left属性。垂直⽅向只会加载top属性。（3）由于相对定位的参考元素是⾃⾝，left的正值等价于right的负值，top的正值等价于bottom的负值。实际应⽤：（1）由于相对定位元素⽐较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的⼦绝⽗相情况。（2）相对定位⽐较稳定，可以在占有原始位置的情况下，对加载效果区域进⾏位置调整，进⾏微调设置。或者对⽂字进⾏微调。绝对定位属性值：absolute。参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考body。必须搭配偏移量属性才有位置的移动。性质：绝对定位的元素脱离标准流，会让出标准流的位置，可以设置宽⾼，也可以随时定义位置，绝对定位的元素不设置宽⾼时只能被内容撑开。注意：（1）绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。（2）由于参考点不同，left的正值不在等于right的负值。body为参考元素的参考点：以body为参考元素时，参考点的确定与偏移量⽅向有关。如有top参与的定位，参考点就是body页⾯的左上顶点和右上顶点。⾃⾝的对⽐点是盒⼦的所有盒模型属性最外⾯的左上⾓或右上⾓。如有bottom参与的定位，参考点就是body页⾯⾸屏的坐下顶点或右下顶点。对⽐点是盒⼦的所有盒模型属性最外⾯的左下⾓或右下⾓。注：实际应⽤中，如果以body为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使⽤body作为参考元素。祖先级为参考元素参考元素：参考的是祖先元素中有任意定位的，在html结构中距离⽬标最近的祖先。根据绝对定位的参考元素的位置类型不同，有三种定位组合⽅式：⼦绝⽗相，⼦绝⽗绝，⼦绝⽗固，由于相对定位的祖先级位置更稳定，⼤多使⽤⼦绝⽗相的情况。祖先元素参考点如果绝对定位的参考元素是某个祖先级，参考点是盒⼦border以内的四个顶点，组合⽅向决定了参考点。绝对定位的元素只关⼼对⽐点和参考点之间的距离，会忽视参考元素的padding区域。left、top：参考点是祖先的border以内的左上顶点，对⽐点是盒⼦⾃⾝的左上⾓。right、top：参考点是祖先的border以内的右上顶点，对⽐点是盒⼦⾃⾝的右上⾓。left、bottom：参考点是祖先的border以内的左下顶点，对⽐点是盒⼦⾃⾝的左下⾓。right、bottom：参考点是祖先的border以内的右下顶点，对⽐点是盒⼦⾃⾝的右下⾓。固定定位属性值：fixed。参考元素：浏览器窗⼝。参考点：浏览器窗⼝的四个顶点。跟偏移量组合⽅向有关。由于浏览器窗⼝的四个顶点位置不会发⽣变化，会导致固定定位的元素会始终显⽰在定位位置。性质：脱离标准流，让出标准流位置，可以设置宽⾼，根据偏移量属性可以任意设置在浏览器窗⼝的位置。固定定位的元素会始终显⽰在浏览器窗⼝上。定位应⽤-压盖所有的定位类型都可以实现压盖效果。由于绝对定位的元素脱离标准流，不占据标准流位置，压盖效果更加彻底，在实际⼯作中，常见的是绝对定位制作的压盖。定位应⽤-居中定位的元素，如果想在参考元素中居中显⽰，有⾃⼰的居中⽅法：（1）在居中的⽅向使⽤⼀个偏移量属性，例如left，设置属性值为50%。导致图⽚的左顶点移动到参考元素的中⼼位置。（2）给绝对定位的⼦盒⼦设置⼀个同⽅向的margin，例如margin-left，属性值为负的⾃⾝宽度的⼀半。（不论⼦盒⼦的宽度是否⽐参考元素更宽，都能使⽤以上⽅法进⾏居中设置。 ）扩展：（1）解决标准流中，宽的⼦盒⼦在窄的⽗盒⼦中的居中，可以设置⼤的⼦盒⼦相对定位，利⽤相对定位居中的⽅法进⾏居中。 （⼤盒⼦在⼩盒⼦中居中）（2）浮动的元素居中，在不改变原始浮动状态情况下，可以利⽤相对定位居中⽅法。压盖顺序z-index默认压盖顺序：定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。如果都是定位的元素，在html中后写的定位压盖先写的定位。⾃定义压盖顺序：如果想要更改定位的元素的压盖顺序，可以设置⼀个z-index属性。属性值：数字。注意：属性值⼤的会压盖属性值⼩的，设置z-index属性的会压盖没有设置的。如果属性值相同，⽐较html书写顺序，后写的压盖先写的。z-index属性只能设置给定位的元素才会⽣效，如果给没有定位的元素设置，不会⽣效。⽗⼦盒模型中，如果⽗⼦盒⼦都进⾏了定位，与其他的⽗⼦级有压盖的部分：⽗级盒⼦：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值⼤的压盖值⼩的。⼦级盒⼦：如果⽗级没有设置z-index属性，⼦级z-index⼤的会压盖⼩的；如果⽗级设置了z-index值，⽆论⼦级值是多少，都是⽗级的值⼤的⼦级压盖⽗级值⼩的⼦级，俗称“从⽗效应”。