前端学习笔记-1：块级元素与行内元素

当浏览器渲染html文档时，从顶部开始渲染，为元素分配所需要的空间，每一个块级元素单独占一行，行内元素则按照顺序被水平渲染直到在当前行遇到了边界，然后换到下一行的起点继续渲染。

块级元素与行内元素

1. 常用的块级元素

常用的块级元素有如下元素：<from>,<h1>-<h6>,<header>,<hr>,<ul>,<ol>,<p>,<section>,<div>,<table>,<pre>

块级元素具有以下特点：

1.每个块级元素默认情况下都是独自占一行
2.元素的高度，宽度，行高和边距都是可以设置的
3.元素的宽度如果不设置的话，默认为父元素的宽度
4.块级元素可以包含行内元素和其他块级元素

上述特点中第3如下：

2. 常用的行内元素

常用的块级元素有如下元素：<span>,<img>,<select>,<i>,<small>,<br>,<strong>

行内元素具有以下特点：

1.每一个行内元素可以和别的行内元素共享一行，相邻的行内元素会排列在同一行里，直到一行排不了了，才会换行。
2.行内元素设置width，height无效，宽度随着元素内容而变化
3.行内水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top,padding-bottom都不会产生边距效果
4.一般情况下，行内元素只能包含数据和其他行内元素

上述特点中第3如下：


这样是不是很好地解释了第3个特点中说padding-top，padding-bottom不会产生边距效果