CSS详解（4.css属性）

野性酷女 2023-06-30 10:52 40阅读 0赞

### 文章目录 ###

*  一，css属性单位
 *  二，文本属性
 *  三，背景属性
 *  四，列表属性
 *  五，定位属性
 *  六，布局属性 -浮动

# 一，css属性单位 #

1， 长度单位

1.  绝对长度值包括cm、mm、in、pt、pc等，绝对长度值最好用于打印输出设备，而在仅仅作为屏幕显示用时，绝对长度值并无多大意义。
2.  相对长度值包括px、em、ex等。相对长度是指元素尺寸相对于浏览器的系统默认值来相应的缩放。

2，颜色单位

1.  用百分比值来表示，如color:rgb(50%,0,50%) ；
2.  使用0-255之间的整数值来设置，如color:rgb(128,0,128) ；
3.  使用十六进制数组定义颜色，如\#fc0eab；
4.  使用简化的十六进制数定义颜色，如\#080；
5.  为颜色取名：aqua,black,blue,fuchsia,gray,green等。

4，URL单位

5，URL单位的具体格式是：在“url”后面紧跟一个括号，括号中是url的地址。如果在地址中使用了括号、逗号、空格、单引号和双引号，那么就必须在整个地址的外面加上一对单引号或者双引号。地址可以是相对地址或绝对地址。

**例如:**

> p\{ background-image : url(img/logo.gif) ; \}

# 二，文本属性 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70]

Blink属性：ie不支持，火狐支持。（浏览器差异的问题）

实现溢出文本eclipsis的解决：

overflow:hidden;text-overflow:ellipsis; white-space:nowrap;

这三个属性必须一起使用。并且，这种方式只有ie支持。

# 三，背景属性 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 1]  
background-attachment:fixed:属性：火狐支持，ie6不支持；ie7支持。

设置背景图片是否随着滚动而动

# 四，列表属性 #

主要是对ul和ol用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 2]

# 五，定位属性 #

一，position: relative | absolute | static | fixed

1.  static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。
2.  relative 不脱离文档流，参考自身静态位置,通过top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
3.  absolute 脱离文档流，通过top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
4.  fixed 固定定位，这里他所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

二，CSS中定位的层叠分级：z-index: auto | number ;

auto 遵从其父对象的定位

number 无单位的整数值。可为负数。z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数

# 六，布局属性 -浮动 #

![在这里插入图片描述][20200117112337347.png]  
Display:为None时，其他元素可以占据该元素的位置。

Visibility: 为hidden时，其他元素不能占据该元素的位置。

浮动之后脱离文件流，不占位

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200117111835817.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200117111946398.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200117112037757.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70
[20200117112337347.png]: https://img-blog.csdnimg.cn/20200117112337347.png