常用的CSS属性 + 定位（3种形式）

 

常用的CSS属性

一、文本和字体的属性

text-align	none;     left;  center;  right;  jstify;   两端对齐，只适用于英文
text-indent	16px;  首行缩进16px 一个字,  2em;  不管字体多大首行缩进2个字符 　　　　(字体的大小默认是16px)建议使用em
text-decoration	none;  没有下划线  undeline;  下划线  overline;   上面的线  line-through;    inherit;  继承父类  (默认也会继承)
line-height (单行文本垂直居中)	height;   行高=高   (只适合单行文本垂直居中)          注意: font-size 字体大小不能大于行高
font-size	16px;   字体大小
font-weight	400;   (粗细 没有px)  (400  800)  normal;   默认
font-family	字体, 如果电脑上没有设置的字体,默认显示宋体. 同一字体出现中英文时,先选择英文后选中文. 字体用逗号隔开的话,表示先选择前面的, 前面没有的话选后面的.
font (综合属性)	12px/200px  "华文行楷";   大小/行高     字体样式 12px/20  "华文行楷";   (等价于  12px/240px)   行高比      (行高比指的是字体的行高)
margin-top (多行文本垂直居中)	((父盒子高 - 子盒子高)/2)px; 　　　　(多行文本垂直居中) 　　　注意: 水平居中 margin-left

属性:

　　文本水平垂直居中

　　span:  砖块 或者行内块  绝对定位   固定定位(没有意义的)

　　　　width

　　　　height

　　　　text-aligin: center

　　　　margin: auto

　　标准文档流下盒子居中

 

　　浮动的盒子居中

 

二、background  背景属性

background-color	#fff;   设置背景颜色
background-image 精灵图技术	url(./aa.jpg);     设置背景图片 默认: 水平平铺和垂直平铺   也可以直接background
background-repeat	no-repeat;  不平铺 (按照盒子大小显示常用) repeat-x;   水平平铺 repeat-y;   垂直平铺
background-position	0 0;  默认:左上角(坐标原点)   20px; 0;    设置背景图片的位置
background-position-x	50px;
background-position-y	50px;   -50px;  切图
background-attachment	fixed;    图片固定在浏览器上中,不随着页面下来而移动.
background	url(a.png)  no-repeat   0  -162px;   　image         repeat      position  (综合属性填写)

 

1、 颜色表示法　　

　　颜色一共有三种表示方法：单词、rgb表示法、十六进制表示法。

　　rgb表示法：

　　rgb：红色 绿色 蓝色 三原色。

　　光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。

　　用法：rgb(111,234,123);  r、g、b的每个值的取值范围0~255。

　　十六进制表示法：

　　所有用#开头的值，都是十六进制的。

　　用法：#a0a0a0;    #112233;可以简写成#123;

 

2、图片精灵技术

　　CSS雪碧，即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

CSS 精灵图应用原理：

　　只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？其实就是截取大图一部分显示，而这部分就是一个小图标。

　　a、使用精灵图的好处：

　　（1）利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

　　（2）CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和；

　　（3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率；

　　（4）更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便；

　　b、使用精灵图的不足：

　　（1）CSS精灵图的最大问题是内存使用；

　　（2）拼图维护比较麻烦；

　　（3）使CSS的编写变得困难；

　　（4）CSS精灵图调用的图片不能被打印；

 

3、应用

　　我们可以使用background综合属性制作通天banner，什么是通天banner呢，就是一般我们电脑的屏幕都是1439，但是设计师给我们的banner图都会比这个大，那么我们可以此属性制作通天banner，

　　如下：background: red url(images/banner.jpg) no-repeat center top;

 

定位

一、相对定位

相对定位 (不脱标)	position	relative; (相对定位)	如果仅仅设置标relative和标准文档流下的普通的盒子是一样的. 并没有脱离标准文档流,仍然占据位置. 可以使用 top left right bottom.
	top left right bottom	20px; 30px; 30px; 40px;	参考点: 相对定位,是相对自己原来的位置, 移动, 作用: 1. 层级提供了,可以做压盖(但是不建议) 　　  2. 布局方案, "子绝父相"的参考
	z-index	5；	提高层级的， 定位后的层级高于不定位的，可以用该属性设置层级的优先级

