第6章CSS3提高
知识要点（1）掌握后代选择器、子元素选择器等高级选择器的用法（2）理解CSS盒模型，掌握margin、padding和border属性的用法（3）掌握CSS浮动布局（4）掌握CSS定位布局（5）掌握CSS分类、列表和特效属性（6）掌握CSS优先级的计算方法本章目标
（1）CSS3高级选择器后代选择器又称为包含选择器，它可以选择作为某元素后代的元素。1．后代选择器#mainp表示仅main块中的段落（可以是嵌套多层）采用相应的样式#mainp{line-height:2em;}这个行高设置仅适用于所有main块中的p标记符，而不会影响其他块中的p标记符
（1）CSS3高级选择器子元素选择器只能选择作为某元素子元素（也就是嵌套一层的后代）的元素。2．子元素选择器h1strong{color:red;}h1这个标题strong非常/strongstrong非常/strong重要/h1h1这个标题em真的strong非常/strong/em重要/h1
（1）CSS3高级选择器如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。3．相邻兄弟选择器h1+p{margin-top:50px;}选择紧接在h1元素后出现的段落，h1和p元素拥有共同的父元素。divh1标题1/h1p段落文本（此段落应用以上样式）/pp段落文本/p/div
（1）CSS3高级选择器可以用属性选择器对带有指定属性的HTML元素设置样式。4．属性选择器[title]{color:red;}（设置了属性）[title=Web]{border:5pxsolidblue;}（属性值为特定值）[title~=flower]{border:5pxsolidyellow;}（值中包含指定完整单词）应用于：imgsrc=tulip.jpgtitle=tulipflower/但不应用于：imgsrc=tulip.jpgtitle=tulipflower1/
（1）CSS3高级选择器[lang|=en]{color:red;}（以指定值开头，完整单词）应用于：plang=enHello!/pplang=en-usHi!/pplang=en-gbEllo!/p但不应用于：plang=enweirdWeird!/p和plang=endHello!/p[title^=flower]{border:5pxsolidyellow;}（指定值开头）[title$=flower]{border:5pxsolidyellow;}（指定值结尾）[title*=flower]{border:5pxsolidyellow;}（包含指定值）
（2）盒模型1．CSS盒模型
（2）盒模型2．marginmarginmargin-top01margin-right02margin-bottom（常用于实现段间距）03margin-left04margin(toprightbottomleft)05
（2）盒模型3．padding01padding-top02padding-right03padding-bottom04padding-left05padding(toprightbottomleft)注意：padding用于实现文字与边框之间的空白设置。
（2）盒模型4．borderborder包括style、color和width等3个子属性，加上top、right、bottom和left等4个方向，可以构成近10个属性：border、border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-color、border-left、border-left-color、border-left-style、border-left-width、border-right、border-right-color、border-right-style、border-right-width、border-style、border-top、border-top-color、border-top-style、border-top-width以及border-width等注意：border-bottom常用于实现下划线效果。
（3）CSS3布局1．div与span标记符div定义块元素span定义行内元素用id和class进行命名
（3）CSS3布局一种常见的两栏布局用div进行分块
（3）CSS3布局默认文档流浮动布局
（3）C