[HTML+CSS基础]

background-size:cover

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

text-align对齐

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

1. 文本的对齐
2. 作用于table标签上
3. 用于图片的对齐

表示强调

1. em标签：语义：强调。效果：斜体

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

表示引用

1. q标签：语义：一句话的简短引用。效果：文字被放到双引号内

2. blockquote标签：语义：长文本引用。效果：文字首尾会添加缩进

span标签

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

br换行标签

语义：换行

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

html4.01中使用

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

空格

语法：

添加代码

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

table标签

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

• …：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

• tr标签：用于创建表头，默认样式：粗体并且居中

• th标签：用于创建表头中的单元格

• tr标签：表示一行

• td标签：表示表中内容的一个单元格

• 为表格添加摘要，如：

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

• 为表格添加表头，如：
  这是表头

class与id选择器

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

样式优先级

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

段落中的文字设置

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

元素分类

1. 块级元素

包括：
, 
,
~
, , 
,
,
,,
,
,
等
 
 
 
  
内联元素
 
 
 
 
包括：
,,,,,,

,,,,等
 
 
 
  
块级内联元素
 
 
 
 
, 等
 
 
为什么这么分类？这三种元素的区别？
 块级元素的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 
  
 
 
 
 
 
  
 
   
  
   
 
  
 
  

    图片发自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（行间距）一致
 
 
父元素高度确定的多行文本
 
 
方法一：
 
 
给需要居中的标签添加：
 

 这里添加需要居中的标签
 

 同时，设置 vertical-align：middle。
 
 
html代码：
 
 



     
看我是否可以居中。
     
看我是否可以居中。
      
看我是否可以居中。
 



 
 
css代码：
 
 
table td{height:500px;background:#ccc}
 
 
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
 
 
方法二：
 
 
对父元素添加：
 
 
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、
 
 
html代码：
 
 

    

        
看我是否可以居中。
        
看我是否可以居中。
        
看我是否可以居中。
    

 
 
css代码：
 
 

 
 
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质
 
 
隐性改变display类型
 
 
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
 
 
 
  
position : absolute
 
  
float : left 或 float:right
 
 
 
 
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block块状元素的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
 
 
如下面的代码，小伙伴们都知道 a 标签是 行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
 
 
 进入课程请单击这里
 
 
css代码
 
 

 
 
想不起 display:inline-block 是做什么的小伙伴们，单击“元素分类--内联块状元素”可返回到前面小节进行复习。