task13编码规范、垂直居中

1、说一说你平时写代码遵守的编码规范。

编码规范主要在命名技巧和CSS规范两个方面
(1)命名技巧
语义化:选择合适的标签和命名

  • 如何选择标签:语义化标签优先;
  • 如何命名,基于功能命名、基于内容命名、基于表现命名(不好、不用);
命名用英文小写,用引号包裹
用中横线连接-
命名体现功能,不涉及表现样式(颜色、字体、边框、背景等)
常见命名
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png

(2)CSS规范

Paste_Image.png

参考规范:http://codeguide.bootcss.com/

2、垂直居中有几种实现方式,给出代码范例

(1)块级元素,上下padding相同
居中参考点: 父容器上下边框距离。
(2)绝对定位居中
absolute+margin
absolute+transform
参考点: 父容器起始点(左上角坐标原点).
(3)对于行内元素、表格,vertical-align: middle实现居中
参考点:两个行内元素,互为参考,若行内元素1设置了vertical-align: middle,则以行内元素1的middle为参考点,元素2的基线(底部)会与元素1的middle位置对齐。若量元素均设置vertical-align: middle,则它们的中线对齐。通过设置高度来实现垂直居中。

Paste_Image.png
Paste_Image.png
Paste_Image.png

Paste_Image.png

(4)使用table-cell实现居中
父容器display: table-cell;vertical-align: middle;

3、每种效果都只使用一个html 标签来实现。

demo

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,839评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,238评论 3 30
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,673评论 0 30
  • 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。 ...
    青鸣阅读 333评论 0 1
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 981评论 0 1