HTML+CSS(7)

网页的布局思想：

1.清除标记原有的margin，padding------页面初始化。

*{margin:0;padding:0;}

清除所有的html标签的格式，后期如果使用，再重新设置。

Body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,I,b,a….{margin:0;padding:0;   }

2.设置页面整体风格的一些属性-----页面初始化

比如字体大小、字体类别、文字颜色、网页背景色，等等。。。。。

body{背景颜色//背景图片  文本的大小 文本的颜色  文本的字体 行间距}

body{
font-size:14px; 
font-family:宋体; 
color:#000000; 
background-color: #e2e2e2;  
line-height:150%;
}

3. 把整个页面划分结构：

display和overflow属性 ：  

行内元素：输入完标签之后，不是自己占一行,行内元素的宽度和高度是由内容来决定，宽度和高度width height 不能用 。

css样式是display:inline;

如：span  b   I   u  strong   a 

块元素 ：输入完标签之后，自己独占一行,可以设置宽度和高度，width和 height 

css样式 display :block;

div  p  table ul li ol  dl dt dd h1….

块—转换---行内  Display:inline;

行内—转换---块  Display:block;

overflow：当内容溢出，如何显示

hidden：隐藏

auto：如果盒子装不下，就会出现滚动条

scroll：无论是否能装下都有滚动条边框

继承：外层元素的样式，会被里面的元素所继承。

哪些标签可以继承？

文本的属性的可以继承 font-size   font-family  font-weight  font-style:italic ; text-decoration:none/underline; color:red;

注意：自己有的属性，不向外继承，不会继承祖先元素的属性。

优先级：

单个选择器的优先级：

标签选择器  <类选择器 < id选择器 <行内样式表

        标签选择器  类选择器  id选择器      

比喻           1             10           100

复合选择器优先级：

Li  -------1

.box ul li{  } ----12

.box .one .two ul li{  }  ----32

#myid ul li{  }----102

写的越精确，优先级越高

盒子的深入--盒子宽度和高度的计算方法：

最外面蓝色的盒子内容区的宽度为1000px，width=1000

红盒子width=500，border=2px  padding:5px;  margin:10px;   

红盒子总的宽度是   =内容区的宽度+边框的宽度+padding+margin（左右）=534px

黑盒子width=400 ，border=2  padding=10px ：margin：10px；

400+2+2+10+10+10+10=444px

蓝盒子width>=红盒子+黑盒子

注意：里面所有的值加到一起一定不能大于父盒子的内容区的宽度width

总的宽度=内容区的宽度width+border(左右)+padding（左右）+margin(左右)

如果是上面的结构，正常的文档流，设置margin，如果有叠加取叠加部分的最大值 40

如果设置了浮动，不是正常的文档流，要把所有的margin值相加，之间的距离是10+40=50px

清除浮动：

clear:left;

clear:right;

clear:both; /*清除左浮动，右清除右浮动*/

div里面还有<div >(外面的div父盒子>)div父盒子没有设置固定高，里面设置了浮动，父元素受影响，无法正常的计算，如何让父元素得到一个自然高？

1.在父盒子里面的最下方加<div>给该div设置清除浮动的属性clear:both;

2.浏览器的一个bug  ----在父元素的样式中加overflow:hidden;可以让父元素得到一个自然高，不受浮动的影响。

定位：

position:定位方式有：static默认  fixed 固定  relative 相对定位  absolute 绝对定位

默认：如果你不设置就是static

坐标：偏离目标元素多远的距离

坐标的属性：left:数值；right:数值；top:数值；bottom：数值；

fixed 固定定位：

相对于浏览器窗口来进行的定位；

如果不设置定位坐标，就在原来的位置；

层级要被普通标签高；

如果结合定位坐标，就是相对于目标位置的距离；

设置固定定位之后，一定是块元素。

relative相对定位：

相对定位占空间；

如果不结合定位坐标，就是在原来的位置；

如果结合定位坐标，相对【自身】，作为参考点；

层级要高于普通的元素。

绝对定位(absolute)：

设置绝对定位，不占空间；

设置层级高于普通的元素；

不结合定位坐标，就是在原来的位置；

绝对定位如果定位坐标，以祖先元素（设置绝对定位，相对定位）作为坐标的参考点；

如果祖先没有设置定位，一直往上找，直到找到body,就以body来进行定位，相对于整个窗口来进行定位。

background-position属性：

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

position属性：

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。