元素类型

在CSS中,HTML标签元素分为三种类型:
  • 块状元素
  • 内联元素(也叫行内元素)
  • 内联块状元素

它们之间的区别在于:
  1. 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示
  2. 块状元素和内联块状元素可以设置宽高,而内联元素则不行
  3. 块状元素默认宽度为父容器的100%,内联块状元素的默认宽度则根据内容决定

可以看出,块级元素和内联元素的区别主要在 “是否能够独立设置宽高” 以及 “是否独占整行“,而内联块状元素则综合了两者的特性,在行内显示且可以设置宽高。

元素可以通过display属性进行类型转换:
  • display:block;  转换为块级
  • display:inline;  转换为内联
  • display:inline-block;  转换为内联块级

常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> ...

常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<code> ...

常用的内联块状元素有:
<img>、<input> ...


盒模型

页面上的元素整体都可以看成一个盒子,以chrome中的截图为例:
 一个元素的内容,如上图蓝色的200*200;它放在一个盒子里,盒子的外形即border;而padding的翻译也很贴切——“填充”,物品在盒子内并不一定是完全正好放满的,可能会放一些填充物,如快递过程中起缓冲作用的废纸屑等;最后margin,也就是边界,和其他元素的距离。

所以如上图一个元素的宽度我们设定为width:200px,而它实际的宽度占比还需要加上padding、border、margin,也就是200+10*2+5*2+20*2=270px


参考链接:



[浅谈CSS核心概念] CSS元素类型和盒模型的更多相关文章

  1. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  2. CSS核心概念之盒子模型

    盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub--CSS核心概念. 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basi ...

  3. 【转】浅谈UML的概念和模型之UML九种图

    原文地址:浅谈UML的概念和模型之UML九种图 目录: UML的视图 UML的九种图 UML中类间的关系 上文我们介绍了,UML的视图,在每一种视图中都包含一个或多种图.本文我们重点讲解UML每种图的 ...

  4. CSS基础知识---浮动,定位和盒模型

    转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...

  5. 学习总结:CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型

    一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...

  6. 浅谈SpringBoot核心注解原理

    SpringBoot核心注解原理 今天跟大家来探讨下SpringBoot的核心注解@SpringBootApplication以及run方法,理解下springBoot为什么不需要XML,达到零配置 ...

  7. CSS——(2)与标准流盒模型

    部分博客<CSS--(1)基础>中简介了CSS的概念和几种用法,如今主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们能够先从生活中的盒子入手.盒子是用来放置物品的,内部除了有物品 ...

  8. css布局详解(一)——盒模型

    一.网页布局的几种情况 今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考. 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所 ...

  9. 关于CSS你应该知道的基础知识 - 盒模型篇

    浏览器渲染引擎通过盒模型的方式来布局html元素.我们可以将每一个html元素都看做是一个盒子,每一个盒子都有长和款,多个这样的盒子组成了我们的网页. Margin,Border,Padding 每一 ...

随机推荐

  1. form图片上传遇到错误

    org.springframework.web.multipart.MultipartException: The current request is not a multipart request ...

  2. 从零开始学习html(十二)CSS布局模型——下

    五.什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样, 每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧. ...

  3. AngularJS单页面路由配置恩,理解了就很简单啦

    利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些 ...

  4. Android应用耗电量统计,无需USB连接

    Android应用耗电量统计一直是一个很头疼的问题,手工统计耗时太长,自动化统计又不是非常精准(执行自动化代码需要通过USB连接,而USB又会充电,这就造成统计数据不准).后来从前辈那里得知可以通过a ...

  5. python自学——文件处理(截取文件内容)

    #截断文件内容使用的函数为truncate()来截断文件中的内容# 注意当truncate()括号内没有定义对象时则会删除文件内容:当括号内为指定某个条件时文件会截取从0到指定位置的内容f=open( ...

  6. jdk1.8配置环境变量

    1. 准备好jdk安装文件,选择地址,假设使用默认地址 2. 安装jdk,此时跳出安装 jre 的地址 3. 等待安装 4.找到安装路径,选择jdk 5. 复制文件夹下的bin 6. 点击我的电脑右键 ...

  7. 转:基于InstallShield2013LimitedEdition的安装包制作

    InstallShield Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序)   InstallShield Limited Edit ...

  8. linux内核完全剖析——基于0.12内核-笔记(1)-CPU 数据通信

    CPU数据通信总线 CPU通过地址线.数据线.控制信号组成的本地总线(或称为内部总线)与系统其它部分进行数据通信. 地址总线 地址总线用于内存或I/O设备的地址,即指明需要读/写数据的具体位置. 数据 ...

  9. Django之url映射

    url映射的作用 根据Django的MTV模式,url的映射是根据用户输入或传送而来的url路径,来进行区分去执行相应的view函数来响应用户的操作. url映射的方式 Django项目的创建后,会自 ...

  10. How to add hyperlink in JLabel

    You can do this using a JLabel, but an alternative would be to style a JButton. That way, you don't ...