黑马程序员技术交流社区
标题:
学习经历
[打印本页]
作者:
Bella_敏
时间:
2019-4-19 23:49
标题:
学习经历
比较常用的一些布局思路
导航制作
html结构：ul嵌套li，li嵌套a
CSS样式：
给ul起名叫nav，设置宽高
给li设置float：left；在一行显示
将li里的a进行显示模式转换display：block；设置固定高度，宽度默认为li的宽度
如果a里面的文字不一样多，就不需要设置固定的宽度，直接用padding：上下为0 左右为10px；
最后可以根据需求将li之间的距离用margin进行设置
注意：
子盒子设置了浮动就不会有塌陷的问题
行高=高度只能让单行文本垂直居中
行内元素只给左右内边距，不给上下
如果给li设置外边距后，父级盒子不够宽，li盒子无法放一排掉下来，可以给父级盒子设置宽度大于父级盒子原有宽度，即子盒子宽度设置可以大于父级盒子
浮动常见布局
左右布局
(重点)
一个父级盒子嵌套两个子级盒子，给父级盒子设置固定的宽高，第一个子级盒子左浮动
float:left;
，第二个子级盒子右浮动
float:right;
左中右布局
(重点)
一个父级盒子嵌套三个子级盒子，给父级盒子设置固定的宽高，第一个子级盒子左浮动
float:left;
，第二个子级盒子左浮动
float:left;
第三个子级盒子右浮动
float:right;
如果每一个盒子之间有距离我们默认给中间的盒子设置
margin:0
想要的值；
浮动布局注意点（超级重要）
利用浮动布局的时候，建议给浮动的元素嵌套一个父级元素，然后给父级最好设置固定的高度，就减少出现兼容问题；
所有的浮动布局在效果图量取的宽高必须一模一样
overflow:hideen;的常用技巧
overflow:hideen;可以让超出固定范围的内容隐藏掉；
overflow:hideen;可以清除浮动，布局的时候我们做左右或者左中右布局，都是父级嵌套子级盒子，然后将子级盒子浮动，但是如果没有给父级添加固定的高度，子级浮动以后父级的高度为0，不占位，会影响后面的布局，
就给父级添加
overflow:hideen;来解决；
overflow:hideen; 嵌套的父子级盒子出现外边距塌陷问题，两个嵌套的盒子，都没有浮动或者定位，给子级盒子添加了margin-top就会出现父级跟着掉下来的塌陷问题，
就给父级添加
overflow:hideen;来解决
；
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2