[HTML+CSS基础]

background-size:cover

适用于背景图片，会将图片平铺

text-align对齐

用法：作用于块级元素上让行内元素对齐或居中
比较典型的应用：

文本的对齐
作用于table标签上
用于图片的对齐

表示强调

em标签：语义：强调。效果：斜体
strong标签：语义：强调。效果：粗体（一般使用这个）

表示引用

q标签：语义：一句话的简短引用。效果：文字被放到双引号内
blockquote标签：语义：长文本引用。效果：文字首尾会添加缩进

span标签

语义：没有语义，如果需要单独对标签添加效果，也可以使用它

br换行标签

语义：换行

语法：xhtml 1.0中使用〈br /〉（推荐使用）

html4.01中使用

注意：在html中输入换行、空格都是没有用的，需要添加标签实现效果

空格

语法：

添加代码

添加一行代码使用：code标签
添加多行代码使用：pre标签

table标签

语义：用于创建表格
包含的标签：table、tbody、tr、th、td

<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
tr标签：用于创建表头，默认样式：粗体并且居中
th标签：用于创建表头中的单元格
tr标签：表示一行
td标签：表示表中内容的一个单元格
为表格添加摘要，如：
```
<table summary="这是摘要"></table>
```

摘要在浏览器中是不会显示的，只便于搜索引擎搜索到

为表格添加表头，如：
<caption>这是表头</caption>

class与id选择器

class选择器可以使用词列表，也就是可以指定多个类名，而id选择器则不可以，如：
〈span class=“stress bless”〉可以使用词列表〈/span〉
上面的是正确的
〈span id=“stress bless”〉不可以使用词列表〈/span〉不可以这么写，id只能指定一个

样式优先级

优先级排列：浏览器默认样式 < 网页制作者的样式 < 用户自定义的样式；
注意：如果样式这只了"!important"，那么它的优先级高于用于自定义的样式

段落中的文字设置

文字上面的删除线： p{text-decoration: line-through;}
两个字母之间的间距：p{letter-spacing: 20px;}
两个单词之间的间距：p{word-spacing: 20px;}
块状元素的排列：
左对齐： p{text-align: left;}
右对齐： p{text-align: right;}
居中： p{text-align: center;}

元素分类

块级元素

包括：
<div>, <p>,<h1>~<h6>, <input>, <ul>,<ol>,
<dl>,<table>,<address>,<blockquote>,<form>等

内联元素

包括：
<a>,<i>,<span>,<em>,<strong>,<label>,
<br>,<q>,<code>,<cite>,<var>等

块级内联元素

<img>, <input>等

为什么这么分类？这三种元素的区别？
块级元素的width、height、margin和padding有效
内联元素的width、height、margin(top和bottom)和padding(top和bottom)不能设置，但是margin-right、margin-left、padding-right和padding-left是可以设置的

块级元素特点

每个块级元素独占一行，并且其后的元素也另起一行
元素的高度、宽度、行高、顶边距和底边距可以设置
元素宽度在不设置的情况下是父元素的100％

内联元素特点

和其他元素在一行上
高度、宽度、行高、底边距和顶边距不可设置
宽度=内容宽度
注意：如果两个内联元素之间用空格或者换行隔开，则它们之间会有一个间隙

内联块状元素特点

和其他元素在一行上
宽度、高度、行高、底边距和顶边距可以设置

网页布局的基本模型

布局模型和盒模型，布局模型是建立在盒模型之上的

CSS包含三种布局模型：Flow，Float，Layer；
在网页中，元素有三种模型：

流动模型（Flow）
浮动模型（Float）
层模型（Layer）

流动模型

流动模型是默认的网页布局模式，其中网页元素默认按流动模式布局
特点有二：

块级元素都会在所处的包含元素内自上而下的垂直延伸分布，默认情况下块级元素宽度为100%，也就是占用一行宽度
内联元素都会在所处的包含元素内从左到右水平分布

浮动模型

使用float实现
块级元素独占一行，可以通过设置它的宽度，然后设置float，使两个块级元素排列在一行

层模型

三种形式：

绝对定位：（position：absolute）
相对定位：（position：relative）
固定定位：（position: fixed）

绝对定位

positon: absolute

作用：

将元素从文档流中脱离出来
然后使用top、bottom、left、right等属性相对于其最接近的具有定位属性(relative属性)的父元素进行绝对定位，如果没有父元素存在定位属性，则相对于html元素进行定位，也就是浏览器窗口

长度单位

主要分三种：px, em, %

em
就是本元素给定字体的font-size。如下：
p{font-size：12px; text-indent：2em;}
这里实现的首行缩进就是2*12px=24px
**注意：当本元素设置的font-size为em，那么它是以父元素的font-size为依据的

水平居中

分两种情况：行内元素和块级元素
块级元素又分为定宽块级元素和不定宽块级元素

行内元素

如果需要句中的为文本或图片，则可以设置它的父元素text-align：center来实现

块状元素

块状元素的居中分为两种：定宽块状元素和不定宽块状元素，使用text-align：center设置不起作用

定宽块状元素

先需要设置width属性，然后使用margin：0 auto进行设置

不定宽块状元素

三种方法实现：

图片发自简书App

注意：针对第一种方法的解释，比较简洁的实现方法是.wrap{display：table; margin：0 auto;}（这里假设要居中的标签类名为wrap）

不定宽块状元素方法二

第一：设置需要水平居中的父元素为：text-align: center;
第二：设置需要水平居中的元素为：display: inline;

不定宽块状元素方法三

第一：设置父元素position: relative; left: 50%; 此时父元素的左外边界=屏幕中心线
第二：设置父元素float；父元素的宽度=子元素的宽度
第三：设置居中元素position: relative; left: -50%; 相对于父元素向左偏移50%，因为父元素的宽度=子元素的宽度，因此就是相对于自己的宽度向左偏移50%；也就实现居中了
注意：如果设置了float，那么就会生成块级框，导致父元素的宽度=子元素的宽度，如果没有设置float，那么它的宽度为屏幕的宽度（假如父元素的父元素为html）；

垂直居中

垂直居中分为两种情况：父元素高度确定的单行文本 和 父元素高度确定的多行文本

父元素高度确定的单行文本

设置父元素的height(高度)和line-height（行间距）一致

父元素高度确定的多行文本

方法一：

给需要居中的标签添加：
<table><tbody><tr><td>
这里添加需要居中的标签
</table></tbody></tr></td>
同时，设置 vertical-align：middle。

html代码：

<body>
<table><tbody><tr><td class="wrap">
<div>
     <p>看我是否可以居中。</p>
     <p>看我是否可以居中。</p>
      <p>看我是否可以居中。</p> 
</div>
</td></tr></tbody></table>
</body>

css代码：

table td{height:500px;background:#ccc}

因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。

方法二：

对父元素添加：

display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、