当前位置: 萬仟网 > IT编程>网页制作>CSS > 小结常见布局技巧

小结常见布局技巧

2020年01月17日  | 萬仟网IT编程  | 我要评论
1.0 子绝父相,盒子塌陷,创建BFC 当浮动解决不了问题的时候,会考虑用定位实现,而为了页面的稳定性,要给父元素相对定位​ 当嵌套的标准流,块级子盒子设置上外边距就会出现塌陷​ 触发BFC能解决日常网页开发中很多不必要的麻烦 2.0 布局规律 从上到下,从外到内,从左到右,实体化盒子,再考虑内容 ...
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;
}

 

 

 

 

 

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号