zoukankan      html  css  js  c++  java
  • 行内元素、块级元素和行内块元素

    1、行内元素

     常见的行内元素:

    <a> 锚点
    <b> 字体加粗
    <big> 大号字体
    <br> 换行
    <em> 定义为强调内容
    <i> 斜体文本
    <img> 图片
    <input> 输入框
    <label> 标签为input的标注
    <select> 单选或多选菜单
    <small> 小号字体
    <span> 组合文档的行内元素
    <strong> 强调内容
    <sub> 定义上标
    <sup> 定义下标
    <textarea> 多行文本输入框

       

    行内元素的特点:

    1.行内元素默认情况下可以和其他内联元素元素在一行上。
    2.行内元素默认情况下的大小是不可以控制的。
    3.行内元素可以产生代码换行和空格。
    4.行内元素对应属性display:inline;
    5.行内元素只能容纳文本或者行内元素。
          行内元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin- right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom却不 会产生边距效果.


    2、块级元素:

        常见的块级元素

    address 地址元素
    blockquote 块引用
    center 居中对齐
    dir 目录列表
    div 常用的块级元素
    fieldset – form 控制组
    form 交互表单
    h1~h6 标题
    hr 水平横线
    isindex-input prompt  
    menu 菜单列表
    noframes – frames 可选内容
    noscript 可选脚本内容
    ol 有序表单
    p 段落
    pre 格式化文本
    table 表格
    ul 无序列表
       

    块级元素的特点:

    1. 独霸一行,总是在新行上开始
    2. 宽度缺省是它父级元素的100%,除非设定一个宽度
    3. 高度、行高、外边距、内边距都可以设置
    4. 可以容纳其他内联元素或者其他块元素

    3、行内元素与块级元素的区别:

    区别一:
    块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度
    行内:行内元素不会独占一行,相邻的行内元素会排在同一行。其宽度随内容的变化而变化。 
    区别二:
    块级:块级元素可以设置宽高
    行内:行内元素不可以设置宽高 
    区别三:
    块级:块级元素可以设置margin,padding
    行内:行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。 
    区别四:
    块级:display:block;
    行内:display:inline;
    可以通过修改display属性来切换块级元素和行内元素

    4、行内块级元素:

      display:inline-block

      行内块元素特点:

    1. 元素排列在一行
    2. 宽度默认由内容决定
    3. 元素间默认有间距
    4. 支持宽高、外边距、内边距的所有样式的设置
  • 相关阅读:
    20.谱聚类
    19.受限玻尔兹曼机(Restricted Boltzmann Machine)
    18.高斯过程回归(GPR)
    17.贝叶斯线性回归(Bayesian Linear Regression)
    16.高斯网络(GN)
    15.条件随机场(CRF)
    14(2).线性动态系统---粒子滤波 particle filter
    比较IE6的不同之处,与IE8 IE11 比较
    doctype声明、浏览器的标准、怪异等模式
    通过HTML条件注释判断IE版本的HTML语句详解<!--[if IE]> <![endif]-->
  • 原文地址:https://www.cnblogs.com/1500418882qqcom/p/9895184.html
Copyright © 2011-2022 走看看