css基础-网页的布局思想、行内元素转换为块元素、内容溢出的处理、div盒子的定位

清除格式：

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

*{margin:0;padding:0;    }

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

网页的布局思想

1. 清除格式

2. 设置页面属性设置 body{  }

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

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

3. 把整个页面划分结构

 

行内元素和块元素   

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

宽度和高度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;

  

 

Body中的代码

 

 

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

 

盒子定位

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

   默认 如果你不设置就是static

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

坐标的属性：

  Left:数值；

  Right:数值;

  Top:数值；

  Bottom：数值；

 Fixed 固定定位

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

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

l 层级要被普通标签高

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

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

 

 

Relative相对定位

l 相对定位占空间

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

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

l 层级要高于普通的元素

 

 

绝对定位(absolute)

   设置绝对定位，不占空间

   设置层级高于普通的元素

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

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

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

 

如有问题请多多指教！希望给您带来帮助！祝您生活愉快。