黑马程序员技术交流社区

标题: 技术感言 [打印本页]

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

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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2