HTML - H5新增元素与CSS基本样式

一、 HTML5新增元素

• 以前用div +class的方式来规划页面格式

    

    

    

        
新闻中心
        
郑重生命
    
    

        

    
    

• 现在可以利用 HTML5 的新元素

    



    
地址

---

二、基本单位

• 长度
  • px：像素
  • em：相对长度单位。相对于当前对象内文本的字体尺寸。比如n em 就是当前对象内文本的font-size的 px 的 n倍
  • rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数，比如：n rem 相对于根类px的 n 倍。

---

三、块级元素和行内元素转换

• 块级元素---->行内元素：style="display:inline;"

我是div

• 行内元素---->块级元素 style="display:block;"

我是span

• 行内元素，但是还需要可以设置宽高，也就是说行内的块如何设置？

display: inline-block;

• display其他应用：隐藏元素

我是span

• 注意：只有块级元素才能设置对应的 宽和高 height、width，行内元素设置之后是没有效果的。

---

四、 文本和字体基本样式

• 字体大小

        font-size: 20px;

• 字体

        font-family: "Comic Sans MS";

• 缩进

        text-indent: 2em;

• 文本对齐方式

        text-align: center;

• 文字样式（斜体）

        font-style: italic;

• 加粗

        font-weight: bold;

• 单词折断换行

        word-wrap:break-word;

• 显示省略号的效果设置

        overflow:hidden;/*超出的隐藏*/
        white-space:nowrap;/*不让换行 直到br*/
        text-overflow:ellipsis;/*...的效果（CSS3） */

---

五、边框背景基本样式

• 设置边框

//或者

.outer{
        border:10px solid burlywood;
        border-radius: 10px;
}
 
  
设置边框合并
 
 
table{
        /*将相邻的边框合并*/
        border-collapse:collapse;
    }
六、表格和列表
 
  
表格
 
 

    

        
小明
        
第一
    
    

        
小王
        
第二
    

• 列表
  • 有序

    
第一
    
第二

- 无序

    
测试1
    
测试2

---

七、IE独有&CSS HACK （每家浏览器都有自己的特点）

CSS HACK可以理解为对应不同的浏览器去进行适配

CSS HACK.png

---