css块元素和行内元素以及属性详解

块元素(block element)

div(css layout的主要标签)、dl(定义列表) 、h1~h6(标题)、p(段落)、table(表格) , ul(非排序列表)

特点: 会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子

内联元素(inline element)

a(超链接)、span(常用内联容器,定义文本内区块)、i(斜体)、img、em(强调)、label

特点: 和其他元素都在一行上、元素的高度、宽度、行高及顶部和底部边距不可设置、元素的宽度就是它包含的文字或图片的宽度,不可改变。

补充:inline-block

将对象呈现为inline对象,但是对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内

时间: 2025-01-15 14:21:05

css块元素和行内元素以及属性详解的相关文章

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

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

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

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

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

CSS中块级元素和行内元素

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流

css部分样式整理-特殊字体格式、导航栏固定、块级元素与行内元素、html 元素的margin与padding默认值、css样式优先级概括等

1.一些特殊字体样式: 首行缩进2字符:{text-indent:2em;} 水平居中:{text-align:center;} 两端对齐:{text-align:justify;} 垂直居中:{vertical-align: middle;} 字间距2字符:{letter-spacing:2em;} 行间距2倍:{line-height:2;}     2.导航栏固定在页面某处(相对于<body>):     {position:fixed;left:  px;top:  px;}  3.块

css块级元素和行内元素详细解析

块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; 它们的区别主要有以下几点: 1.块级元素独自占一行且宽度会占满父元素宽度,行内元素不会独占一行,相邻行内元素可以排在同一行. 如图: <head> <meta charset="UTF-8"> <title>测试</title> <s

深度理解CSS中块级元素与行内元素的区别(个人易错点)

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

css基础:块级元素与行内元素

块级元素与行内元素的概念 块级元素一般是内容的容器,可以设置宽度和高度.而行内元素则不行,行内元素只能包含内容和其他行内元素,而块级元素可以包含行内元素和其他块级元素, 块级元素可以设置margin.padding,而行内元素水平方向margin-left.margin-right.padding-left和padding-right可以有效, 竖直方向上的margin-top.margin-bottom.padding-top和padding-bottom不能生效 占据整个父级元素.通俗的来讲

HTML 块级元素与行内元素

1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障

替换元素和不可替换元素,块级元素和行内元素

替换元素和不可替换元素 1>  替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,在其显示中生成了框.HTML中的<img>.<input>.<textarea>.<select>.<object>都是替换元素.这些元素往往没有实际的内容,即是一个空元素.Example:#1 <img src=”path/to/picture.jpg”/>浏览器根据<img>标签的src属性的值来读取图片信