上一个礼拜,做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. 面试题之String str = new String("abc"); 创建了几个对象

    今天去面试的时候碰到了这个问题:String str = new String("abc"); 创建了几个对象,回来自己研究并查阅资料才发现答错了..网上的争论不少,有的说是两个, ...

  2. PHP-购物网站开发设计(一)

    2015-07-6 开始使用PHP完成简单购物网站的设计,首先要选择合适的软件平台,所以今天先记录平台的选择与搭建: 我选择使用Apache24 + PHP 5.6 + MySQL 开发环境完成PHP ...

  3. 网络编程——TCP连接

    TCP在双方传输数据前,发送方先请求建立连接,接收方同意建立连接后才能传输数据.(打电话:先拨号,等对方同意接听后,才能交流)...高可靠性 UDP不需要建立连接(发短信).不可靠,可能出现数据丢失等 ...

  4. Maven POM配置释疑

    1.  对于有父子关系的Project, 父POM中依赖使用dependencies 和 dependencyManagement 的区别: dependencies: 即使子项目中不写该依赖项,仍然 ...

  5. Java 比较两日期相差天数

    (版本1) publicstaticint getIntervalDays(Date fDate, Date oDate) { if (null == fDate || null == oDate) ...

  6. golang并发编程

    golang并发编程 引子 golang提供了goroutine快速实现并发编程,在实际环境中,如果goroutine中的代码要消耗大量资源时(CPU.内存.带宽等),我们就需要对程序限速,以防止go ...

  7. 再探java基础——break和continue的用法

    再探java基础——break和continue的用法 break break可用于循环和switch...case...语句中. 用于switch...case中: 执行完满足case条件的内容内后 ...

  8. [Windows编程] 使用AttachThreadInput 来捕捉其它窗口的键盘输入

    在一些情况下(比如屏幕软键盘或者输入法程序),自己的窗口没有输入焦点但是想要当前焦点窗口的键盘输入消息,可以使用Win32 API函数AttachThreadInput()来解决这个问题.Attach ...

  9. 跨域引入iframe 自适应高度

    最近和别的公司合作一个项目,需要从他们那边引入一个页面,刚开始想的挺简单的,用iframe 引入就好啦,可是操作中才发现,自适应的问题不好解决,试了挺多办法,最终找到一个比较好的方法,记录一下,留着备 ...

  10. Vmware中Ubuntu挂ISO到虚拟光驱

    Ubuntu 下挂ISO到虚拟光驱的方法 https://i.cnblogs.com/EditPosts.aspx?opt=1 如果要ubuntu找到rpm软件包,需要把iso挂载到/media/cd ...