1. 什麽是元素显示模式
元素显示模式就是元素(标签)以什麽方式进行显示
作用 : 网页的标签非常多,了解他们的特点可以更方便的布局网页
ex : <div>
自己占一行,<span>
一行可以放多个
2.元素显示模式的分类
HTML元素一般分为块元素和行内元素
块元素:
常见的块元素有<h1>~<h6>. <p>. <div> . <ul> <ol> <li>
等
其中<div>
为最典型的块元素
**特点 : **
a. 自己独占一行
b. 高度、宽度、外边距以及内边距都可以控制
c. 宽度默认是容器(父级宽度)的100%
d. 是一个容器及盒子,里面可以放行内或块级元素
注意 :
文字类的元素内不能使用块级元素
<p>
标签主要用於存放文字,因此<p>
里不能放块级元素 特别是不能放<div>
同理<h1>~<h6>
里面也不能放其他块级元素
行内元素:
常见的行内元素有<a> <strong> <b> <em> <i> <del> <span>
等等
其中<span>
为最典型的行内元素
特点 :
a. 相邻行内元素在一行上,一行可显示多个
b. 高、宽直接设置是无效的
c. 默认宽度就是本身内容的宽度
d. 行内元素只可容纳文本或其他行内元素
注意:
连接里面不可再放连接
特殊情况连结<a>
内可以放块级元素,但要给<a>
转换块级模式最安全
**行内块元素 : **
<img>、<input >、<td>
等同时具有块元素和行内元素的特点
所以称之为行内块元素
特点 :
a. 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
b. 默认宽度就是他本身内容的宽度(行内元素特点)
c. 高度 行高 外边距 以及内边距都可以控制(块元素特点)
3.元素显示模式的转换
特殊情况下需要进行元素模式的转换
简单理解 : 一个模式的元素需要另外一种模式的特性
EX : 想要增加连接<a>
的触发范围
转换为块元素: display:block;
转换为行内元素: display:inline;
转换为行内块元素: display:inline-block;
<<: [Day 07 - RWD] 跨平台生存之道 — RWD响应式网页设计
>>: Swift 新手-App Launch Screen 设计观念
元件介绍 Dropdown 是一个下拉选单元件,当页面上的选项过多时,可以用这个元件来收纳选项,透过...
DAY6 MongoDB 资料新增(Insert) 与删除(Delete) 连线 连线方法如同前面文...
前言 有一次在串接合作厂商的 API 时,需要把他原本取 token 的 javascript 改写...
一般而言,要安装 Linux,又要保留原本的系统,就得再先了解一下硬碟分割,通常都会以 GRUB ...
今天即将进入 Caching & Networking 章节的第一天,快取,是一个非常重要...