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标准字体
每次用完浮动就要清除一下: