美文网首页
CSS 常见布局问题总结

CSS 常见布局问题总结

作者: Criya | 来源:发表于2018-04-06 09:53 被阅读0次

左右布局

最简单的方法是左右浮动,父元素清除浮动

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

左中右布局

与上面同理,可搭配margin或者定位来调整。(以后再补充好了)

水平居中。

  1. 内联元素
text-align: center;

2.块级元素

margin: 0 auto;

3.复数块级元素
首先将块级元素转为内联元素,再用内联元素的方法居中

display: inline-block;
/*在父元素上*/
text-align: center;
/*修复bug*/
vertical-align: top;

垂直居中

垂直居中不像水平居中那么方便,因为在css高度取决于文档流,而宽度又会改变文档流。
当知道父元素高度时

.parent{
  height: 100px;
}
.child{
  line-height:100px;
}

当不知道父元素高度和子元素高度时

.parent{
  position: relative;
}
.child{
  position: absloute;
  top: 50%;
  transform: translateY(-50%);
}

相关文章

  • CSS经典布局

    CSS经典布局 本文主要对一些常见的CSS布局问题进行总结,涉及三栏布局、负margin、清除浮动、居中布局、Fl...

  • CSS 常见布局问题总结

    左右布局 最简单的方法是左右浮动,父元素清除浮动 左中右布局 与上面同理,可搭配margin或者定位来调整。(以后...

  • css

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

  • CSS布局

    CSS入门(3) CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+...

  • CSS常见布局总结

    前言   前端重要的就是布局,平时各种各样花样繁多的网页,仔细琢磨,布局也都是那么几种,脱不了樊笼。所以,尝试从概...

  • css常见布局总结

    1.单列布局1.1普通布局(头部、内容、底部) html代码 对应css布局 2.内容居中(内容区域为80%宽度,...

  • web面试汇总

    《前端面试常见问题按知识点分类整理》 《CSS 中布局终极方案》面试中经常遇到的面试题之一,居中布局,特来总结 《...

  • CSS布局

    CSS的常见布局 CSS常见布局使用display属性(文档流)+position属性(定位)+float属性(浮...

  • CSS布局

    HTML CSS + DIV实现整体布局必备知识利用HTML和CSS实现常见的布局 单列布局 css 实现竖直居中...

  • 常见的CSS布局总结

    这是一片引用别人的文章,因为自己目前掌握还不够透彻,暂时先学习他写的文章,待以后清楚了再补回来这篇。 作者:sun...

网友评论

      本文标题:CSS 常见布局问题总结

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