元素的显示方式

一.行内元素

1.一行可以显示多个
2.不能设置宽度
3.大小由内容决定
显示方式：display：inline
代表元素：a，span，u，b，i，s，strong，ins，em，del

二.块级元素

1.独占一行
2.可以设置宽高
3.默认宽度一整行
显示方式：display：block
代表标签：p，h1-h6，div，ul，li，ol，dl，dt，dd

三.行内块级元素

1.一行可以显示多个
2.可以设置宽高
显示方式：display：inline-block
代表标签：img input textarea

四.元素之间的切换

修改display属性

时间： 2024-08-26 09:48:20

元素的显示方式的相关文章

微信小程序布局之行内元素和块级元素

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width.当设定新的宽度,如果宽度是100%,并且padding.margin不为零,导致块级元素宽度溢出父元素 3.盒子模型的高度默认由内容决定 4.盒子模型中高度.宽度和内外边距都是可控制

块级元素与行内元素

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

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

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

CSS布局元素

一.display(元素显示模式) display属性用来设置元素的显示方式.如果display设置为none,float及position属性定义将生效. 语法:display: block | none | inline | inline-block 1)block:块对象值的是元素显示为一个方块,默认显示状态下将占据整行,其它元素只能另起一行显示.(块元素) 2)inline:行间对象与block刚好相反,它允许其它元素在同一行显示.(内联元素) 3)inline-block:指定对象为内

关于元素隐藏/显示的各种方法

元素的隐藏/显示可以说数使用频率最高的方法之一,比如二级菜单,响应式布局,透明过度等等许许多多的特效都会使用到,以下介绍一下元素隐藏的各属性以及他们的特性和使用方法:display  visibility  opacity  overflow  position 我们先设置一些共有属性: <head> <style> div{ width: 100px; height: 100px; background-color: #444; margin: 10px; color: #f00

inline-block 实现元素垂直居中

---恢复内容开始--- 1.元素的显示方式: 1 display:inline; 3 display:linline-block; 5 display:block display:inline 表示,元素做为内联元素显示,两个或者多个内联元素可以并列成一行显示:常见的内联元素如:span strong 标签:内联元素的特点是:不能给元素设置宽和高: display:block 表示,元素作为块级元素显示,两个或者多个块级元素分成多行显示:常见的块级元素如:div, h1~h5 标签:块级元素的

块级元素和行内元素的区别，常见的块级元素和行内元素有哪些

一般来说,html的元素分为两种,即块级元素和行内元素. 块级元素:块状元素排斥其他元素与其位于同一行,可以设定元素的宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素. 行内元素:行内元素不可以设置宽(width)和高(height),但可以与其他行内元素位于同一行,行内元素内一般不可以包含块级元素.行内元素的高度一般由元素内部的字体大小决定,宽度由内容的长度控制. 常见块级元素有:h1,h2,h3,h4,h5,h6,p,div,dl,dt,hr,ol

水平居中与垂直居中

一.水平居中 1)如果是行内元素,需要在它的父元素上设置text-align: center; 2)如果是块元素,直接设置元素的css属性text-align: center; 或则可以定宽再加上margin:0 auto; p{           width: 300px;          margin:0 auto;        }     p{margin:auto;} 二.垂直居中 垂直居中的时候情况会比较多,根据不同的情况分别有下列几种方法 1)表格布局法------不用知道需要

Qt之控件美化

级联样式表 (CSS) 包含应用于网页中的元素的样式规则.CSS 样式定义元素的显示方式以及元素在页中的放置位置.可以创建一个通用规则,只要 Web 浏览器遇到一个元素实例,或遇到一个分配给某个特定样式类的元素,该规则就立刻应用属性,而不是将属性逐个分配给页中的每个元素. CSS 样式可以通过内联方式放置在单个 HTML 元素内,也可以在网页 head 部分的 style 块内加以分组,或从单独的样式表中导入.如果样式是在单独的样式表中创建的,则可以将多个网页链接到该样式表,从而为整个网站提供一