前端与移动开发 | |
学习经历: | - |
上完css的第8天了;基本上进入了项目实战第阶段;本次重点分享的内容是盒子模型布局 浮动 已经定位 1 这是本次模拟考试的页面;刚拿到页面我慌了;其实本身是很简单的一个头部但是因为紧张;导致结构错乱;一直在找bug首先拿到这个页面它是有版心的;中间框起来的是版心盒子;外部是一个通然的大盒子;里面是装一张背景图片, 第二就是里面有一个左边的盒子;中间一个盒子; 右边两个盒子;而且是上下排列的; 2 在做中间a 链接的时候因为结构错了;给盒子里面的li设置浮动;一直不能在一行显示,通过debug在页面种找到了问题;然后给ul 设置了外边距;导致最外面的盒子塌下来了; 3 第三右边的盒子;上下结构也很清晰;给盒子设置了padding和margin值;但是a里面的内容;英文排练出现问题;主要是盒子浮动引起的;因为盒子没有高度所以英文文字跑到中文到前面;给盒子设置float:right;就可以了; 所有到导航其实都是一个原理;排好盒子到布局;结构分明;分别给盒子设置属性;对一个小白来讲是要重点是熟悉到;而且对于浮动到元素来讲;分为几种情况 如果父盒子没有高度;子盒子浮动是一定会影响下面的布局;记得给元素清楚浮动; 如果父盒子没有高度;父盒子有浮动;子盒子也浮动;父盒子能自己检测到高度; 所以下次在做布局的时候一定要注意结构 |
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |