CSS(二)标签显示模式

标签显示模式

一)块级元素(block-level)

每个块级元素都会独自占一行或者多行,可以对其设置宽度(默认是容器的100%)、高度及对齐等,

可以容纳内联元素或者其他块元素(p、h1不要包裹其他块级元素)。

典型的又:div、table、ul、p、h1等。

二)内联元素(inline-level)

内联元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度(默认为本身内容的宽度)、高度、对齐等属性,

但水平方向上的padding和margin可以设置,只能放文本和其他行内元素(a除外)。

典型的有:span、strong、em等。

三)行内块元素(inline-block)

属于行内元素的特殊标签---img、input、td,可以对它们设置宽高和对齐属性。

四)标签显示模式的转换(display)

1.块转行内: display:inline

2.行内转块: display:block

3.转换为行内块: display:inline-block

在设置样式的时候行内元素,行内块元素可以当作文本来看(可以设置text-align该变其位置),块级元素不行。

原文地址:https://www.cnblogs.com/Shadowplay/p/10994732.html

时间: 2024-10-17 17:15:00

CSS(二)标签显示模式的相关文章

CSS 标签显示模式

标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 一.块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建. 常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中 <div> 标签是最典型的块元素. 特点:(重要) 1.独占父亲一行,宽

CSS常用标签-手打抄录-感谢原未知博主-拜谢了

CSS常用标签 CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ font-style:itelic; /*文字斜体*/ font-variant:small-caps; /*小字体*/ letter-spacing : 1pt; /*字间距离*/ line-height : 200%; /*设置行高*/ font-weight:b

CSS重置标签默认样式

CSS重置标签默认样式:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在默认情况下,很多标签都有自带的属性,例如body自带有margin.ul有自带的padding.h1-h6的字体大小各部相同.li前面带有的小圆圈等等.这些自带的默认属性会给实际的布局中带来不少的麻烦,我们可以再样式表的开始就重置这些默认的属性.实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

项目期复习总结:Table, DIV+CSS,标签嵌套规则

目录: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的区别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比如数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较常用  ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,tab

CSS二之调节样式

CSS二之调节样式 一.补充 选择器优先级补充 mycss1.css /*p {*/ /* color: green;*/ /*}*/ #d1 { color: red; } 选择器优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <style>

实用掌中宝--HTML&amp;CSS常用标签速查手册 PDF扫描版

实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别讲解了CSS基础知识.CSS控制各种元素显示的方法以及CSS布局页面的技巧等知识.为了使读者能尽快熟悉各种应用的具体方法,本书对所讲解的每个元素和属性都尽可能用简单直观的方法做了实例演示. 本书适合广大Web网站设计人员.网站设计的初学者.网站管理维护人员.大专院校学生和社会培训学员阅读,也可作为开发人员的

项目期复习总结2:Table, DIV+CSS,标签嵌套规则

文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比方数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较经常使用  ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,

css常用标签及属性

css样式表常用的形式有三种,一.行内样式表.二.内部样式表.三.外部样式表 一. <p style="color:red;">nice to meet you</p> 二. 在head中写入 <style type="text/css"> p{ color:red; } .myclass{ color:blue; font-size:2em; } #idname{ color:red; } </style> 三.外部

Css的标签选择器和文本属性样式记录

---恢复内容开始--- 自己的一些简单记录,大概看下,然后对照着W3C都模拟一次. 最近我会把每个例子的属性的注释写完整和例子都会重新贴出来. /** *浏览器私有属性 * -webkit:chrome,safari * -moz: firefox * -ms:IE * -o:opera *  * @规则: * @media:响应式布局 * @keyframes:css动画 * @font-face:引入外部字体 * ... * 选择器: * 一.简单选择器(可以组合) * 标签选择器: *