A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© cam 初级黑马   /  2018-9-13 22:20  /  1507 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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

9423719B-EEED-45E5-8726-747295B1EE08.png (131.5 KB, 下载次数: 7)

9423719B-EEED-45E5-8726-747295B1EE08.png

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马