1.设计稿
清空所有的边距
从外向内,从上面到下
2.网页布局方式
1)标准流排版方式
【1】浏览器默认的方式
【2】块级元素,行内元素,行内块级元素
【3】水平排版
垂直排版 ,如果元素为块级元素,垂直排版
水平排版,如果元素为行内元素/行内块级元素
2)浮动流的排版方式
【1】和父类的最左边和最右边对齐使用float
【2】浮动流是半脱离标准流的排版方式
【3】只有一个水平排版,只有左右,没有中间
不可以使用margin:0 auto;
【4】在浮动流中不区分块级元素,行内元素,和行内块级元素
【5】在浮动流中无论是块级元素,行内元素,和行内块级元素都可以设置宽高,和标准流中的行内块级元素一样
【6】浮动元素的脱标
脱标:脱离标准流,当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标
脱标之后的影响:如果前面一个元素浮动了,后面一个元素没有浮动,那么这个时候前面的一个元素会覆盖后面一个
【7】浮动元素的排序规则
1)相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面
样式 显示2)不同方向上的浮动元素,左浮动会找左浮动
3)浮动元素浮动之后的位置,由浮动元素之前在标准流中的位置来确定
样式 显示 若box4也是左浮动,显示为上面的【8】浮动元素贴靠现象
当父元素的不可以放的下的时候,将最后一个浮动元素往前贴靠,以此往前找浮动元素
排版浮动元素不会覆盖没浮动元素的内容,自围现象
样式显示 代码【9】在企业开发中,水平方向上多用浮动流来布局,垂直方向按照标准流来布局
【10】浮动元素的高度问题
1.在标准流中内容的高度可以撑起父类元素的高度
2.浮动流中浮动的元素是不可以撑起父元素的高度的
网友评论