zoukankan      html  css  js  c++  java
  • HTML区块元素

    我们在面试的时候经常会被问到块状元素和行内元素,而且在应用中,也会经常用到,很实用,因此在这里对这俩个元素做了下简单的总结:

    一:块状元素

    (1)块元素,比如div,在没有任何布局属性作用时,默认排列方式为换行排列

    (2)高度,宽度以及外边距和内边距都可以进行控制

    (3)宽度始终与浏览器宽度一样,与内容无关

    (4)可以容纳内联元素和其他块元素

      常用的块状元素有:div ul  ol  form h1-h6  menu  p  table  dl  dt   dd  等

    二:行内元素

    (1)在没有任何布局属性作用时,默认同行排列方式,直到宽度超出包含它容器的宽度才会自动换行

    (2)设置宽度无效

    (3)设置高度无效,可以通过line-height设置

    (4)设置marging 只有左右marging有效,上下无效

    (5)设置padding 上下左右都有效,会撑大空间但是不会产生边距效果

      常用的行内元素有:span  a  b  i  em  img  lable  input  sub  sup  u  br 等

    三:行内块状元素

      行内块状元素综合了行内元素和块状元素的特性,在日常使用中,由于其特性,使用还是比较多

    (1)默认不会自动换行

    (2)可以对宽度 高度进行设置

    (3)默认排列方式为从左到右

       常用的可变元素有:button  del  iframe  ins插入的文本 等,可以根据环境去改变其元素

    综上所述,HTML可以将元素分为三大块:块状元素,行内元素,行内块状元素,并且这三者可以互相转换,需要使用display属性

      (1)  display:inline; 转换为行内元素

      (2)  display:block; 转换为块状元素

      (3)  display:inline-block; 转换为行内块状元素

  • 相关阅读:
    php.ini 干了些啥?
    为什么你的 phpinfo() 无法显示
    转:反向代理服务器的工作原理
    nginx fastcgi php-fpm的关系梳理
    DOM中offsetLeft与style.left的区别
    移动端与PC端的触屏事件
    移动端适配属性
    移动设备横竖屏监听事件
    关于滚动条滚动不流畅问题
    Oracal
  • 原文地址:https://www.cnblogs.com/webdelovely/p/11393396.html
Copyright © 2011-2022 走看看