布局、div入门

块级元素和行内元素

块级元素：占据其父元素（容器）的整个空间，代码如下：




    
    
    
    Document



    
    This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.

行内元素:一个挨着一个展示，换行表示空格，代码如下：




    google 1
    google 2
    <span>
        
    google 3
    <span>
    google 4<span>

display属性

display: block; /* 行内元素转块级元素 */
width: 200px;/* 设置块级元素宽度 */
height: 20px;/* 设置块级元素高度 */

display: list-item;/* 去掉列表前面的点 */

display: inline-block;/* 水平布局，中间有空白（空白与字体大小和浏览器有关） */
width: 90px;

只有块级元素能设宽高

盒模型

给元素加边框:勾选border

1.png

2.png

margin: 300px;  /* 外边距：边框距离外部容器的距离 */
padding: 50px; /* 内边距 */
border: 20px;/* 边框*/

外边距合并：其大小取其中的最大值
设置盒子宽度

box-sizing: border-box;/* 设置内容宽度 */
box-sizing: content-box;/* 设置盒子宽度 */

显示< >符号:<标签>

<p>
 /*  */

在HTML中多输出空格：

google 3     <span>

预格式化文本(pre标签):只具有全局属性

cols /* 定义每行的最大字符数。这是一个非标准的属性，作用与`[width](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/pre#attr-width)`相同。要实现这样的效果，应该使用CSS。 */
width /* 包含每行的最大字符数。虽然在技术上仍被实现，但这个属性没有视觉效果。要实现这样的效果，应该使用CSS。 */
wrap /* 提示溢出怎样发生。在现代浏览器中，这个提示会被忽略，且被没有视觉效果。要实现这样的效果，应该使用CSS。 */

body {
  color:red;
}

em标签：标记出需要用户着重阅读的内容

此元素只包括全局属性
元素通常被用于指示一个隐式或显式的对比。

In HTML 5, what was previously called block-level content is now called flow content.

vs.
在默认情况下，视觉效果是一样的- 这两个标签都把内容呈现为斜体. 但语义是不同的。标签表示着重强调其内容，而 标签表示从正常的散文中区分出的文本, 如电影或书籍的名字，一个外来词, 或者当文本指的是一个字的定义，而不是其自身代表的语义。