CSS 替换元素和非替换元素 行内非替换元素

html元素也可以分为替换元素和非替换元素

1.替换元素

替换元素是由浏览器根据表示的元素和属性决定显示的内容。

例如:<img src="./image.jpg" />他由标签元素img和属性src来决定显示的内容。

<input type="text" />如果text换成其他的属性值,input会显示不同的样子,这也是有input和type属性值决定显示内容的。

像<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素没有实质的内容

2.非替换元素

html中大多数都是非替换元素,浏览器直接显示标签元素的内容。

比如:<p>paper</p>

行内非替换元素

width和height在行内非替换元素中无效。行内非替换元素框的宽度是它的内容渲染后(在任何子元素相对偏移之前)的宽度,它的高则是基于字体。

<a>、<span>是行内非替换元素

但是浮动后的行内非替换元素可以使用width和height。

时间: 2025-01-02 03:51:47

CSS 替换元素和非替换元素 行内非替换元素的相关文章

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

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

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

行内元素水平居中如何设置?如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>行内水平居中设置</title> 6 <style type="text/css"> 7 div.box

行内元素与块级元素的区别,行内块级元素在IE8-的兼容性

行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行. 对于行内元素设置with.height.margin值无效,但对于块级元素,设置这些值是有效的. 行内块级元素在IE8以下的兼容性 div { display: inline-block: *zoom: 1: *display: inline: } 解析

去除行内(inline/inline-block)元素之间的间距

先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { display: inline; background: #f00; } .inline-0f0 { display: inline; background: #0f0; } .inline-block-00f { display: inline-block; background: #00f; } .inline-bl

html中常见的行内元素和块级元素,还有常见的行内块元素

在html中,元素主要分为行内元素和块级元素: 行内元素指的是书写完成后不会自动换行,并且元素没有宽和高. 块级元素写完后会自动换行,有宽高可以修改. 还有一种特殊的元素叫做行内块元素. 大致分内是: 行内元素有:heda   meat   title  lable  span  br  a   style  em  b  i   strong 块级元素有:body  from  select  textarea  h1-h6 html table  button  hr  p  ol  ul

HTML行内元素、块级元素、行内块级元素的特点与区别

元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 元素分类方式 HTML 可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者可以通过设置display属性值实现相互转化.实现如下 #转换为行内元素 display:inline; #转换为块状元素 display:block; #转换为行内块状元素 display:inline-block; 元素特点 行内元素 不会自动换行 设置宽高无效 设置margin上下方向无效,左右方向有效

css基础 display:inline 块级标签-&gt;行内标签 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

行高引起的行内块级元素间距

line-height 属性设置行间的距离(行高). 该属性会影响行框的布局.在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离. line-height 与 font-size 的计算值之差(在 CSS 中成为"行间距")分为两半,分别加到一个文本行内容的顶部和底部.可以包含这些内容的最小框就是行框. 原始数字值指定了一个缩放因子,后代元素会继承这个缩放因子而不是计算值. 原文地址:https://www.cnblogs.com/gopark/p/8822720

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性

一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.