CSS的常见用法

CSS左右布局

一般来说,如果有2个块级元素,那么应该是上下排开的,现在要将他们放在一行中,那么需要添加float元素,之后再他们的父元素中,添加这一样式,如下


css=“clearfix”

CSS左中右布局

如果有三个块级元素,那么可以给他们依次设置float,第一列和第二列设置为left,第三列设置成right,对于他们的父级元素设置宽度以及水平居中。

水平居中

对于内联元素来说,需要对其父元素设置text-align为center,内联元素就能够水平居中了

而对于块级元素,有2中情况

第一种是定宽的情况。

块级元素是需要一个宽度,然后设置margin属性为0 auto,就可以实现块级元素水平居中;

第二种是不定宽的情况。比方说在一个div中有一个UL或者OL。

1.可以给列表中的子元素设置为display:inline-block ,之后设置vertical-align:top,给其父元素设置text-align:center。

2.使用table布局的方法,为其父元素设置display:table,而子元素设置display为table-cell,vertical-align:middle,text-align:center。

垂直居中

1.使用flex来进行垂直居中,将父元素添加以下几个属性{

  display: flex;

  align-items: center;

  justify-content: center;

}

就能够垂直水平居中。

2.使用伪元素进行设置,将子元素的伪元素添加display:inline,height:100%;vertical-align:middle,当然父元素要有一个高度才可以哦。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 10,072评论 5 15
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,342评论 0 5
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 12,528评论 3 30
  • 目标:1)拥有美满的伴侣关系,每周都有足够多的时间陪伴彼此;2)在2018年6月分拥有30万的存款,支持我继续去学...
    净心Farhana阅读 937评论 0 0