标签：下划线   汉字   color   元素   如何   

02.CSS属性

2.1 文本

2.2字体

2.3背景

@2.3.1属性

Tips:

①在CSS中，背景的background-repeat属性和background-position属性，只有在设置了background-image属性之后，才能生效.

②background-image背景图片会覆盖background-color背景颜色.

但使用”合写background属性”就不会,即,

合写background属性可以同时设置”background-image背景图片”和”background-color背景颜色”

③在背景属性中，有5个属性，除了合写（简写）属性background属性（可同时设置多个分量属性）外，其余4个属性，称为分量属性，即background-color属性,background-image属性,background-position属性,background-repeat属性（有分量属性的css属性，还有边框border属性，font属性等）

@2.3.2 background-position详解

1.原点位置:即外层块元素的左上角

2.background-position 位置设定,指图片与坐标原点的偏移量

3.移动原理

4.百分比计算

X轴( container宽度 – 图片宽度 )*含符号百分比

Y轴( container高度 – 图片高度)*含符号百分比

5.原点是不会动的，移动的是图片,

Eg1:background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如：

效果如下图1：

Eg2、该属性定位不受对象的补丁属性( padding )设置影响。

例如，我们给容器元素增加padding值，背景图片的左上角还是与容器元素的左上角对齐。在此处只是影响到了容器元素的高度和宽度。

效果如图2:

Eg3、background-position:-70px -40px;

图片以容器左上角为参考向左偏移70px，向上偏移 40px，示例：

Eg4、background-position:70px 40px;

图片以容器左上角为参考向右偏移70px，向下偏移 40px，示例：

效果如图4：

                                   图 4

Eg5、background-position:50% 50%;

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x：{容器(container)的宽度-背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度-背景图片的高度}*y百分比，超出的部分隐藏。

 例如：

其x=(300-210)*50%=45px;

y=(150-120)*50%=15px;

效果如图5：

由于超出部分别往两端延伸，所以我们可以先制作一张宽度足够宽图片设置水平值为50%，这样可以用来适应不同的浏览器，使得图片水平充满浏览器窗口并且居中。替代margin:50 auto的功能。

Eg6、background-position:-50% -50%;

等同于x：-{容器(container)的宽度-背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：-{容器(container)的高度-背景图片的高度}*y百分比，超出的部分隐藏。

效果如图6:

                                     图 6

Eg7、background-position:100% 100%;

图片处于容器元素的右下角，与 background-position:right bottom;效果等同。

示例：

效果如图7：

现在我们来看background-position背景负值定位

HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
　　在浏览器中看到的效果：

　　从上图可以看到：当为background-position:0 0;时图片的左上角与DIV的左上角是重合的，当我们定位于background-position:-50px -50px;时发现图片向左上，移动了，也就以DIV的左上角为中心，图向左移动了50PX，向右也移动了50PX．第三个示例就是上值的情况图移动的效果．这个应该是好理解的．
　　总结一下就是以上都是以DIV的0，0点为参考点图片移动，如果把DIV区解释为一个坐标轴，图向左，上都为负，向右，下为正值．

　　好
　　在实践中多数情况是知道一个图的位置要如上图中那个黄色的点，我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能掌握背景图负值的方法了

实例代码

2.4列表

2.5超链接伪类

2.6 cursor属性

2.7 display属性

2.8浮动float属性

Eg:

1.未设置浮动前

02.设置浮动

(设置浮动后,div1和div2就脱离了文档流,高于文档流,然而父div还是在原来的位置,所以父div就会被挤成一条线了.因此,需要清除浮动)

03.清除浮动

(或者用overflow属性,也可以清除浮动,见下例.)

(在所有的浮动元素后面,再加上一个空白的div,这个div什么都不做,只是专门用来清除浮动,这样之后,后面的网页元素就会正常的显示了.)

w3school官方解释

2.9 overflow属性

Eg:使用overflow属性,清除上例的浮动

(加了overflow属性的父div,它的文档流会被抬高,抬高以后,会和刚才脱离文档流的div1和div2位于同一层级,这样,它的高度就可以被这两个div撑开了)

2.10定位position属性

Eg:

未使用定位前:

②使用相对定位

(仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响.)

③使用绝对定位:

(当父容器的position为非static值,子元素的是绝对定位absolute,则,此时子元素就会相对父容器来进行定位.容器1脱离了文档流,则剩下的元素就会往上挤.)

④使用fixed定位

(当滚动条向下拉动的时候,容器1还是固定不变,因为它是相对于浏览器定位的.)

css属性

标签：下划线   汉字   color   元素   如何   

原文地址：http://a4seven.blog.51cto.com/11973210/1918772