关于盒子模型以及块元素和行内元素

  盒子模型,盒子模型算是页面比较经典的一个概念了,所有的页面元素和div都能称之为一个盒子,每个盒子都具备:内容(content),填充(padding  也称之为内边距),边框(border),边界(margin  也称之为外边距);下面有一张盒子模型的图片;

  

  说白了这个盒子模型让你知道你需要效果式需要调整哪个位置的内外边距以及边框的样式;

  行内元素和块元素:

  行内元素,又称为内联元素,行内元素在本行内可以容纳文本和其他行内元素,常见行内元素<span><a>等;

  块元素,块元素不管内容大小,独占一行,常见的块元素 <div><p>等;

  代码 display:inline   可以使当前元素按行内元素方式显示;

  代码 display:block  可以使当前元素按块元素方式显示;

  

原文地址:https://www.cnblogs.com/privateWa/p/8728294.html

时间: 2024-08-27 18:42:49

关于盒子模型以及块元素和行内元素的相关文章

css盒模型和块级、行内元素深入理解

一.CSS盒模型 盒模型概述 盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成.如下图所示: 内边距出现在内容区域的周围.如果在元素上添加背景,那么背景应用于元素的内容和内边距组成的区域.因此可以用内边距在内容周围创建一个隔离带,使内容不与背景混合在一起.添加边框会在内边距区域外边增加一条线.这些线可以有不同的样式和宽度,如实线.虚线.点画线.在边框外边的是外边距,外边距是透明的,一般使用它控制元

盒子模型,块级元素和行内元素特性与区别

盒子模型 css盒子模型分为两种,一种是遵循w3c标准的标准盒子模型,另外一种就是IE盒子模型. 标准盒子模型 IE盒子模型 通过上面两张图可以看出,两种盒子模型都包括padding,margin,border,content,但是ie盒子模型的content包括border和padding. 一个例子 一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px.高为 50px. 标准盒子模型 盒子需要占据的位置为:宽 20

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在

块级元素与行内元素(内联元素)的区别和联系

在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element).那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念.块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.最常见的就是P和div这两个,说的简单点,块元素就好比一个四方块,可以放其 他的四方块,并可以呈现在页面上任何地方.默认情况下块元素,是独占一行的.常见的块元素:div.h1-h6标题.form(只能用来容纳其他块元

HTML中块级元素和行内元素的总结和区分。

摘自: https://www.cnblogs.com/yanqiu/p/8987126.html HTML标签 html标签定义: 是由一对尖括号包裹的单词构成,例如: <html>. 标签不区分大小写<html> 和 <HTML>, 推荐使用小写. 标签分为两部分: 开始标签<html> 和 结束标签</html>, 两个标签之间的部分我们叫做标签体. 有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如: <br/&g

块级元素与行内元素

标准文档流是指在没有CSS干预时各种元素的排列规则.在这种前提下,HTML文档中的元素可以分为两大类:块级元素和行内元素.1.块级元素(block)独占一行,可以设定元素的宽和高.常见的块级元素有:* html 文档的类型* body 文档的内容* h1-h6 一级标题到六级标题* p 文章段落* ul 无序列表* li 定义列表项目* ol 有序列表* dl 定义列表* dt 定义列表中的项目* dd 定义列表中定义条目* pre 定义预格式文本* blockquote 大段引用* div 划

html中块级元素和行内元素

块级元素和行内元素的三个区别 1.行内元素与块级元素直观上的区别: 行内元素会在一条直线上排列,都是同一行,水平方向排列 块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行 2.块级元素可以包含行内元素和块级元素, 行内元素不能包含块级元素 3.行内元素和块级元素属性的不同,主要是盒模型属性上 行内元素设置width无效,height无效(可以设置line-height), 行内元素margin上下无效,padding上下无效 行内元素转换块级元素,用css实现 display:

从块级元素和行内元素的分析到bfc的布局理解

接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说明: 名称 类型 说明 offset Number 打点的视频偏移时间,单位:秒 text String 打点的文本信息,默认UI会使用 isCustomized Boolean 是否使用默认UI,不使用设置为true 事件 Aliplayer提供两个事件:鼠标进入进度条上的打点和鼠标离开进度条上的

块级元素和行内元素区别

一,行内元素与块级元素的区别: 1.行内元素与块级元素直观上的区别二.行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列. 块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列.块级元素从新行开始,结束接着一个断行. 2.块级元素可以包含行内元素和块级元素.行内元素不能包含块级元素,只能包含文本或者其它行内元素. 3.行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width