标准流盒子布局: 1、普通流:块级元素独占一行,从上向下顺序排列;常用的元素:div、hr、p、h1-h6、ul、ol、dl、form、table; 行内元素一行共存多个,从左到右排列,碰到父元素边缘则自动换行; 常用元素:span、a、i、em; 浮动:让盒子从普通流中浮起来,让多个块级盒子一行显示; 定位:将盒子在浏览器的某一个位置,后期会经常用到; (1) 、为什么使用浮动我们需要使用浮动来实现网页的布局效果,比如左右布局; 实际工作中我们一般都是用浮动来进行页面布局的; (2)、浮动:浮动布局的原理应用让元素脱离文档流,进行页面效果的布局; 作用:让多个盒子水平排列一行显示实现网页布局,盒子左右对齐,最早是用来实现文字环绕文字; 属性:float取值:left right none(不浮动默认就是) 浮动的特点浮:浮动之后的元素脱离了标准流; 漏:盒子浮动之后脱离的标准流原来的位置就空了,下面的盒子会补上来; 特1、浮动之后的盒子的显示模式会更改为行内块元素的特点; 2、浮动之后的元素之间的没有缝隙的,紧贴在一起,顶部对齐; 3、如果父级盒子不够宽装不下浮动的盒子,盒子会掉下来另起一行; (3)、常见布局(重点一定要会写)实际工作中我们最常见的布局就是左右布局和左中右布局 左右布局方法1:一个固定宽高的父级盒子(高度不一定固定)嵌套了左右两个子级盒子,第一个子级盒子左浮动flaot:left;,第二个盒子右浮动float:right; 方法2::一个固定宽高的父级盒子(高度不一定固定)嵌套了左右两个子级盒子,第一个子级盒子左浮动flaot:left;,第二个盒子左浮动float:left;,如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可; 左中右布局一个固定宽高的父级盒子(高度不一定固定)嵌套了左中右三个子级盒子,第一个子级盒子左浮动flaot:left;,第二个盒子坐浮动float:left;,第三个盒子右浮动float:right; 然后给中间的盒子设置margin-left实现三个盒子之间的外边距相同; (4)、浮动布局的注意事项01、利用浮动布局的时候,建议给浮动的元素嵌套一个父级元素,然后给父级最好设置固定的高度,就减少出现兼容问题; 02、如果要用浮动布局做修改,所有的父级盒子都必须浮动,不然不符合规范; 下图问题:新闻列表用的是h3标签,是块级元素,默认的宽度是100%,尽管下面的更多a右浮动了也上去 (5)、实际的导航布局Html结构• 实际开发中导航栏默认用ul嵌套li,li嵌套a标签完成; 这么做的好处01 li嵌套a语义清晰; 02 如果直接用a,搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限,影响排名; 03 友情链接类似的小导航可以直接用a链接完成; 导航布局思路• 实际开发中导航栏默认用ul嵌套li,li嵌套a标签完成; • 给li设置固定的宽高(如果文字不一样多我们可以不设置宽度,用padding撑开) • 然后给li设置float:left;让li在一行显示 • 如果想要鼠标经过a有一些样式,将a用display:block;转化为块元素,设置宽高和li一致; (6)、浮动元素与父盒子的关系• 浮动之后的子元素是以父级盒子为参照对齐的,不会与父级的边框重叠,也不会超出父级盒子的内边距; (7)、浮动元素与兄弟盒子的关系• 1、浮动元素和兄弟盒子都浮动了两个盒子都会在一行显示; • 2、做布局的时候所有的盒子必须都浮动,才能完成效果; • 3、浮动的元素顶端对齐,两个元素之间没有缝隙
|