任务目标

  • 实践HTML/CSS布局方式
  • 深入了解position等CSS属性

任务描述

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

任务注意事项

  • 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案。
  • 动手试一试各种情况的组合,父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义,尤其是 absolute 究竟是相对谁而言的。
  • 注意测试不同情况,尤其是极端情况下的效果。
  • 调节浏览器宽度,灰色元素始终水平居中。
  • 调节浏览器高度,灰色元素始终垂直居中。
  • 调节浏览器高度和宽度,黄色扇形的定位始终准确。
  • 其他效果图中给出的标识均被正确地实现,错一项扣一分。

任务完成及总结

这次任务布局是利用position和margin负值完成,难度不是太大。唯一需要理解的就是为什么margin要设置盒子宽度一半的负值,原因就是绝对定位(position)是以盒子左上角为中心进行定位,而不是以盒子的中心进行定位。

更多的垂直居中案例请戳这里:

http://www.cnblogs.com/coco1s/p/4444383.html

http://www.myexception.cn/flex/2025243.html

小demo地址:

https://cruxf.github.io/BaiduTask/test4.html

任务四:CSS定位和居中问题的更多相关文章

  1. 5. css定位 居中

    1.准备工作 (1)添加背景图片 background: url('images/grass.png') (2)背景图片格式 background-size:contain; #完全限制在方框 #co ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性)

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  4. css布局---各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  5. css布局之居中

    CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...

  6. css中的居中问题

    前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...

  7. absoulue与relative配合定位盒子居中问题

    如何通过absoulue与relative配合把一个盒子或者是把2个div块同时放到页面中央部分?定位完成后为什么又需要margin-left与margin-top各往回走50%的长度,别忘记用z-i ...

  8. CSS定位布局

    CSS定位布局 基础知识 在CSS布局中,定位布局也是一种非常常见的技术手段,我们以京东为例: 上面是非常好的例子,对于定位布局来说它可以将一个元素放在页面上的任意一个位置. 但是定位布局也不能滥用, ...

  9. CSS定位走一波(定位学习续)

    又是新的一周过去了,时间到了,春天绿了,关于HTML5的学习进步了,今天博客更新一些CSS定位的内容,小的一些细节也要牢记,方便做一个更完美的项目. 如何让垂直方向居中,解决方式:在父元素添加over ...

随机推荐

  1. shell-006:检测80端口的存活情况

    注意细节问题,如下图所示 #!/bin/bash # 检测80端口是否存在 while : do n=`netstat -lnpt |grep ':80 ' |wc -l` if [ $n -eq ] ...

  2. Chrome浏览器如何完美实现滚动截图技巧

    一.前言 我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在屏幕上的内容,那我们该如何方便快捷截取全部内容?今天就分享一个如何利 ...

  3. 【floyd】【bitset】洛谷 P1841 [JSOI2007]重要的城市 题解

        bitset玄学完美优化复杂度? 题目描述 参加jsoi冬令营的同学最近发现,由于南航校内修路截断了原来通向计算中心的路,导致去的路程比原先增加了近一公里.而食堂门前施工虽然也截断了原来通向计 ...

  4. ACM浮点数相关的陷阱

    误差修正 因为被计算机表示浮点数的方式所限制,CPU在进行浮点数计算时会出现误差.如执行0.1 + 0.2 == 0.3结果往往为false,在四则运算中,加减法对精度的影响较小,而乘法对精度的影响更 ...

  5. windos下redis服务的后台启动

    1. 进入 DOS窗口 2. 在进入Redis的安装目录 3. 输入:redis-server --service-install redis.windows.conf --loglevel verb ...

  6. C++ GUI Qt4编程(05)-2.2GoToCell

    1. 使用Qt设计师创建GoToCell对话框. 2. gotocelldialog.cpp #include <QRegExp> #include "gotocelldialo ...

  7. js - cannot set property xxx of undefined

    for(let i=0;i<=res.data.length;i++){ res.data[i]['class'] = 'biaoqian-red'; } console.log(res.dat ...

  8. linux 命令之重定向

    linux 重定向及部分命令 一,重定向讲解: 1> 标准输出重定向 覆盖原有内容 慎用!!!!!! 1>> 标准输出追加重定向 追加内容 2> 错误输出重定向 只输出错误信息 ...

  9. Android 软件自动更新功能实现的方法

    相信所有的用户都遇到过软件提醒更新的情况,下面就将实现此功能 首先看一下程序目录结构 步骤: 1.新建一个类UpdateManger,用于显示提示更新 详细出处参考:http://www.jb51.n ...

  10. C#的split()分割字符串

    简单的说: 在C#中 str.Split("===="); //这样是错误的,只能 str.Split('=');//参数只能是char类型的,不能是字符串的 如果非得要以字符串分 ...