美文网首页
CSS布局的一般步骤

CSS布局的一般步骤

作者: madpluto | 来源:发表于2017-10-07 14:26 被阅读0次
  • 是否需要兼容IE8以下?需要则float布局,不需要则flex布局。
  • 标签语义化。如导航栏,无意义的div显然不如ul>li,编辑器也会帮你判断(如不允许ul下直接嵌套div)
  • 无论是js还是css,命名都非常重要,js零成本重构方式就是改函数命名,css命名要让人一眼看出来这是什么东西。可以去相似网站学习命名方式。少用缩写,少用缩写,少用缩写!
  • 避免多层嵌套带来的难以阅读

浮动布局

  1. 儿子身上加float:left;
  2. clearfix加到父亲身上
  3. 给儿子调宽度(容器宽度尽量少写,用元素撑开)

flex布局

  1. 给爸爸加display:flex
  2. 调整儿子宽度
  3. 用justify-content align-items flex:1/2/3等实现居中

相关文章

  • css布局一般步骤

    选择要不要支持ie8+; 要支持ie:浮动布局;不支持ie:Flex布局; 1、要支持ie8+;浮动布局 参考官网...

  • css 布局的一般步骤

    前提 问问题 任务:不要直接问答案非任务:最好拿代码来问问题 支持IE 使用浮动布局 注意: 实在想不到好的标签使...

  • CSS布局的一般步骤

    是否需要兼容IE8以下?需要则float布局,不需要则flex布局。 标签语义化。如导航栏,无意义的div显然不如...

  • HTML布局

    网站的布局一般使用css+div 来实现布局 1. CSS 中 id、class属性的区别 1)class是设置标...

  • CSS显示模式

    div和span 什么是div? 一般用于配合css完成网页的基本布局 什么是span? 一般用于配合css修改网...

  • 文章收藏

    CSS布局 CSS布局方案整理

  • css

    css基础css选择器css常见样式1css常见样式2CSS布局上CSS布局下flex布局塔防小游戏flex布局青...

  • css flex布局详解

    css flex布局详解 css flex布局详解1css flex布局详解2

  • CSS布局的总结

    1.CSS布局 布局分类 固定宽度布局,一般宽度为960/1000/1024px 不固定宽度布局,主要靠文档流的原...

  • 经典CSS布局:双飞翼和圣杯布局

    圣杯布局 HTML CSS 双飞翼布局 HTML CSS Flex布局 HTML和圣杯布局一样CSS

网友评论

      本文标题:CSS布局的一般步骤

      本文链接:https://www.haomeiwen.com/subject/zgjjyxtx.html