CSS属性使用总结

时间：2023-03-30 18:07:12 CSS

1.background系列属性在给元素设置样式的时候往往需要给元素设置背景，一般有颜色，背景图片等。1.1背景颜色使用CSS类中的background-color属性设置背景颜色对于元素：/*CSS*/.box{width:200px;高度：200px；背景色：#666；}a{背景色：#999;}/*HTML*/

这是一个a标签1.2背景图片通过background-image属性为元素设置背景图片:/*CSS*/.box{width:200px;高度：200px；背景图像：url（./图片）；}1.3背景图重复通过background-repeat属性设置背景图是否可以重复：/*Nottiled*/background-repeat:no-repeat;/*水平平铺*/background-repeat:repeat-x;/*垂直平铺*/background-repeat:repeat-y;1.4背景定位当背景图片尺寸大于容器时使用background-position属性设置背景图片的显示位置，其参数可以是表示位置的参数由两部分组成："left和right“，“上和下”。/*前一个参数可以是leftcenterright，表示左右*//*最后一个参数可以是topcenterbottom，表示上下*/background-position:centertop;它的参数也可以是像素值/*第一个参数表示向左移动的值，第二个参数表示向右移动的值，支持负值*/background-position:100px,-100px;往往会有大量的小图标，如果每个小图标都有一个单独的文件，会造成单个页面的网络请求过多，性能会很差。所以我们可以把页面中使用的图标放在一张图片中，通过定位图标在图片中的位置来传递图标，这样每个页面只需要一次网络请求就可以获取多个图标。sprite贴图的使用方法，（假设我们有一张图片icon.jpg，整合了多个图标）为容器设置宽高，导入图标的大小由background-position属性设置。图片左上角图标的坐标值并取负数（假设图标为矩形）1.5背景图片是否固定使用background-attachment:fixed;设置以修复背景图像。1.6综合属性当你想设置背景的多个属性时，可以使用缩写的方式。/*引入图片，图片不重复固定背景图片*/background:url(./a.jpg)no-repeatcentercenterfixed;2位置系列属性2.1相对定位设置方法：position:relative;什么是相对定位？相对定位可以对元素进行微调，使其相对于原来的位置移动。通过设置left、right、top、bottom的值可以移动位置的移动方向。相对定位不同于下面说的绝对定位，不会跑题的。这种运动形式相当于形影分离，身体保持原位（主体不可见但仍占据位置），影子移动。相对定位的常见用法微调元素或做绝对定位的参考：儿子和父亲。2.2绝对定位设置方法：position:absolute;绝对定位是根据参考点进行位移，唯一的方式与相对定位相同。参考点：如果绝对定位元素没有父元素，定位元素的参考点如下。如果使用顶部描述，则参考点是页面的左上角。如果使用底部描述，则参考点为浏览器第一屏窗口的左下角。如果绝对定位元素有父元素，则通过这种方式找到定位元素的参考点。如果父元素具有定位属性，则父元素用作引用。如果parent没有定位，继续向上层查找。如果一个盒子设置了绝对定位，并且向一个方向移动，那么同一个方向的padding将无效。绝对定位将导致元素脱离标准文档流。如果父元素没有相对定位，unlabeling的影响将无法解决。绝对定位后，标准流的所有规则都不再适用。所以margin:0auto;也会失败。将绝对定位框居中：左：50%；或者margin-left:负宽度的一半2.3固定定位设置参数为：position:fixed;fixed定位是相对于浏览器窗口的定位。无论页面如何滚动，框显示的位置都不会改变。固定定位的盒子不合时宜。2.4z-indexz-index的值表示谁在压谁。较大的值压着较小的值。只有元素被定位时，才会有z-index值，也就是说相对定位、绝对定位、固定定位都可以使用z-index值。但是不能使用漂浮物。从父现象看：不管子元素的z-index多大，如果父元素的z-index小，还是会在body下面。2.5staticposition：静态；也可以通过静态参数取消定位属性。3文字系列属性颜色文字颜色方向设置文字Direction参数rtl表示从右到左，参数ltr表示从左到右。letter-spacing设置字符间距为默认值normal，没有间隙。length定义字符之间的固定空间并允许负值。text-decoration文本装饰none：定义标准文本underline：下??划线overline：文本上的一行line-through：文本中的一行text-indent缩进元素中第一行文本length：定义固定缩进　%：定义父元素的缩进word-spacingWordspacing　normal定义单词间的标准间距　length：定义单词间的固定间距4字体族属性font-family设置字体setfont-size设置字体sizefont-style设置字体样式　font-weight设置字体粗细字体缩写5列表样式list-style-image用图片替换列表标记　属性值：urllist-style-position列表标记位置　属性值:insideoutsidelist-style-type列表标记类型list-style可以通过速记来设置6Outlineoutline是围绕元素边框绘制的线。outline属性不同于border属性：outline不是元素尺寸的一部分，元素的总宽和高不受outline宽度的影响。轮廓不被视为页面的一部分，因此应用它们不会导致调整页面布局。outline-colorcoloroutline-styleoutline-styleoutline-widthoutlinewidthoutline支持使用缩写7display（显示）和visibility（可见性）7.1displayinline设置元素为内联块设置元素为块级元素inline-block将元素设置为inline块元素none元素消失，不占据原来的位置。7.2visibility通过设置hidden将元素隐藏，但元素仍会占据原来的位置。

上一篇：CSS单位概述

下一篇：【CSS基础】CSS常见问题

CSS属性使用总结相关文章