CSS盒模型

2021-06-19 18:04

阅读：373

标签：res play 底部 des desc 包含 css布局 esc isp

1.元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：

、

...

、

、、、

、

常用的内联元素有：

、、
、、、、、、、、

常用的内联块状元素有：

、

　　1.1 块级元素
　　　　什么是块级元素？在html中
、
、

、
、
和
就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块　　　　状元素，从而使a元素具有块状元素特点。
　　　　a{display:block;}
　　　　块级元素特点：

　　　　　　（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。

　　　　　　（2）元素的高度、宽度、行高以及顶和底边距都可设置。

　　　　　　（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

　　1.2 联元素
　　　　在html中，、、、和就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联　　　　元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
　　　　 div{
　　　　     display:inline;
　　　　 }

　　　　......

　　　　我要变成内联元素
　　　　内联元素特点：

　　　　　　（1）和其他元素都在一行上；

　　　　　　（2）元素的高度、宽度及顶部和底部边距不可设置；

　　　　　　（3）元素的宽度就是它包含的文字或图片的宽度，不可改变。

　　1.3 内联块状元素

　　　　内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签　　　　就是这种内联块状标签。

　　　　inline-block 元素特点：

　　　　　　（1）和其他元素都在一行上；

　　　　　　（2）元素的高度、宽度、行高以及顶和底边距都可设置。
CSS盒模型

标签：res play 底部 des desc 包含 css布局 esc isp

原文地址：http://www.cnblogs.com/dorra/p/7191665.html

上一篇：linux 安装nginx和php

下一篇：PHP面向对象 – 封装

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：CSS盒模型
文章链接：http://soscw.com/index.php/essay/96060.html

亲，登录后才可以留言！

CSS盒模型

1.元素分类

...

1.1 块级元素

、

1.2 联元素

1.3 内联块状元素

评论

热门文章

推荐文章

最新文章

置顶文章