6.学习html笔记

###盒子模型###

• line-height:20px 设置行高
• 网页设计需要先清除元素的默认边距设置
  • *{ margin:0px;
    padding:0px;}
  • body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
• 固定元素的边框大小 box-sizing：
  • border-box；
  • cotent-box; 默认值
• 盒子位置居中，可以通过margin设置，里面的元素居中通过padding设置
• margin：0 auto； 水平居中
• 盒子如果垂直居中，外面的盒子需要设置边框防止margin-top合并；
• float 元素浮动排版，浮动排版是没有margin：0，auto；的，float的元素均水平排版，行级元素也可以设置宽高。
  • float：left；
  • float：right
  • float：none；
• 浮动元素的文字围绕浮动元素；
• 网页开发布局中，垂直标准排版，水平浮动排版；
• 在标准排版中，内容可以撑起盒子的大小
• 一个浮动元素不能撑起父元素的大小
• 清除浮动
  • 设置父级元素大小
  • 元素的clear属性 none 默认按照浮动顺序排版
    • left 左侧浮动元素不换到上一个浮动元素后面
    • right
    • both 不在左侧也不再右侧，使用用到最多；
  • 外墙法，对于浮动垂直盒子的margin-top 和margin-bottom失效，中间可以添加块级元素clear：both；来隔离。
  • 内墙法，在第一个盒子所有元素的最后添加一个清除浮动的块级元素
• 伪元素选择器 CSS3
  • div::befor{在制定标签内开始添加的内容或元素；}
  • div::after{}
    • visibility:hidden;添加元素隐藏
  • 可以利用伪元素选择器添加块级元素清除浮动 推荐实际设计中使用。IE6不支持，添加{*zoom:1;}
• overflow:hidden; 将超出标签范围的内容剪掉
  • 清除浮动的方式，在第一个盒子中添加overflow：hidden