标准流(normalflow)
◆元素默认的显示方式都是按照标准流的方式显示
◆块级元素默认独占一行显示===》标准流显示方式
◆行内元素在一行上显示===》 标准流的显示方式
浮动(float)
◆可以让块级元素在一行显示。
◆设置浮动后该元素不占位置(脱标)
◆可以实现模式转化
◆设置了浮动的元素,该元素会影响其后面的元素
注意:
◆让块级元素在一行上显示就使用浮动!
◆如果要实现模式转换,请使用display。
◆浮动最初的作用:
☞解决文字图片环绕效果。 【包裹性】
◆文字不会受浮动的影响。
关于布局: 圣杯布局 双飞翼布局 流式布局
清除浮动
清除浮动指的是:清除浮动对页面布局造成的影响。
◆父盒子没有固定高度【必须条件】
◆父盒子中的所有子盒子都设置了浮动【必须条件】
清除浮动的方式:
clear: left| right| both
给没有高度的父元素设置overflow:hidden;
注意:
◆如果父元素中有定位的元素,最好不要使用 overflow:hidden;
◆使用伪元素清除浮动
定位:
体现的是元素之间的层级关系。
定位作用:
◆使用定位的方式实现移动元素
定位分类:
☞静态定位(static)
☞绝对定位
☞相对定位
☞固定定位
静态定位
position: static; ===> 静态定位
◆静态定位==》标准流下元素的显示方式
◆静态定位不能实现移动元素位置。
绝对定位
position: absolute; ==>绝对定位的元素
绝对定位的元素定位特点:
◆如果一个元素设置了绝对定位,如果其父元素没有设置定位,那么该绝对定位的元素是以 浏览器(body)左上角为基准设置定位;如果该绝对定位的父元素设置了除静态定位以外的其他定位,那么该绝对定位的元素会以父元素的左上角为基准设置定位。
◆绝对定位的元素不占位置
◆绝对定位的元素脱标
◆绝定位可以实现模式转化
绝对定位: 盒子压盒子的效果。
相对定位
position: relative; ===》 相对定位
◆相对定位的元素定位特点:
☞设置了相对定位的元素只能以相对自己位置设置定位。
☞相对定位的元素没有脱标,占位置
☞相对定位不能实现元素的模式转换
☞子绝父相
固定定位:
position:fixed; ===> 固定定位
◆固定定位的元素只看浏览器左上角为基准设置定位
◆固定定位的元素脱标不占位置
◆固定定位可以实现模式转换
绝对定位的元素居中显示:
盒子居中显示特点:margin: 0 auto; ===>标准流下的盒子居中显示
绝对定位的盒子如何居中显示:
◆首先通过left移动父元素宽度的一般 left:50%;
◆通过设置margin-left: - 元素自己宽度一半;
标签包含规范
◆段落标签中不能放置标题标签
◆段落标签中不能包含div
◆段落标签中不能包含列表
◆行内元素最好不要包含其他元素【行内元素可以包含行内元素】
网页布局规范,规避脱标流
☞网页布局过程中优先考虑标准流布局。
☞然后考虑使用浮动
☞最后使用定位
☞元素模式转换的过程中,必须使用display。
◆vertical-align 与行高配合实现图片垂直居中效果。
页面元素隐藏方式:
◆overflow:hidden; 将超出部分隐藏
◆display:none; 元素隐藏 不占位置
display: block; 元素显示
◆visibility:hidden; 元素隐藏 占位置
Logo内容移除方式:
给logo设置text-indent: -2000px;
◆paddding配合overflow:hidden实现移除内容