论布局,bfc,margin塌陷和合并,经典bug
margin塌陷 加css 别改结构,把父级变bfc
margin合并就是两个兄弟 垂直之间的margin是合并的,把最上面的兄弟多加像素即可,不要改结构
※ 浮动元素产生了浮动流,块级元素看不到它们(所以两个盒子,会处在同一行)产生了bfc的元素和文本类元素以及文本都能看到浮动元素
BFC是block format context
※ 正常规则里CSS认为把HTML每个元素都当一个盒子,而且进一步的认为每个盒子里都有一套一模一样的语法渲染规则,所以我们可以
通过一些手段让特殊的盒子里渲染规则发生改变
: position / float / display:inline-block; / overflow:hidden;
根据开发需求选择相应的需要
在学习过程中,怎样灵活的发挥其实对于中国学生来说并不容易,我们都习惯了固定的思维模式,
受从小教育的影响,导致大学生很多是作业或者其它everthing 是一样的标准,
难道培养人才的模式是一样的吗?为的是把我们变成一样的人吗?答案,is wrong
布局
table(表格)布局-->float(浮动)布局-->position(定位)布局-->flex(弹性)布局-->grid(网格)布局(还未正式推出)
float以成过去式了,但为了纪念,还是先聊聊这个问题,margin塌陷问题
:刚开始float并不是为了用来网页布局,而是用来解决图文信息中图片与文本冲突的问题,为的实现图片和文本环绕效果
如果浮动元素的父元素没有设定高度,当其子元素浮动后,父元素就因为内部没有子元素撑起从而高度变为0;就是父包不住子
怎么解决,用伪元素, content=""; clear:both; display:block; 伪元素天生是行级元素 能清除浮动的是块级元素 所以加 display:block;
position 和 float 打系统内部变成行级块元素
网页元素一般分为: 普通流,浮动流,定位流。
网页模型分为: 盒模型 层模型 浮动模型