本文共 1696 字，大约阅读时间需要 5 分钟。

【css】day03_文本格式化_定位

1.文本格式化

·指定字体

  - font-family:value1,value2;

·字体大小

  - font-size:value;

·字体加粗

  - font-weight:normal/bold;

·文本颜色

  - color:value;

·文本排列

  - text-align:left/right/center;

·文字修饰

  - text-decoration:none/underline;

·行高

  - line-height:value(1.6em);

·首行文本缩进

  - text-indent:value(2em);

2.表格样式

1）表格常用样式属性

表格同样可以使用box模型（边框、内边距、宽、高）以及文本格式化属性

2）表格特有样式属性

·如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框。

·border-collapse属性：合并相邻的边框

  - 设置是否将表格边框合并为单一边框

  - border-collapse:separate/collapse;

3.定位

·定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

  - 流定位

  - 浮动定位

  - 相对定位

  - 绝对定位

  - 固定定位

1）流定位

·页面中的块级元素框从上到下一个接一个排列

  - 每一个块级元素都会出现在一个新行中（比如<p>元素、<div>元素）

  - 元素框之间的垂直距离是由框的垂直外边距计算出来的

·行内元素将在一行中从左到右排列水平布置

2）浮动定位

·浮动定位是指

  - 让元素脱离普通流定位

  - 将浮动元素放置在父元素的坐边或者右边

  - 浮动元素放置于父元素之内

·浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或者另一个浮动框的边框为止

  - 经常使用它来实现特殊的定位效果

·float属性

  - float:none/left/right;

eg:

          
               
   
      
    
     d1
    
      
    
     d2
    
      
    
     d3
    
      
          
    
           
   
    
苍苍、奇奇、晶晶
  

3）相对定位

·元素原本所占的控件不释放

·元素框会相对于它原来的位置偏移某个距离

  - 设置垂直或者水平位置，让元素相对于它的起点进行移动

·设置元素为相对定位

  - 首先要设置position:relative;

  - 然后使用left/ringht/top/bottom 指定偏移量

eg：

          
               
   
    d1
   
    
   
    d2
   
  

4）绝对定位

·将元素的内容从当前定位中移除，释放空间

·并使用偏移属性来固定该元素的位置

  - 相对于最近的已定位的祖先元素

  - 如果没有已定位的的祖先元素，那么它的位置相对于最初的包含块，比如body

·设置元素为绝对定位

  - 首先需要设置position属性的值为absolute

  -然后使用left/right/top/bottom属性设置元素的水平位置

5）定位属性

 - position:static/relative/absolute/fixed

 - top/bottom/right/left:value;

 - z-index:value;   ----堆叠顺序

6）堆叠顺序

·一旦修改了元素的定位方式，则元素可能会发生堆叠

·可以使用z-index属性来控制元素框出现的重叠顺序

·z-index属性的值越大离用户越近

7）固定元素

eg：

          
               
固定定位
    
   
      
    TOP    
   
    
图片1
        
图片2
        
图片3
        
图片4
        
图片5
        
图片6