1css属性操作

2float属性

3position定位

1css属性操作

文本属性：

文本颜色：

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

• 十六进制值 - 如: ＃FF0000
• 一个RGB值 - 如: RGB(255,0,0)
• 颜色的名称 - 如:  red

1	hi { color: rebeccapurple;  }

水平对齐方式：

text-align 属性规定元素中的文本的水平对齐方式。

• left      把文本排列到左边。默认值：由浏览器决定。
• right    把文本排列到右边。
• center 把文本排列到中间。
• justify 实现两端对齐文本效果。
• 其他属性：
• font-size: 10px;line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线font-family: 'Lucida Bright'font-weight: lighter/bold/border/font-style: obliquetext-indent: 150px;      首行缩进150pxletter-spacing: 10px;  字母间距word-spacing: 20px;  单词间距text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

  背景属性：

• • background-color
  • background-image
  • background-repeat
  • background-position
  1 2 3 4 5 6 7

  background - color: cornflowerblue   background - image: url( '1.jpg' );   background - repeat: no - repeat;(repeat:平铺满)   background - position: right top（ 20px 20px ）;

边框属性：

• border-width
• border-style (required)
• border-color
• 1 2 3 4 5

  border - style: solid;    border - color: chartreuse;    border - width: 20px

也可以单独设置每个边框的属性：

1 2 3 4

border - top - style:dotted; border - right - style:solid; border - bottom - style:dotted; border - left - style:none;

列表属性：

1 2 3 4 5

list - style - type         设置列表项标志的类型。 list - style - image    将图象设置为列表项标志。 list - style - position 设置列表中列表项标志的位置。   list - style          简写属性。用于把所有用于列表的属性设置于一个声明中

ist-style-type属性指定列表项标记的类型：

1	ul { list - style - type : square; }

使用图像来替换列表项的标记:

1 2 3

ul {       list - style - image: url('');              }

dispaly属性

• none
• block
• inline
• inline-block

none(隐藏某标签)

1	p{display:none;}

注意与visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

block(内联标签设置为块级标签)

1	span {display:block;}

注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　

inline(块级标签设置为内联标签)

1	li {display:inline;}

inline-block

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：

1 2 3 4

#outer{              border: 3px dashed;              word - spacing: - 5px ;          }

2 float属性

先来了解一下block元素和inline元素在文档流中的排列方式。

　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效

• 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
• 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

float漂不是完全脱离文档流，所以会出现float陷阱：

    
             
     
    
      
    
      
    
      
     
     
          Content
     

清除浮动  clear :none|left |right|both

非完全脱离文档流：

 左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。内容会出现推挤现象。

>>>>解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。

父级塌陷现象：解决方法就是上面的代码(方法一与方法二)

3position定位

position有四个值：static 、relative、absolute、fixed

（一）static 是默认的 无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

(二)

relative: 相对定位。

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute: 绝对定位。

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。

（三）fixed

   fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

       在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

    
             
     
     
      返回顶部
     

注：fixed完全脱离文档流，通过top、left来进行定位（2）absolute 完全脱离文档流，以已经定位了的父标签作为参照物如果父标签没有定位就网上找，如果没有就用body的（3）relative  不脱离文档流，以自己原来的位置作为参照物可以用top、left来进行定位