margin塌陷问题 当时说到了盒模型，盒模型包含着margin，为什么要在这里说margin呢？因为元素和元素在垂直方向上margin里面有坑。 我们来看一个例子： html结构： <div class="father"> <div class="box1"></div> <div class=" ...
分类：
其他好文 时间：
2018-11-10 10:39:38
阅读次数：
183
一.标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式 二.display属性 display:更改块级元素和行内元素的相互转换 block：块级元素的默认值 inline：行内元素的默认值 inline-block:同时具有行内和块级元素的特性 ...
分类：
Web程序 时间：
2018-11-09 16:16:12
阅读次数：
768
一.margin的塌陷解决： BFC （block format context）块级格式化上下文格式 display:inline-block float:left / right overflow: hidden position: absolute 二.float 1.浮动元素产生了浮动流 2 ...
分类：
Web程序 时间：
2018-10-31 15:33:55
阅读次数：
178
一、几类视图 内联视图：inline 单行 块级视图：block 换行，有高度 行内块级视图：inline-block 单行，有高度 二、几类布局 块级布局 换行，通过设置 margin 水平居中 source： 浮动布局 单行，类似流体布局 source： 若全为浮动，则父容器会高度塌陷，需要在此 ...
分类：
其他好文 时间：
2018-10-21 19:32:25
阅读次数：
166
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>高度塌陷</title> <style> .box1{ border: 5px solid red; /*根据W3C的标准，在页面中元素都隐含的属性叫BFC * BFC,该属性可以设置 ...
分类：
其他好文 时间：
2018-10-15 11:53:46
阅读次数：
163
- 让写出的代码具有可维护性，可复用性，可移植性。不再专注于代码本身，而是站在宏观的角度思考代码，想如何规划和管理代码 - 代码至少满足"低耦合 高内聚" - 低耦合:每个模块之间的代码没有关联性 - 高内聚:每个模块代码都是由关联性很强的代码组成，都是用来实现单一的功能，得遵守单一职责的原理 - ...
分类：
其他好文 时间：
2018-10-13 18:15:11
阅读次数：
142
首先看一下问题案例 .wrapper{ width: 100px; height: 100px; background-color: aqua; margin-top: 100px; margin-left: 100px; } .inner{ width: 50px; height: 50px; m ...
分类：
其他好文 时间：
2018-10-06 21:29:27
阅读次数：
271
解决方法: 1 给父盒子设置边框 2 给父盒子overflow:hidden; bfc 格式化上下文 http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html ...
分类：
其他好文 时间：
2018-09-30 14:59:34
阅读次数：
154
一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding</title> <style> *{ padding: 0; margi ...
分类：
其他好文 时间：
2018-09-19 21:54:44
阅读次数：
170
高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的。 但是当为 子元素 设置 float 时，子元素会完全脱离文档流，无法再撑开父元素，导致父元素高度塌陷。。。以致于布局混乱 变成 BFC块级格式化环境 根据W3C标准，元素都有一个隐含的属性“Block Formatting Context” ...
分类：
其他好文 时间：
2018-09-08 11:44:26
阅读次数：
159
