• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > HTML行元素和块元素

HTML行元素和块元素

作者:董硕的博客,梦想起航的地方 字体:[增加 减小] 来源:互联网 时间:2017-08-26

本文主要包含css,html等相关知识,董硕的博客,梦想起航的地方希望在学习及工作中可以帮助到您

一.两种类型

HTML中的大部分元素都可分为两种类型:块级元素和行级元素。这些元素的类型是通过文档类型定义(DTD)来指明。块级元素会从新的一行出现,行 级元素则不会。块级元素的前后都会有插入的断行,所以如果不用CSS则没法让两个块级元素并列在一起。

 

二.块级元素

块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如<form>只能包含块级元素。其他的块级元素则可以包含 行级元素如<P>.也有一些则既可以包含块级,也可以包含行级元素。如,<div>,<li>

三.行级元素

行级元素一般是包含语义意义的元素。行级元素一般只能包含文字或其他行级元素。行级元素不能被应用下列属性:

width

height

max-width

max-height

min-width

min-height

如果你想改变这些属性,应该应用给它的属于块级元素的父元素。

四.Spring Brother

有些元素既可以是块级元素,也能成为行级元素。例如<ins> 和<del>。当这两个元素直接出现在<body>中时,它们就是块级元素。如果作为<P>的子元素,他们就是行级 元素,此时不能包含其他的块级元素。

五.CSS中的类型

CSS中的盒子也有块级和行级之分,也包括其他类型,如,列表和表格等。HTML中的块级元素会产生块级盒子,行级元素会产生行级盒子。在CSS 中,可以用display控制盒子的类型。如,把一个行级元素转换成块级元素。注意,这种转换并不能改变元素本质。即使你把它转换成了 块级元素,你也不能让它包含其他的块级元素,你转换的只是CSS的盒子的外观。

通常没有必要改变元素的盒子类型,下列情况一般有改变盒子的需求:

水平的列表菜单

不断行的标题

隐藏元素

六.盒子类型的变化

对于应用了浮动或绝对定位的元素,如此类样式:float:left,position:absolute,position:fixed。这类元 素的盒子类型显然改变了。它们都变成了块级元素,因此display属性一般都被忽略。

七.盒子的消失

如果对元素应用display:none,它(包括它的子元素)将会被隐藏起来。对它应用的float,position属性也不再有意义。因为它将不会产生任何的盒子。


1 ... -1 -1 -1 -1 -1 -1 -1 ... -1 下一页

您可能想查找下面的文章:

  • html、css和js注释规范用法小结
  • HTML+CSS项目开发经验总结(推荐)
  • CSS3文本阴影text-shadow属性详解
  • html/css基础篇——html代码编写过程中的几个警惕点(必看)
  • 简单html以及css的用法详解
  • HTML基础知识——css样式表,样式属性,格式与布局详解
  • HTML基础必看——全面了解css样式表
  • Html/Css(新手入门第一篇必看攻略)
  • 全面了解html.css溢出
  • HTML (css样式规范)必看篇

相关文章

  • 2017-08-05XHTML CSS网站设计的优势和问题
  • 2017-08-05使用css美化html表单控件详细示例(表单美化)
  • 2017-08-05select不支持双击dbclick事件
  • 2017-08-05了解html页面的渲染过程以备学习前端的性能优化
  • 2017-08-05让IE8启动IE7兼容模式的代码
  • 2017-08-05HTML网页制作教程 谨慎使用iframe标记
  • 2017-08-05html中br和br/的区别介绍
  • 2017-08-21利用微软在线预览链接展示office相关文档内容
  • 2017-08-05HTML的checkbox和radio样式美化的简单实例
  • 2017-08-05html 表格比较宽溢出的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 浅谈html标题,段落,换行,水平线,特殊字符
    • 清空select标签中option选项的3种不同方式
    • html 块级标签与内联标签的区别
    • HTML超出文本多行截取实现原理及代码
    • html H标题标签的用法
    • HTML中禁用表单控件的两种方法readonly与disabled
    • HTML4.0元素默认样式整理
    • frameset(划分框窗)常用属性整理
    • flash嵌入html 在html网页代码中嵌入Flash文件的解决方案(下)
    • 简单html以及css的用法详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有