CSS入门二

一、CSS的样式

1、边框和尺寸

  border：设置边框的样式
    格式：宽度 样式 颜色
      样式的取值：solid 实线，none 无边，double 双线等
  width、height：用于设置标签的宽度、高度。

示例：

边框和尺寸

2、转换：display

  我在之前的 HTML二 的文章中，讲述了块标签和行内标签。如果我们想要行内元素具有块元素的特性，需要用display转换。

例如：

    
        
        
        
    
    
        
        显示1-1
        显示1-2
        
        
        
        显示2-1
        显示2-2
    

转换

3、字体

  color：字体颜色
  font：字体类型
  font-size：字体大小

示例：

    
        
        
    
    

    
        

            点击
            点击
        
        

            点击
            点击
        

    

字体

4、背景色：background-color

    
        
        

    
    

        
点击
        
点击
        
点击
        
点击
    
    

背景色

5、布局

  通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动。但是浮动也会对页面中其他元素的排版产生影响。

浮动格式：
  选择器{float:属性值;}
    常用属性值：
      left：元素向左浮动
      right：元素向右浮动
      none：元素不浮动（默认值）
清除浮动格式：
  选择器{clear:属性值;}
    常用属性值：
      left：不允许左侧有浮动元素（清除左侧浮动的影响）
      right：不允许右侧有浮动元素（清除右侧浮动的影响）
      both：同时清除左右两侧浮动的影响

示例：

    
        
        
    
    
    

        
区域1-1
        
区域1-2
    

    


    
    

        
区域2-1
        
区域2-2
    

    
    

    

    

        
区域2-1
        
区域2-2
        
区域2-3
    
    

布局

二、盒子模型

  盒子模型主要用于设置一个元素与其他元素之间的距离，也用于设置元素的内容与元素边框之间的距离，一个盒子模型由元素的内容、元素的边框、外边框以及内边框组成。

盒子模型

1、内边距：padding

  设置内边距可以为所有边设置统一的属性值，也可以按照上、右、下、左的顺序设置属性值，可以使用像素值或者百分比。

属性：
  上 border-top
  下 border-bottom
  左 border-left
  右 border-right

2、外边距：margin

  设置外边距的方式和内边距一样。

属性：
  上 margin-top
  下 margin-bottom
  左 margin-left
  右 margin-right

3、边框：border

  可以通过属性设置边框的类型。
  border-top-style
  border-bottom-style
  border-left-style
  border-right-style