小结常见布局技巧

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;
}

 

 

 

 

 

原文链接:https://www.cnblogs.com/mr17/p/12204466.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有