美文网首页
CSS的常见用法

CSS的常见用法

作者: 日光倾城_57d6 | 来源:发表于2018-04-19 12:59 被阅读0次

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,当然父元素要有一个高度才可以哦。

相关文章

  • Css常见用法

    div水平居中 绝对定位居中 三角形 消除transition闪屏 文本溢出 图文不可复制 placeholder

  • CSS的常见用法

    CSS左右布局 一般来说,如果有2个块级元素,那么应该是上下排开的,现在要将他们放在一行中,那么需要添加float...

  • CSS常见属性

    CSS常见属性 颜色 color属性定义文本颜色。 常见用法: color: green color: #ff66...

  • 你可能不知道的 transition 技巧与细节

    CSS 中,transition 属性用于指定为一个或多个 CSS 属性添加过渡效果。最为常见的用法,也就是给元素...

  • 任务8-CSS选择器

    课程目标 掌握常见 CSS 选择器的用法 对选择器优先级有一定认识 课程任务 1. CSS选择器常见的有几种? i...

  • python学习笔记:xpath+css

    xpath用法 CSS用法

  • 【Animate.css】CSS动画库

    本节目录 Animate.css简介 Animate.css基础用法 Animate.css配合JS的用法和讲解 ...

  • 任务8_CSS选择器

    课程目标 掌握常见 CSS 选择器的用法 对选择器优先级有一定认识 学习建议 从学 CSS 开始,课程视频里的代码...

  • web前端入门到实战:CSS伪元素(content与counte

    counter基本用法 在CSS里头,counter是个很有意思的功能,最常见得就是如果我们使用list清单,样式...

  • css选择器(8)

    掌握常见 CSS 选择器的用法对选择器优先级有一定认识 学习建议 从学 CSS 开始,课程视频里的代码需要边听、边...

网友评论

      本文标题:CSS的常见用法

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