网页制作之css行内元素、块元素

  • 时间:2018-11-13 23:29 作者:小牛试讲 来源:小牛试讲 阅读:516
  • 扫一扫,手机访问
摘要:视频加载中...得出区别的方法: 1. 写两个div,两个span 2. 分别对div 与span 设置背景看效果 3. 分别设置宽度看效果 4. 加margin看效果1).区别页面中元素一般分为两种:块级元素,行内元素(内联元素),既然分为两种元素,那么他们之间必然有区别: A. 块级元素总是独自

视频加载中...

得出区别的方法:

1. 写两个div,两个span

2. 分别对div 与span 设置背景看效果

3. 分别设置宽度看效果

4. 加margin看效果

1).区别

页面中元素一般分为两种:块级元素,行内元素(内联元素),既然分为两种元素,那么他们之间必然有区别:

A. 块级元素总是独自占一行,前面和后面就如同有个换行符,内联元素总是和其它的内联兄弟占一行

B. 块级元素可以设置宽和高度值,内联元素就不行了,他们的宽和高总是随着自身的内容自动扩大和缩小

C. 块级元素的margin和padding都正常,内联元素左右margin和左右padding正常,上下不正常不识别,也就是说不能通过margin-top和padding-top来改变行高

D. 网页布局时,块级元素可包含内联元素和其它块级元素;而内联元素只可包含内联元素和文本等,不可包含块级元素。我们可以了解为内容标记和结构标记。

2)、常用的块级元素和行内元素有:

块级元素:h1至h6,div p ul dl dt dd form table等

行内元素:strong em span b I a img input等

3)、相互转化

想让自己独占一行就用块级元素(div,dl,dt,dd,ul,li...),想让元素和其它元素在一行就用行内元素(span,a,img)。

他们之间可以通过样式来转换:

display:block;

display:inline;

display:inline-block;

将对象呈递为内联元素,与其它的元素同处一行,但是内部又呈现出块级元素,也就是可以设置宽度和高度,打破了块级元素和内联元素的区别。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部