CSS-盒子的用法

清除格式
清楚所有的html标签的格式，后期如果使用，再重新设置
*{margin:0; padding:0;}
body,table,p,ul,li,h1,h2,h3,h4,h5…{
margin:0; padding:0;}
网页的布局思想

1. 清楚格式
2. 设置页面属性-body{背景颜色/背景图片、文本的大小、字体、颜色 行间距}
3. 把整个页面划分结构
4. 行内元素和块元素
   行内元素：属于完标签之后，不是自己独占一行，行内元素的宽度和高度是由内容决定，宽度和高度width height 不能用 ------css样式是display:inline;
   span b i u strong a
   块元素：输入完标签之后自己独占一行,可以设置宽度和高度 css样式 display:block;
   br p div li table ul ol dl dt dd h1…
   块-转换-行内 :display:inline;
   行内-转换-块:display:block;
   
   内容溢出如何处理overflow
   当内容溢出，如何显示
   hidden;隐藏
   auto；如果盒子装不下，就会出现滚动条
   scroll; 无论是否装下都有滚动条

继承
外层元素的样式会被里面的元素所继承，
那些标签可以继承
文本属性都可以继承 font-size font-family font-style:italic text-decoration:none/underline; color:red;
自己有的属性 不向外继承
优先级
标签选择器 < 类选择器< id选择器<行内样式表
比喻1------------10----------100----------

li----------------1
.box ul li{} -----12
.box .one .two ul li{} -----32
#myid ul li{}------------102
写的越精确，优先级越高

• 重点
  因为有的盒子的内容是不限制的，那么主盒子的不能设置高度利用clear:both; 清楚左右浮动
  clear:left;清除左浮动
  clear:right;清除右浮动
  div里面还有div 外面的div叫做父盒子 如果这个父盒子没有设定固定高，里面设置了浮动 父元素受影响 无法正常的计算 如何让父元素得到一个自然高
  在父盒子里面的最下方加一个div 给该div设置清楚浮动的属性 clear:both
  浏览器的一个bug------在父盒子里添加overflow:hidden;
  让父盒子得到一个自然高
  
  清楚浮动
  clear:left
  clear:right
  clear:both 清除左右浮动
  定位
  position :定位方式:static 默认 fixed固定 relative相对定位 absolute绝对定位
  坐标：偏离目标元素多远的距离
  坐标的属性：left:数值 right：数值 top:数值 bottom:数值
  fixed 固定定位
• 相对于浏览器窗口进行的定位
• 如果不设置定位坐标，就在原来的位置
• 层级要比普通标签高
• 设置固定定位之后，一定是块元素
  relative相对定位
• 相对定位占空间
• 如果不结合定位坐标就是在原来的位置
• 如果结合定位坐标，相对于【自身】，作为参考点
• 层级高于普通元素
  absolute绝对定位
• 设置绝对定位，不站空间
• 设置层级高于普通元素
• 不结合定位坐标，就是在原来的位置
• 绝对定位如果结合定位坐标，以祖先元素（设置绝对定位，相对定位）作为坐标的参考点
• 如果祖先没有设置定位，一直往上找，直到找到body，就以body来进行定位，相对于整个窗口来进行定位