摘要：一、分别尝试使用 float、position、flex 实现如下需求 1.实现一个两栏布局，左侧占百分之三十宽度，右侧占百分之七十宽度 DOM： float样式： position样式： flex样式： 一个坑需要注意： 在使用 布局时，浏览器对 缩写属性和 属性的渲染有不一致的地方，例如上边这个 阅读全文

摘要：一、共性和差异 首先两个布局是有共性的： 1. 实现效果一致：都是三栏布局，左右两列宽度固定，中间列宽度自适应。中间列放重要的内容，因此在DOM结构中位置靠前优先渲染。 2. 实现原理一致：都是将一个 的浮动块和另外两个定宽浮动块通过负外边距和相对定位的方法实现最终布局，因此涉及到的方法包括： 浮动 阅读全文

摘要：一、文档流（flow） 1. 元素的宽高： 默认情况下，块级元素的宽度是其父元素宽度的100%，高度由其内容的高度决定，内联元素的宽度和高度均由其内容决定 2. 正常的布局流： 1. 块级元素在视窗中垂直布局，每一个都将显示在上一个元素下面的新行上，被它们之间的外边距隔开 2. 内联元素在视窗中水平 阅读全文

摘要：一、理解框模型 1. 框属性： width、height、padding、border、margin 2. 溢流 overflow 的处理方式： 1. auto:当内容过多，溢流的内容被隐藏，然后出现滚动条来查看所有的内容 2. hidden:当内容过多，溢流的内容被隐藏 3. visible:当内 阅读全文