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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

Bella_敏

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

[学习交流] 学习经历

© Bella_敏 初级黑马   /  2019-4-19 23:49  /  567 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

比较常用的一些布局思路


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




0 个回复

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