小结常见布局技巧

1.0 子绝父相，盒子塌陷，建立BFC

 当浮动解决不了问题的时候，会考虑用定位实现，而为了页面的稳定性，要给父元素相对定位
​
 当嵌套的标准流，块级子盒子设置上外边距就会出现塌陷
​
 触发BFC能解决平常网页开发中不少没必要要的麻烦

 

2.0 布局规律

 从上到下，从外到内，从左到右，实体化盒子，再考虑内容
 浮动解决一行多个的问题，浮动解决不了的就用定位
 能用宽度就不用padding，能用padding就不用margin
 能用标准流就不用浮动，能用浮动就不用定位
​
 a的做用很特殊，能够装块级元素，也能够被装在行内元素中
 a连接默认空连接给#，须要有小手作点击效果，给javascript:;
​
 单行文本垂直居中行高等于高度，多行文本没有垂直居中，行高须要量取
​
 若是有字体图标的状况下，能用字体图标就不要用精灵图

 

3.0 常见错误布局

 p标签不能装div，只能装文字标签

 选择器不须要写的特别特别长，计算权重会很麻烦

 要浮动就都要浮动，否则盒子不能到一行显示，浮动的元素会脱离标准流
​
 若是但愿盒子有移动效果，不要使用padding或者margin，而使用相对定位或者位移转换，占位置

 

4.0 浏览器特性

 行内块盒子默认基线对齐，在块级盒子内会往下错位 
​

img {
    vertical-align: middle;
}

 

​
 通常用浮动解决，好比默认图片就会有底部透明像素和文字排版也有问题 
​
 a连接不继承样式，须要单独设置 
 a连接设置了新的颜色，hover就没有了，通常须要从新设置 
​
 浮动的元素，要给父元素清除浮动，否则父盒子没有高度，会影响布局 
​
 没有加宽度的盒子给padding值或者margin值，盒子内容会自动缩减 

 

5.0 常见css布局技巧

 文字水平居中给父盒子设置text属性，盒子水平居中给自身设置margin或者定位
 使用精灵图区别于图像标签，要区分用法，大致上没什么区别，可是小图标大多都用背景获取精灵图
​
 初始化的样式要先引入，后写的css要后引入，由于css是层叠样式表
​
 列表中的元素须要给边框，要先给其余人都加上边框，避免抖动（参考品优购详情页的左侧图片列表布局）
​
 通常给父盒子加上hover 给子盒子改变内容，能够作一些特殊效果，还稳定
​
 电梯导航类的固定定位的盒子经过中线对齐，而后移动到版心以外，不以浏览器为基准
​
 若是列表盒子一行想展现多个，可是宽度差几像素，能够给父元素单独设置比子盒子宽度总和大一点，就能够去一行上显示了，若是有多余部分要给父盒子的父盒子溢出隐藏
​
 若是写左右定位盒子，不少属性能够集体声明，可是记住left和right要单独声明，由于层叠不掉
​
​

 

6.0 查找问题

 出现问题，先打开审查元素，点击盒子，查看结构是否正常嵌套，在看右侧样式是否正确或显示，观察盒子大小，设置hover效果，调试盒子位置
​
 css文件中任何一个语法错误都会致使语句失效，单词拼错，少告终束括号，注释错误，中文符号，空格使用错误
​
 css单个盒子最后一句css不写分号不报错，可是建议都写上最好
​
 可能还会有别的没有讲到的，可是至此应该要知道核心思想，由于东西是学不完的

 

{
  /* 解决英文字在盒子内不还行的问题 */
  word-break: break-word;
  
  /* 字间距 */
  letter-spacing: 1px;
}