菜单导航
7、背景属性：image、origin、clip、position、size
一、CSS遗漏点
link属性：链接的颜色（如果改成白色什么都看不见）
alink属性：active点击之后的链接的颜色
vlink属性：visited点击之后的颜色
bgcolor属性：背景颜色
word-break:break-all; /* 表示强制换行 */
overflow: auto /* 当内容溢出，显示滚动条 */
@import url(xx.css): 在一个css中，添加对其他css文件的引用
box-sizing: 值content-box (元素的宽高=内容宽高+内边距+边框)；
值border-box (元素的宽高=内容宽高， 即增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度)
二、块级标签、行内标签、块级-行内标签
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>HTML块级标签和行级标签</title> <style type="text/css"> /* HTML标签主要可以分为3大类： 1、块级标签： a、独占一行； b、能随时设置宽度和高度； c、代表标签有div、p、h1-h6、ul、li 2、行内标签（内联标签） a、多个行内标签能同时显示在一行 b、宽度和高度取决于内容的尺寸 c、代表标签有span、a、label 3、行内-块级标签（内联-块级标签）：具有块级标签和行内标签的特点 a、多个行内-块级标签可以显示在同一行 b、能随时设置宽度和高度，代表标签有：input、button CSS中有个display属性，能够修改标签的显示类型： none: 隐藏标签 block: 让标签变成块级标签 inline: 让标签变成行内标签 inline-block: 让标签变成行内-块级标签（内联-块级标签） */ /** 1、块级标签：默认独占一行，宽高可设置 */ .divOne { background-color:yellow; margin-bottom: 5px; } #divIDOne { width: 600px; height: 100px;} #divIDTwo { width: 60%; height: 50px; } /** 2、行内标签：默认多个行内标签显示在一行； 宽高取决于内容的尺寸，不可设置 */ .spanOne { background-color: greenyellow; margin-right: 10px; } #spanIDOne { width: 600px; height: 100px; } /* 发现行内标签设置宽高没有作用 */ /** 3、行内-块级标签：默认多个标签显示在一行；可以设置宽高 */ .block-inlineOne {border: 5px solid red; margin-right: 10px; } #block-inlineIDOne, #block-inlineIDTwo { width: 300px; height: 50px; } /** 4、块级标签设置display=inline后，特性就变成了行内标签一样 */ .divFour { display: inline; background-color: red; font-size: 20px; margin-right: 20px; } #divIDFour { width: 500px; height: 200px; } #divIDFour2 { width: 300px; height: 200px; } /** 5、行内标签设置display=block后，样式特性就和块级标签一样 */ .spanFive { display: block; background-color: yellow; margin-bottom: 5px; } #spanIDFive { width:600px; height: 100px; } #spanIDFive2 { width: 60%; heigh: 100px; } /** 6、块级标签设置display=inline-block: 效果和设置=inline一样，默认多个标签一行，宽高不可设置 */ .divSix { display: inline-block; background-color: greenyellow; margin-right: 10px; } #dividsix { width: 500px; height: 200px; } #dividsix2 { width: 300px; height: 100px; } /** 7、行内标签设置display=inline-block：效果和行内标签一样：不独占一行，宽高可设置 */ .spanSeven { display:inline-block; background-color: yellow; margin-right: 10px; margin-bottom: 5px;} #spanIDSeven { width:600px; height: 100px; } #spanIDSeven2 { width: 60%; heigh: 100px; } </style> </head> <body> <div style="padding:50px;"> <!-- 1、块级标签演示 --> <h3>块级标签：默认独占一行，宽高可设置</h3> <div class="divOne">div标签111, 默认宽高</div> <div class="divOne" id="divIDOne">div标签222， 宽600px, 高100px</div> <div class="divOne" id="divIDTwo">div标签333, 宽60%, 高50px</div> <hr/><br/> <!-- 2、行内标签演示 --> <h3>行内标签：默认多个行内标签显示在一行； 宽高取决于内容的尺寸，自定义设置无效</h3> <span class="spanOne">span11111, 默认宽高</span> <span class="spanOne" id="spanIDOne">span标签222, 设置宽600px, 高100px</span> <hr/><br/> <!-- 3、行内-块级标签 --> <h3>行内-块级标签：默认多个标签显示在一行；可设置宽高</h3> <input class="block-inlineOne" value="文本框111，默认宽高"/> <input class="block-inlineOne" id="block-inlineIDOne" value="文本框222, 宽300px, 高50px"/> <button class="block-inlineOne" id="block-inlineIDTwo">按钮222, 宽300px, 高50px</button> <hr/><br/> <!-- 4、块级标签样式像行内标签一样 --> <h3>块级标签设置display=inline后，样式效果和行内标签一样：<br/>每个标签不再独占一行，且宽高设置不再有效！</h3> <div class="divFour" id="divIDFour">divdiv宽500px 高200px</div> <div class="divFour" id="divIDFour2">divdiv宽300px 高100px</div> <hr/><br/> <!-- 5、行内标签样式特性像块级标签一样 --> <h3>行内标签设置display=block后，样式效果和块级标签一样：<br/>每个标签独占一行，可设置宽高</h3> <span class="spanFive">span标签display属性=block，默认宽高</span> <span class="spanFive" id="spanIDFive">span标签display=block, 宽=600px, 高=100px;</span> <span class="spanFive" id="spanIDFive2">span标签display=block, 宽=60%，高=100px</span> <hr/><br/> <!-- 6、块级标签特性像行内-块级标签一样：不换行可设宽高 --> <h3>块级标签设置display=inline-block，效果和设置inline一样: <br/>每个标签不再独占一行，且宽高设置不再有效</h3> <div class="divSix" id="divIDSix">div宽500px高200px</div> <div class="divSix" id="divIDSix2">div宽300px, 高100px</div> <hr/><br/> <!-- 7、行内标签设置display=inline-block --> <h3>行内标签设置display=inline-block, 效果和行内-块级标签一样：<br/>每个标签不独占一行，但是宽高可自定义设置</h3> <span class="spanSeven">span标签display属性=inline-block，默认宽高</span> <span class="spanSeven" id="spanIDSeven">span标签display=inline-block, 宽=600px, 高=100px;</span> <span class="spanSeven" id="spanIDSeven2">span标签display=inline-block, 宽=60%，高=100px</span> <hr/><br/> </div> </body> </html>