CSS入门10-替换元素和非替换元素,块级元素和行内元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 简介

我们知道html中元素对外表现都是一个个盒子或者说是框,那么这些盒子是否都一样呢?前面说过,这些盒子有的是从上到下竖着摆放的,而有的是横着摆放的。另外,有的盒子装的内容是直接展示的,有的却是魔术盒,根据标签和属性决定具体的展示内容。

2. 替换元素和非替换元素

2.1 替换元素

替换元素是指,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。 其内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)。

最明显的两个例子:

  1. img 浏览器会根据img元素的src属性加载图片信息并显示,如果仅查看HTML代码,只能看到引用地址,而看不到图片的实际内容。
  2. input 浏览器会根据input元素的type属性决定其展现形式,是显示成输入框,还是单选按钮等。

另外,textarea、select、object、video都是替换元素。这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

2.2 非替换元素

HTML 的大多数元素是非替换元素,浏览器直接将其内容显示出来。例如:div, p, span

3. 块级元素和行内元素

3.1 块级元素

普通流中,块元素独占一行。例如:div,p,h1等。

3.2 行内元素

普通流中,行内元素左右可以有其他行内元素。

4. 块级元素,行内替换元素,行内非替换元素表现

4.1 块级元素表现

块级元素,width,height,margin,boder的设置遵循盒模型。

4.2 行内替换元素表现

行内替换元素,width,height,margin,boder的设置遵循盒模型。另外,当其宽高有auto属性时,其表现如下:

4.2.1 行内替换元素的宽度

  1. 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度 。 典型的例子是:拥有默认宽高的 input 当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度。
  2. 若宽度的计算值为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度 例子同上。
  3. 若宽度的计算值为 auto 且高度有非auto 的计算值,并且元素有固有宽高比,则 width 的使用值为 高度使用值 * 固有宽高比 。 典型的例子:img 当只定义了其高度值时,其宽度将会根据固有宽高比进行等比设置,这也是为什么img是行内元素,但可以设置宽高的原因。
  4. 除此之外,当 width 的计算值为 auto 时,则宽度的使用值为 300px 典型的例子:比如iframe, canvas

4.2.2 行内替换元素的高度

  1. 若宽高的计算值都为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
  2. 若高度的计算值为 auto 且元素有固有高度,则 height 的使用值为该固有高度;
  3. 若高度的计算值为 auto 且宽度有非auto 的计算值,并且元素有固有宽高比,则 height 的使用值为:宽度使用值 / 固有宽高比;
  4. 若高度的计算值为 auto 且上述条件完全不符,则 height 的使用值不能大于150px,且宽度不能大于长方形高度的2倍

4.3 行内非替换元素表现

  1. 宽高设置是无效的,用line-height来控制高度
  2. padding左右起作用,上下不会影响行高,但是对于有背景色和内边距的行内非替换元素,背景可以向元素上下延伸,但是行高没有改变。因此视觉效果就是与前面的行重叠。
  3. margin左右作用起作用,上下不起作用,原因在于:行内非替换元素的外边距不会改变一个元素的行高

5. 块级元素和行内元素的转换

5.1 块级->行内

  1. display: inline

5.2 行内->块级

  1. display: block
  2. 设置float

css 行内元素 块元素 替换元素 非替换元素 以及这些元素的width height margin padding 特性 替换元素和非替换元素 html元素两种分类。替换元素和不可替换元素;块级元素和行内元素 置换元素(替换元素)和非置换元素(不可替换元素) 行内元素与块级元素的总结 置换和非置换元素

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菜鸟计划

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height   在CSS中,可以对任何块级元素设置显式高度。   如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效...

5037
来自专栏恰童鞋骚年

Web前端温故知新-CSS基础

  定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样...

1423
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

911
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native布局详细指南

本文出自《React Native学习笔记》系列文章。 一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox...

4074
来自专栏编程

【CSS选择符】后代选择符

在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始...

2285
来自专栏林德熙的博客

win10 uwp 绘图 Line 控件使用

本文主要讲一个在绘图中,我们会有一个基础的控件,Line。控件的基本使用和他能做出的我们很多时候需要的界面。

1322
来自专栏欧阳大哥的轮子

iOS界面布局的核心以及TangramKit介绍

TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局...

1323
来自专栏程序员互动联盟

【专业技术】CSS知识点总结

1、CSS指层叠样式表(Cascading Style Sheets) 2、使用CSS样式常见的三种方式: 1)<link href=".............

36110
来自专栏十月梦想

元素居中的多种实现方式!

优点:只需在子元素child上设置css样式,不用关心父元素的 缺点:兼容性较差,如果需要兼容,更改html样式,改为table样式

672
来自专栏康怀帅的专栏

CSS

CSS <style type="text/css"> </style> 注释 /*注释*/ 内联式 <p style="color:red"> </p> 嵌...

2914

扫码关注云+社区

领取腾讯云代金券