1、参考点: 相对于原来的位置

2、特性:

　　　　♦ 如果有一个标准文档流的盒子,仅仅设置了相对定位,与普通盒子是一样的

　　　　♦ 设置相对定位后，我们才可以使用四个方向的属性：top、bottom、left、right

　　　　♦ 设置相对定位后,没有脱离标准文档流,如果调整位置,会"留坑"，原来的位置也会保留

　　　　♦ 形影分离

　　注意：相对定位在页面布局中没有太大的作用，会影响页面的布局，因此，不要使用相对定位来做压盖效果。

3、作用：

　　　　♦ 微调元素位置

　　　　♦ 做绝对定位的参考（父相子绝）（重要）

　　　　♦ 提升层级（但是不建议用这种方法提升层级）

 

二、绝对定位

绝对定位  (脱标)	positon	absolute; (绝对定位)	1. 脱标: 不占位置  2. 层级提高了,
	top left right bottom	20px; 30px; 30px; 40px;	设置单个盒子时, (left:0;)时 如果以 top 描述, 以页面左上角为参考点 如果以 bottom 描述,以浏览器左下角为参考点
	z-index	100;	提高层级的， 定位后的层级高于不定位的，可以用该属性设置层级的优先级
父相子绝 (布局)			父盒子设置相对定位 子盒子设置绝对定位,   参考点是父亲的(0,0)点

1、特性

　　♦ 脱离标准文档流

　　♦ 做遮盖效果，提升层级，设置绝对定位后，不区分行内元素和块级元素，都能设置宽高

2、参考点

　　（1）单独一个盒子设置绝对定位　

　　　　　♦ 当我使用top属性描述的时候，是以页面的左上角（跟浏览器的左上角区分开）为参考点来调整位置；

　　　　　♦ 当我使用bottom属性描述的时候，是以浏览器左下角为参考点来调整位置；

　　（2）以父辈盒子作为参考点（常用的）

　　　　   ♦ 父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷；

　　　　   ♦ 如果父亲设置了定位，那么以父亲为参考点，那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点；

　　　　   ♦ 不仅仅是父相子绝，父绝子绝和父固子绝都是以父辈元素为参考点；

 3、注意事项

　　（1）父绝子绝，没有实战意义，做站的时候不会出现父绝子绝，因为绝对定位脱离标准流，影响页面的布局。相反，‘父相子绝’在我们页面布局中，是常用的布局方案，因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。

　　（2）绝对定位的子盒子无视父辈的padding

4、作用

　　页面布局中，常用到"父相子绝"

 

5、绝对定位的盒子居中（非常重要）

　　子盒子(绝对定位)    父盒子要有高度(宽度)才能够 用50%.  否则可以直接用值 如100px;

水平居中	left	50%	父盒子要有宽度, 为宽度的50%
	margin	-50px;	负(子盒子宽度的一半)
垂直居中	top	50%	指的是父盒子的高度的50%
	margin	-100px;	负(子盒子高度的一半)

 

三、固定定位

固定定位	position	fixed;	脱离标准文档流 参考点:浏览器左上角 作用:  固定导航栏，不随着页面的移动而移动
	top left	0px;    0;	参考点: 浏览器左上角 如固定导航栏,一定要设op(0)  left(0)
	z-index	100;	提高层级

1、特性

　　　　脱标

　　　　遮盖

　　　　提升层级

　　　　固定不变

2、参考点

　　　　设置固定定位，用top描述，那么是以浏览器的左上角为参考点

　　　　如果用bottom描述，那么是以浏览器的左下角为参考点

3、作用

　　　　返回顶部

　　　　固定导航栏

　　　　小广告

 

四、定位中的 z-index 的使用

z-index

10;   没有px, 只有整数

表示层级为10,  默认的层级为0 数字越大层级越高

z-index特性：

　　（1）z-index 值表示谁压着谁，数值大的压盖住数值小的；

　　（2）只有定位了的元素，才能有z-index，也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index；

　　（3）z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人。定位了的元素，永远压住没有定位的元素；

　　（4）从父现象：父亲怂了，儿子再牛逼也没用；

 

大总结：（浮动和定位要结合使用）

　　浮动通常是大模块实现并排  (float)

　　定位小模块调整位置(大模块中的小元素)  (父相子绝)