CSS 布局

1.左右布局
使用内联元素,同时可以使用浮动布局,别忘了清除浮动

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

最左侧内容可使用float:left 最右侧内容使用可float:right

左右布局.png

2.左中右布局
同样需要使用内联元素,中间元素可以设置margin:0 auto如果非要控制宽高,可以使用display:inline-block

左中右布局.png

3.水平居中

文字使用 text-align: center

文字居中.png

4.垂直居中
可以尝试调整margin 和padding,如果还是不行尝试在div内部再加一个div

5.其它
margin可以为负值
调试时可以尝试为元素加一个红色边框 border: 1px solid red;
border-radius 用于增加圆角
box-sizing: border-box;告诉浏览器去理解你设置的边框和内边距的值是包含在width内的
:nth-child(even) 可以使样式只适用于偶数项目

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,591评论 1 82
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 1,339评论 3 10
  • 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布...
    一个敲代码的前端妹子阅读 285评论 0 13
  • CSS布局解决方案(终结版) 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又...
    杀个程序猿祭天阅读 139评论 0 2
  • 参考书籍 Docker —— 从入门到实践本文只记录重要步骤,更详细的内容请在原书中查看 安装 Ubuntu、De...
    kviccn阅读 418评论 0 0