CSS的行内样式与内联样式，看这篇就够了

HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。

块级元素：

独占一行，宽度和父元素宽度一样宽（默认）
可以设置宽高
设置的width属性和元素的宽度（width+padding2+border2+margin2）是两回事(盒子模型)
如果没有设置高度，高度由内容撑开
块级元素可以包裹别的元素。p标签尽量不要包裹别的块级元素

常用的块级元素：

<div> </div>：
块级的块标签，用于在效果中定义一块；
<p> </p>：
段落标签，用于展示效果中划分段落；
<h1>.....<h6>：
标题标签，用于展示效果中划分标题；
<ol> </ol>：
有序列表标签，用于在效果中定义一个有序列表
<ul> </ul>：
无序列表标签，用于在效果中定义一个无序列表；
<dl> </dl>：
引起定义列表；
<table></table>：
表格标签，用于在效果中定义一个表格；
<form></form>：
指定所包含控件在表单中起作用。

行内元素：

可以和别的标签共享一行，标签的宽度和高度由内容决定
不能设置宽高，外边距和内边距部分可控制(盒子模型)

常用的行内元素：

<a> </a>：
超链接标签，用于在效果中定义一个可以点击跳转的链接；
<span></span>
行级的块标签，用于在效果中一行上定义一个块，进行内容显示；
</br> ：
换行；
<i>：
指定文本应以斜体渲染，若可用的话；
<em> ：
强调文本，通常以斜体渲染；
<strong> ：
以粗体渲染文本；
<label> ：
为页面上的其它元素指定标签；
<q> ：
分离文本中的引语；
<cite>：
用斜体显示标明引言；
<code>：
指定代码范例；
<var>
定义编程变量。通常以斜体渲染；

行内块级元素：

可以和别的元素共享一行，宽高由内容决定（默认）
可以设置宽高
注意：行内块级元素并排显示的时候，两个行内块级元素之间默认有一个间隔
取消行内块级元素之间的空格：

（1）给行内元素的父元素设置字体大小为0px（行内元素的内容无法显示，行内元素之间的空格也无法显示）
（2）给行内元素设置合理的字体大小（行内元素的内容就能显示了）

常用的行内块状元素：

<img></img> ：
图片标签，用于在页面效果中展示一张图片；
<input></input>：
创建各种表单输入控件。

最后

整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。

《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取

[外链图片转存中…(img-2pb5ePEe-1626855064513)]

[外链图片转存中…(img-DIYKQ3lV-1626855064514)]

CSS的行内样式与内联样式，看这篇就够了相关推荐

深入分析内连接、外连接、左连接、右连接、等值连接、自然连接和自连接之间的区别，看这篇就够了！
多表查询经常用到连接,各种连接之间的区别应该注意总结. 首先大概认识各种连接的关系和由来: 表之间的连接常有以下两种: 一.:在SELECT语句的WHERE子句中使用比较运算符给出连接条件,对表进行连 ...
CSS看这篇就够了（超详细）
CSS(层叠样式表 Cascading Style Sheets) 作用:装饰html 书写位置:写在style中,或者通过link导入外部的样式<link rel="styleshe ...
Android 修改字体样式，看这篇就够了
Android 默认字体为「思源黑体」,英文名:Noto Sans 英文字体:Roboto 字体修改字体步骤: 1.单独设置字体样式 (1)Android系统提供了几种字体样式可供选择通过设置ty ...
vue实现多行数据提交_2020年大厂面试指南 Vue篇
点击蓝字「前端小苑」关注我导读 vue的一些基础知识,以及相关实现原理,一直是面试中比较热门的题目,本文梳理了常见的Vue面试题. 注意:关于底层实现原理,建议最好还是参照源码进行学习,有些原理相 ...
干货来袭！CSS的行内样式与内联样式，看完就会了
什么是行内样式行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式.例如像下面这样的: <p style="font-s ...
CSS的基础概念、行内样式（内嵌样式）、内部样式（内联样式）、外部样式（外联样式）、字体相关属性及相关练习的案例
CSS学习笔记 CSS的基本概念 Cascading Style Sheet层叠样式表标签:<p> <div>-之类的标签使用方式:直接输入标签名类(class):cla ...
css语法，常用css语法，内部样式表，外部样式表，内联样式表, 样式优先级问题
1.css语法: 2.css常用属性: 3.内部样式表: 在head标签中书写style标签,然后在style标签中书写css,style标签具有type属性,属性值为"text/css&q ...
css引入样式-行内样式、内嵌样式和外链样式
css初识及引入样式概念:css通常称为css样式表或层叠样式表作用: - 主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局和外观 ...
【CSS】CSS 层叠样式表 ① ( 简介 | CSS 引入方式 - 内联样式 | 内联样式语法 | 内联样式缺点 )
文章目录一.CSS 层叠样式表二.CSS 引入方式 - 内联样式 1.内联样式语法 2.内联样式缺点 3.内联样式代码示例 ① 核心代码示例 ② 完整代码示例 ③ 执行结果一.CSS 层叠样式表 ...
css实例 css中id/class 详解样式表（外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解）[第一天]
文章目录 css实例 css中的id css中的class 样式表外部样式表内部样式表内联样式 7种基础选择器多重样式优先级错误理解 css实例 CSS 规则由两个主要的部分构成:选择器,以 ...

CSS的行内样式与内联样式，看这篇就够了

块级元素：

行内元素：

行内块级元素：

最后

CSS的行内样式与内联样式，看这篇就够了相关推荐

最新文章

热门文章