divcss盒子模型.docxVIP

1.table布局的缺点显示样式和数据是绑定在一起的布局的灵活度不高一个页面可能有大量 table 元素，造成代码冗余增加带宽搜索引擎不容易搜索到优点：理解比较简单浏览器兼容性相对性好在显示数据方面依旧有大的作为2.div+css 一种比较流行的网页布局技术Div 存放需要显示的数据的容器；（为html文档中的大块内容提供结构和背景的元素）Css （重叠样式表） 指定数据显示的样式3.css核心内容标准流盒子模型浮动定位4.引入csslink rel=”stylesheet” type=”text/css” href=”#.css”/5.span…/span 用于存放小块元素 div…/div 用于存放大的元素6.css滤镜技术 css的内嵌7.css中常用的选择器类选择器（class选择器）id选择器Html元素选择器通配符选择器8.类选择器 .类选择器{属性值1.：属性名;属性值2.：属性名;…}9.id选择器#id选择器名{属性值1：属性名；属性值2：属性名；…}10.html元素选择器某个html元素{属性值：属性名；}超链接案例css文件代码A:link {Color:black;Font-size:24pxText-decoration:none;}A:hover{Color:blue;Font-size:40px;Text-decoration:underline;}A:visited{Color:red;}多段落显示Cssp.cls1{color:blue;font-size:30px;}p.cls2{color:red;font-size:20px;}Htmlp class=”cls1”这是一段内容/pp class=”cls2”这是另一段格式不同的内容/p11.通配符选择器（可以用到所有html 文件中 但是其优先级最低）边距设置*{Margin-top:0px;Margin-left:0px;}Margin的多种设置margin:#px; 上 右 下 左（顺时针旋转）的边距margin:#px #px; 第一个值表示上下边距；第二个表示左右边距；margin:#px #px #px;内外边距清零*{Margin:0px; (内边距)Padding:0px; (外边距)}12.选择器优先级id选择器class选择器html选择器通配符选择器13.父子选择器（多种选择器的组合使用）Html span id=”id1”这是一条span重要/span的信息spanCss#id1{Color:biue;Font-style:bold;Font-size:50px;}#id span{Color:red;Font-style:italic;}1.父子选择器可以为多级2.父子选择器有严格的层级关系3.父子选择器不局限于什么类型的选择器案例：#id span span.s1 #id spanDiv .s1 #id span14.一个元素可以同时用id选择器和class选择器Htmlspan class=”s1” id=”id1”使用多个选择器/spanspan class=”s1”使用一个选择器/spanCss.s1{Color:blue;Font-weight:bold;}#id1{Color:red;Font-style:italic;}15.一个元素最多有一个id选择器，但可以有多个类选择器；当多个类选择器之间发生冲突时，以css文件中最后修改的属性为准。Htmlspan class=”s1”一个class/span span class=”s1 s2”多个class/spanCss.s1{Color:redFont-style:italic;}.s2{Font-weight:bold;}16.我们可以把多个css文件中相同的部分提取出来，可以减少代码的冗余度。Css.ad_1{height:180px;}.ad_2{height:260px;}.ad_1,.ad_2{Background-color: #9933CCWidth:100px; margin:5px 0 0 6px}17.行内元素：span…/span a…/a input type=”##”/ 块元素div…/div p…/p行内元素只占据其所需的宽度，不占一整行；块内元素不管其内容多少，都占据一整行。有一些元素对行内元素不生效，比如：margin，left,right,width,height等，建议尽可能的使用块元素进行定位。（与浏览器的版本和类别有关）18.行内元素和块元素之间的相互转换.s1{Display:block 表示使用块元素显示}.s2{Display:inline; 表示使用行内元素使用}mailto:19.@i