div+css 学习笔记

1.盒子模型  边界(margin) 边框(border) 填充(padding) 内容(content)
2.一列布局
一列固定宽度  #layout { height: 300px; width: 400px; background: #99FFcc; }
一一列固定宽度居中  #layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }
一列自适应宽度 #layout { height: 300px; background: #99FFcc;}
一列自适应宽度居中 body { margin: 0px; } #layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }
注意：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值 Id的优先级高于class
3.二列和三列布局
二列自适应宽度

此处显示 id "side" 的内容
此处显示 id "main" 的内容

二列固定宽度居中

  
此处显示 id "side" 的内容
  
此处显示 id "main" 的内容

三列自适应宽度 示例代码

此处显示 id "side" 的内容
此处显示 id "side1" 的内容
此处显示 id "main" 的内容

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。
css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。
float 使元素浮动
margin:10px 5px 15px 20px;  上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px

 

转载于:https://www.cnblogs.com/wuhuisheng/archive/2012/10/11/2720364.html