关闭

百度Web前端技术学院--水平垂直居中

标签: cssweb前端源码
689人阅读 评论(0) 收藏 举报
分类:

任务

  • 实现如示例图(点击查看)的效果。
  • 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角。

实现

demo

demo

源码

css代码:

   .container{
        width:400px;
        height: 200px;
        background-color: #ccc;
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin:auto;
        overflow:hidden;
    }
    /*第一种方式实现圆角*/
    .left-circle{
        background-color: #fc0;
        width: 50px;
        height: 50px;
        border-bottom-right-radius:50px;
    }
    /*第二种方式实现圆角,其实是画一个圆,然后遮住3/4,得要在container中加入overflow:hidden了*/
    .right-circle{
        background-color: #fc0;
        width: 100px;
        height: 100px;
        border-radius:50px;
        position: absolute;
        bottom:-50px;
        right:-50px;
    }

水平垂直居中的实现

绝对定位的方式

    .container {
        width: 400px; 
        height: 200px;
        position: absolute; 
        left: 50%; 
        top: 50%;
        margin-top: -200px;    /* 高度的一半 */
        margin-left: -300px;    /* 宽度的一半 */
    }

这个方法等于是在手动计算margin的值了,如果不知道div的宽度和高度,我们还得借助js的document来获得,就显得麻烦了。

margin:auto的方式

我用的就是这种方式,通过设置margin:auto来实现居中效果。

这里面最关键的就是要让top/bottom/left/right都得设置为0。

其实这里我不明白的是为什么我单单写了一个margin:auto只是水平居中,根据margin值得设置方法,margin:auto难道不是margin: auto auto auto auto的意思吗?

这样设置了之后结果变成了这样:

强行卖了一波萌~

后来才知道原来margin-top:automargin-bottom:auto的计算值是0,所以margin:auto只是水平居中了。

然后要实现水平垂直居中我们只能这样了。先把top/bottom/left/right都设置成0,然后再设置margin:auto就可以实现了:

这里可以参考两个地方:

为什么「margin:auto」可以让块级元素水平居中?

小tip: margin:auto实现绝对定位元素的水平垂直居中


笔记

position

position是决定了元素将如何定位的属性。

描述
static 这是默认值。相当于没有定位。
relative 相对定位,相对于正常位置来定位。
absolute 绝对定位,相对于最近一级的不是static的父元素定位。
fixed 绝对定位,相对于浏览器窗口来定位。即便页面滚动,它还是会在相同的位置。
inherit 从父元素继承。

top、bottom、left、right

该属性规定元素的顶部边缘。分别定义了一个定位元素的上下左右外边距边界与其包含块上下左右边界之间的偏移。

注意:对于相对定义元素,如果top和bottom都是auto,则计算值相当于0。

border-bottom-right-radius

这条属性是CSS3新添加的属性。是用来定义右下角边框的形状的。

这条属性可以有两个值,也就是:

border-bottom-right-radius: length|% [length|%];

第一个值是水平半径,第二个值是垂直半径。如果忽略了第二个值,则复制第一个值。

注意:如果长度为0,则边角就是一个正方形;如果只有一个值,则是圆形。

border-radius

这条属性是CSS3新添加的属性。用来设置四个border-*-radius属性,顾名思义就有四个值了。

这样一条border-radius=50px就相当于:

    border-top-left-radius:50px;
    border-top-right-radius:50px;
    border-bottom-right-radius:50px;
    border-bottom-left-radius:50px;

参考资料

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

实现div水平、垂直居中的几种方法

1、最常用的,也是最简单的(利用position定位、再用margin偏移) 实现div水平垂直居中 body{ background: #272822; } .te...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016-12-28 15:10
  • 1209

《百度前端技术学院》任务一:零基础HTML编码

点我直接访问 薛定谔的好人卡 导航——blibili 导航——百度 导航——acfun 我是一级标题!!! 我是二级标题!!! 我是三级标题!!! 我是死机标题!!! 楼上的都若爆了!...
  • c8866986
  • c8866986
  • 2016-03-16 18:01
  • 2876

百度前端技术学院(IFE)2017春-热身任务

第0关 第1关 F12后看代码,找到一串奇怪的字符,后来的同学可以直接find"text-panel" 根据后面奇怪的“==”,将这串字符用Base64解码 第2关 F12后,...
  • u012244016
  • u012244016
  • 2017-02-17 17:02
  • 1637

百度Web前端技术学院--三栏式布局

任务 使用 HTML 与 CSS 按照示例图(点击查看)实现三栏式布局。 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器。背景色为 #eee 区域的高度取决于三个子元素中最高...
  • xbmail2013
  • xbmail2013
  • 2016-04-19 00:47
  • 944

【WEB】百度前端技术学院笔记(一)

一.HTML部分1.header标签 标签定义文档的页眉(介绍信息)。 标签规定文档的主要内容。 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏...
  • WHUZXQ
  • WHUZXQ
  • 2017-08-03 23:42
  • 500

百度前端技术学院任务三--三列布局

1 百度前端任务三出现问题: 任务描述: 任务目标     - 掌握HTML/CSS布局的概念     - 掌握盒模型的概念   ...
  • l13186125825
  • l13186125825
  • 2016-04-10 16:05
  • 586

百度前端技术学院练习(部分)——常见的网页切片

要求效果图: 仿写效果图: test1 新世界 首页 最新活动 项目介绍 爱心社区 ...
  • xing_hen
  • xing_hen
  • 2016-11-18 12:47
  • 618

练习2-百度前端技术学院 - 零基础 HTML 及 CSS 编码(一)

http://www.earnfish.com/article/1494078795780 Document body{background: blac...
  • itzhengmaolin
  • itzhengmaolin
  • 2017-07-18 10:50
  • 387

百度前端技术学院任务二(有改动)-转载笔记

任务二的内容是这样的: 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上。 ht...
  • shmily__
  • shmily__
  • 2017-11-01 22:51
  • 30

百度前端技术学院,第一阶段学习笔记

个人笔记,对别人没有价值。
  • EddieEddieEddieJones
  • EddieEddieEddieJones
  • 2016-04-21 09:57
  • 523
    个人资料
    • 访问:12061次
    • 积分:361
    • 等级:
    • 排名:千里之外
    • 原创:25篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类