比较常用的一些布局思路


导航制作
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;来解决；
  

比较常用的一些布局思路


导航制作
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;来解决；