两栏布局,两大经典bug

1.div页面居中: 定位+left top 50%+margin-left margin-top 负的div宽高


2.两栏布局:

右边绝对定位脱离文档流,左边就上去了,再利用据右边距离来调节定位元素的位置,在把下面排到上面的把定位元素的宽空出来


3.margin塌陷  加入了css

垂直方向父子元素margin取最大的一个margin-top作为他俩的margin-top值

第一种解决方案:给父元素加一个边框,子元素就能相对于父元素来进行margin-top了


效果如下:

margin塌陷  只能说是弥补,但解决不了,根据需求选择

bfc    block  format  context  块级格式化上下文

css把每一个元素都当成一个盒子,每个盒子都有自己的渲染规则,根据你写的代码能绘制出来

bfc语法能改变个别盒子的渲染规则,遵循另一套渲染规则,只改变一丁点  解决了margin塌陷 

如何触发盒子的bfc:让父级变成bfc,内部采用bfc语法

position :absolute

display:inline-block

float:left/right

overflow:hidden

4.margin合并    加入了html 和css  一般不解决

区域不能共用

兄弟元素垂直方向上margin合并  解决办法将兄弟两个其中一个或者是全部放在一个具有bfc语法的盒子里面

5.模型

盒模型    层模型  浮动模型

浮动元素产生了浮动流

所有产生了浮动流的元素,块级元素看不到,

产生了bfc的元素和文本类属性(带inline属性的)的元素以及文本都能看到浮动元素

p逻辑上在就行,可以没有高度

css选择器

伪元素是行级元素

能清除浮动的必须是块级元素 


清除浮动要把父级元素变成bfc语法的元素

行内块元素宽高由内容决定

去掉ul里面li的小圆点

#424242标准的黑色

  font-family:    arial标准字体

每次用完浮动就要清除一下:

你可能感兴趣的:(两栏布局,两大经典bug)