<!DOCTYPE html> <!-- 版本类型声明 --> <html lang="en"><!-- 根元素 --> <head> <meta charset="UTF-8"> <!-- 声明页面的编码格式 --> <title>20160722</title><!-- 将页面标题放到页面编码之下，防止乱码 --> <meta name="keywords" content="音乐，视频，电影"> <meta name="descrilition" content=""> </head> <body> <h1 style="text-align: center;">2016-07-28学习日志</h1> <hr> <h2>CSS盒模型</h2> <h3>什么是盒模型</h3> <ul> <li>由margin/border/padding/content组成</li> </ul> <hr> <h3>margin属性</h3> <ul> <li>top-right-bottom-left:顺时针</li> <li>具体方位单独设置: margin-top|margin-right|margin-bottom|margin-left</li> <li>margin: top-right-bottom-left</li> <li>margin: top left+right bottom</li> <li>margin: top+bottom left+right</li> <li>marign: 一个值代表四个方向上一样</li> <li>margin: 20px auto意思是上下两个方位的外边距为20px,左右方向上实现居中</li> <li><strong>竖向margin的叠加</strong></li> <ul> <li>margin在横向上是加法，但在竖向上却会产生叠加，并会取上下间距的其大者生效</li> </ul> <li><strong>margin对行标签的影响</strong></li> <ul> <li>行属性标签设置margin时,横向起作用，竖向无效</li> </ul> <li><strong>margin-top的bug</strong></li> <ul> <li>当两个容器嵌套时，如果外层容器和内层容器之间没有别的元素，有些浏览器会把内层元素的margin-top作用于父元素</li> <li>解决方法：浮动,display:inline-block,</li> </ul> <li><strong>IE6下的横向双倍margin bug</strong></li> <ul> <li>IE6会在特定的条件下，将设置的横向margin值变成双倍，条件</li> <ol> <li>元素必须浮动</li> <li>元素必须具有横向的margin即margin-left,margin-right</li> <li>原色是块元素</li> <li>必须是IE6</li> <li><strong>解决：display:inline;</strong></li> </ol> </ul> </ul> <hr> <h3>padding属性</h3> <ul> <li></li> </ul> <hr> <h3>border属性</h3> <ul> <li>solid/dotted:点线/dashed：虚线</li> </ul> <hr> <h3>display属性</h3> <ul> <li>block/none:元素隐藏/inline/inline-block</li> </ul> <hr> <h3>标准模式与怪异模式</h3> <ul> <li>怪异模式是在IE6及更早的IE版本下的和模型所占的空间总宽度=内容+外边距</li> <ul> <li>box-sizing:content-box;采用标准模式解析，是默认模式</li> <li>box-sizing:border-box;采用怪异模式解析</li> </ul> </ul> <hr> </body> </html>