大家在写css时候有没有这种感觉,就是写起来突然找不到自己写的东西是什么了,突然某些元素出现在了页面上不该出现的地方,然后自己疯狂去css选择器调属性,结果选择器找到了,但是密密麻麻的属性却找不到了,下面我就来说一下我写css属性的顺序以及开发的小技巧
1.先确定盒子的布局方式
- 绝对定位还是相对定位 position:absolute/relative
- 向左/向右浮动 float:left/right
- 是否为flex布局 display:flex
2.确定盒子的特性和可见性
- 块级元素/行内块级元素/行内级元素/不显示 display:block/inline-block/inline/none
- 是否隐藏元素/不透明度 visibility/opacity
3.盒子模型的属性
- 设置盒子的宽高 width/height
- 设置box-sizing
- 设置外边距/边框/内边距/内容 margin/border/padding/content
- 设置盒子阴影/文字阴影 box-shadow/text-shadow
4.设置内部文字的属性
- 字体/文本 font/text
5.设置背景
- background - image/size/color/position
6.其他
- overflow:设置元素文本换行的行为
- 设置动画属性
- 设置white-space属性
总结
以上就是我最近在编写CSS属性方面的一些小的技巧吧,这也是我第一次发文章,希望以后可以保持更新,继续学习,和社区里更多的大佬进行交流,以上编写顺序如果有不同的方式欢迎大佬评论,大家一起学习共同进步
