css元素类型详解

css元素类型详解

css的元素暂时而言被分为三类:块状元素、内联元素(行内块元素也可称内联元素)、可变元素

当然我只简单的谈谈默认情况下各元素的一些特点

      块状元素特点 1:在页面中以矩形区域显示。
               2:自上而下排列,独占一行
               3:可以直接添加宽高
               4:一般情况下,作为其他元素或内容的容器

 常用块状元素 div -最常用的块级元素

        dl - 和dt-dd 搭配使用的块级元素
        form - 交互表单
        h1 -h6- 大标题
        hr - 水平分隔线
        ol – 有序列表
        p - 段落
        ul -li- 无序列表
        fieldset - 表单字段集
        colgroup-col - 表单列分组元素
        table-tr-td  表格及行-单元格
      内联元素特点: 1:在页面中最小单位也是矩形。
               2:在一行内逐次排列。
               3:不可以直接添加宽高,大小由内容撑开。
               4:内联元素也符合盒模型的规则,但是个别属性会出现问题(padding-top/bottom    margin-top/bottom)
               5: 内联元素在一行内排列的时候,之间有间距 (消除间距: a:添加浮动  b:把所有的内联元素都放在一行不用回车键(不推荐)
  常用 内联元素 a –超链接(锚点)                               
        b - 粗体(不推荐) 
        br - 换行                             
        i - 斜体
        em - 强调                             
          (img - 图片 input - 输入框)                
        label - 表单标签                  
        span - 常用内联容器,定义文本内区块
        strong - 粗体强调
        sub - 下标   
        sup - 上标
        textarea - 多行文本输入框
        u - 下划线
        select - 项目选择  
      可变元素(了解): 根据上下文的显示,来确定这个元素是块状元素还是内联元素
            <button>按按钮按钮按钮钮</button>
元素类型的转换 display属性: 检索或者设置元素生成的盒模型类型。
           常用属性值:1. display:block            
                 作用:将元素转成块状元素,拥有块状元素特点。
                (大部分块状元素,默认的display的值都是block)
          2. display:inline    
                作用:将元素转成内联元素,拥有内联元素的特点。  
                (大部分内联元素,默认的display的值inline)
         3. display:none    
                作用:将当前隐藏,并不占据空间。           
 
 
 
 
 
 
 
 
 
 

猜你喜欢

转载自www.cnblogs.com/liangce/p/12595835.html