CSS内联与块

块元素

常见的块元素有div,p,h1,h2,h3……块元素就是会独占一行的元素，无论他的内容有多少他都会独占一整行

如下面所示，哪怕div宽度不够，但还是占用了一整行

内联元素

常见的内联元素有a,img,iframe,span……

内联元素不会占用一整行，他只会占用他自己元素大小的空间

块元素主要用来制作页面中的布局，内联元素主要用来选中文本设置样式

a元素可以包含除了他本身以外的任意元素

<a href="#"><div style="background-color: red;width: 200px;">块元素</div></a>

如图，被a包含的整个div都变成了一个链接。

p元素不能包含任何其他块元素

 

将样式直接编写到style属性中，这种样式我们成为内联样式，内联样式只对当前的元素中的内容起作用，内联样式不方便复用，内联样式属于结构与表现的耦合，不方便后期的维护，不推荐使用。还有style标签内部样式表，以及通过link标签引入的外部CSS文件，这样外部文件中的CSS样式表将会应用到当前页面中。

<link rel="stylesheet" type="text/css" href="外部样式表的路径"/>

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或者间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或者间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素