任务十三 css综合

本文版权归饥人谷和本人所有
1.编码规范:
(1).合理命名

  • 使用语义化标签,
  • 基于功能命名、基于内容命名、基于表现命名,命名应该体现功能,不涉及表现样式(颜色、字体、边框、背景等)
  • 简略、明了、无后患

(2) 标签命名不使用驼峰,使用-代替_
(3) tab用2个空格
(4) 尽量少的使用id
(5) css属性换行,而不是放到一行
(6) 小数不用写前缀, 0.5s -> .5s;0不用加单位
(7) 不追求多属性赋值的简写,以免引起代码混乱
(8) 为选择器中的属性添加双引号,例如,input[type="text"]
(9) 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3
参考文章:
http://codeguide.bootcss.com/

2.垂直居中的四种方法
一.调整padding,使上下padding相等

二.绝对定位加负margin
注意点:
1.当设置宽度和高度为百分比时,是用父元素内容的宽度和高度乘以该百分比
2.当子元素的宽高固定时,可直接用负margin
3.当子元素的宽高不固定时,可用transform: translate(-50%,-50%) 这里的50%是相对于内容本身的宽高。

三.vertical-align伪元素居中
利用vertical-align:middle
先设置一个伪元素,使其高度与父元素高度一致(即100%),再对其设置vertical-align:middle ,此处要注意要将该伪元素设置display:inline-block 因为行内元素无法设置宽高,而块级元素无法应用vertical-align:middle
再设置需要垂直居中对齐的元素 :vertical-align:middle

四. table-cell布局
利用表格布局的特性。如果display:table-cell不影响布局则这种方式非常方便快捷

四个垂直居中demo

用css画小三角形,模拟对话框:
http://js.jirengu.com/zulihivala/1/edit?html,css,output

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,493评论 0 30
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,589评论 0 1
  • 背景 由于项目中需要拍照功能,但是系统原生的相机功能根本满足不了项目的需要,所以就只能自定义一个相加了。苹果再AV...
    FlyOceanFish阅读 11,269评论 0 11
  • Spring事务配置的五种方式 前段时间对spring的事务配置做了比较深入的研究,在此之间对Spring的事务配...
    CSF_8ba0阅读 2,629评论 0 0