上一个礼拜,做crm项目,使用的大部分都是js,nodejs,ajax 的内容,但是今天我想写写关于html中的块级元素和内联元素 的东西。

首先,html 中的块级元素

内联元素

我们可以看到,这两个表格中有重复的元素,这些元素被称为可变元素

对于html中块级元素和行内元素,有什么区别呢?

块级元素会分行显示,行内元素是在同一行显示内容

具体区别如下:1.行内元素  在尺寸设置方面

设置它的宽,高,均无效

设置margin 值,左右的margin 值可以设置,上下的margin 值设置无效,

设置padding 值, 左右的padding 值可以设置,上下的paddig 值设置无效

2. 使用text-align 属性

该属性描述的是块级元素的行内内容设置文本水平对齐方式

特殊情况:在IE6/IE7/IE8 中 该属性可以让块级元素也居中对齐,但是在其他浏览器上,该属性仅仅针对于行内内容上居中对齐。

那么,如果我们想将块级元素设置为行内元素,或者将行内元素设置为会计元素该怎么办么?

使用display属性

display:inline  可以将块级元素设置为行内元素,这样,该块级元素就拥有了行内元素的特性

同样:   display:block   可以将行内元素设置为块级元素,该行内元素就 拥有了块级元素的特性,可设置宽高,margin ,padding  的各方向值。

html 中的块级元素 内联元素的更多相关文章

  1. css中的块级和内联元素

    块级元素: 首先说明display是块级元素,会单独站一行,如 代码: <!DOCTYPE html> <html> <head lang="en"& ...

  2. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  3. html的块级、内联、内联块级元素基础

    概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. displa ...

  4. #HTML 块级、内联、内联块级元素

    [常用的块级元素] div,form,p,table,h1~h6,hr,dl,ol,ul,pre等 [常用的内联元素] a,img,input,span,br,select,strong,em,tex ...

  5. css块级元素,内联元素,内联块状元素

    块元素 什么是块级元素?在html中<div><p><h1><form><ul>之类的就是块级元素.设置display:block是就将元素 ...

  6. HTML元素分类:块级元素 内联元素和内联块状元素

    在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 1,块状元素 常用的块状元素有: <div>.<p>.<h1 ...

  7. HTML元素分类 块级元素 内联元素 块级内联元素

    概述 HTML中存在许多元素,如<h1>,<p>,<a>,<block>,<image>,这些元素可分为三类,依次是块级元素,内联元素,块级 ...

  8. 顶级、块级、内联,html元素的三大分类

    学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.如果将这些元素细分, 又可以分别归为顶级(top-level)元 ...

  9. html 块状元素 行内元素 内联元素

    块状(Block)类型的元素的width默认为100%,而行内(Inline)类型的元素则是根据自身的内容及子元素来决定宽度. 块元素(block element) address - 地址 bloc ...

随机推荐

  1. POJ 2778 DNA Sequence(AC自动机+矩阵快速幂)

    题目链接:http://poj.org/problem?id=2778 题意:有m种DNA序列是有疾病的,问有多少种长度为n的DNA序列不包含任何一种有疾病的DNA序列.(仅含A,T,C,G四个字符) ...

  2. servlet同一用户的不同页面共享数据

    一.cookie技术 cookie的讲解和使用 --------------- 服务器在客户端保存用户的信息,比如登录名,密码等...就是cookie, 服务器端在需要时可以从客户端读取. cooki ...

  3. Android 开发笔记 “java.util.Calendar.compareTo()”

     java.util.Calendar.compareTo() 方法比较Calendar对象和anotherCalendar对象之间的时间值(毫秒偏移量). 声明 以下是java.util.Calen ...

  4. HTML+CSS笔记 CSS中级 颜色&长度值

    颜色值 在网页中的颜色设置是非常重要,有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 语法: p{co ...

  5. System.Reflection.Emit学习

    C#反射发出System.Reflection.Emit学习 分享: 1 一.System.Reflection.Emit概述 Emit,可以称为发出或者产生.与Emit相关的类基本都存在于Syste ...

  6. PICC国际标准ISO14443下载

    ISO 14443:第一部分规定了PICC的物理特性.接近卡(PICC)国际标准ISO14443-1点击下载 ISO 14443:第二部分规定了PICC的射频功率和信号接口. 接近卡(PICC)国际标 ...

  7. [置顶] SOLR 4.4 部署

    SOLR 4.4 部署 前言:近期研究下solr4.4的部署,一下是部署步骤,与大家分享下. 下载solr4.4.0.zip 地址        http://mirror.esocc.com/apa ...

  8. 如何使用robots不让百度和google收录

    如何使用robots不让百度和google收录   有没有想过,如果我们某个站点不让百度和google收录,那怎么办? 搜索引擎已经和我们达成一个约定,如果我们按约定那样做了,它们就不要收录. 这个写 ...

  9. 关于COOKIE使用过程为NULL

    关于COOKIE使用过程中的一个小问题在程序中要用到COOKIE,网站website/login/login.aspx传值userID到 website/web/tab/web.aspx中的FRAME ...

  10. Python生成随机数的方法

    这篇文章主要介绍了Python生成随机数的方法,有需要的朋友可以参考一下 如果你对在Python生成随机数与random模块中最常用的几个函数的关系与不懂之处,下面的文章就是对Python生成随机数与 ...