网页布局相关知识点整理-php教程-PHP中文网

网页布局相关知识点整理

php中文网

发布： 2016-07-29 09:07:41

原创

1150人浏览过

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

查看详情

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

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

<code>常用的块状元素有：
<span><<span>div</span>></span>、<span><<span>p</span>></span>、<span><<span>h1</span>></span>...<span><<span>h6</span>></span>、<span><<span>ol</span>></span>、<span><<span>ul</span>></span>、<span><<span>dl</span>></span>、<span><<span>table</span>></span>、<span><<span>address</span>></span>、<span><<span>blockquote</span>></span> 、<span><<span>form</span>></span>
常用的内联元素有：
<span><<span>a</span>></span>、<span><<span>span</span>></span>、<span><<span>br</span>></span>、<span><<span>i</span>></span>、<span><<span>em</span>></span>、<span><<span>strong</span>></span>、<span><<span>label</span>></span>、<span><<span>q</span>></span>、<span><<span>var</span>></span>、<span><<span>cite</span>></span>、<span><<span>code</span>></span>
常用的内联块状元素有：
<span><<span>img</span>></span>、<span><<span>input</span>></span></code>

登录后复制

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadeIn(1700); }); });

以上就介绍了网页布局相关知识点整理，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。