CSS的基础学习4 -页面呈现

这段时间我主要看的是《CSS权威指南》且自己边学边查阅了一些资料,终于稍微理清了自己的css知识框架。如今已经知道css要与html结合,就是通过以上所说的选择器,选择器最重要的就是级别。下一步,就是网页是如何呈现出来的了。

页面呈现可以分为两类:1 文字;2 块

  1. 文字包括设置字体、字号、样式、颜色、对齐方式等
  2. 而块就大概包括:普通流、盒子模型、浮动、定位position、显示display等

首先需要知道的就是在css中,html标签元素要分为块级元素、行内元素、内联块状元素。

  • 块级元素 display:block

    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

  • 行内元素 display:inline

    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

  • 内联块状元素 display:inline-block

    <img>、<input><button>

以上是浏览器默认的元素是行内还是块级元素,顾名思义行内元素就是在网页文本中在一行中挨着排下去,而块级元素就相当于一个大块头老大,一个人独占一行。内联块级元素虽然块头很大,但内心跟行内元素是一样的愿意在一行中与大家一起挤着。当然我们就可以通过设置display属性来改变元素所在的位置了。

且块级元素宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制,而行内元素不行。