任务四：定位和居中问题

任务目标

实践HTML/CSS布局方式

深入了解position等CSS属性

任务描述

实现如 示例图（点击打开） 的效果

灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

任务注意事项

思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。

动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考 position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。

注意测试不同情况，尤其是极端情况下的效果。

调节浏览器宽度，灰色元素始终水平居中。

调节浏览器高度，灰色元素始终垂直居中。

调节浏览器高度和宽度，黄色扇形的定位始终准确。

其他效果图中给出的标识均被正确地实现，错一项扣一分。

参考资料

HTML和CSS高级指南之二——定位详解：大漠老师手把手教你，这次彻底搞懂定位问题

Centering in CSS: A Complete Guide：完整讨论了不同情况下的居中方案，建议自己思考之后再看答案

Get HTML & CSS Tips In Your Inbox：有人写了一个作弊工具生成居中代码，但是看着代码你明白为什么吗

 <!doctype html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>task4</title>

 <style>

 *{

     margin: 0;

     padding: 0;

 }

     .dd{

         width: 400px;

         height: 200px;

         background-color:#ccc;

         position: absolute;

         left:50%;

         top:50%;

         margin-top: -100px;

         margin-left: -200px;

     /*要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。*/

     }

     .lefttop{

         background-color: #fc0;

         width: 50px;

         height: 50px;

         float: left;

         border-bottom-right-radius: 50px;

     }

     .rightbottom{

         background-color: #fc0;

         width: 50px;

         height: 50px;

         float: right;

         position: relative;

         bottom: -150px;

         border-top-left-radius: 50px;

     }

 </style>

 </head>

 <body>

 <div class="dd">

     <div class="lefttop"></div>

     <div class="rightbottom"></div>

 </div>

 </body>

 </html>

Html_Task4(知识点：水平居中+垂直居中/position/float/border-radius)的更多相关文章

  1. css 水平居中垂直居中的几种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...

  3. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  4. 图片垂直居中 和 float

    //图片垂直居中, display:table-cell; vertical-align:middle;   不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...

  5. CSS的position/float/display

    一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...

  6. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  7. css_css 盒子水平居中 垂直居中

    1.盒子垂直居中---常用3种方法 方法2: 2.盒子水平居中 3.垂直水平都居中 之前学过 1.结合上面的知识 2.flex布局可以做到 3.css3  translate  定位

  8. 007-li标签CSS水平居中垂直居中

    水平居中是text-align:center垂直居中 一般是用 line-height比如你li的高度是80px 那你设置 line-height:80px 文字就垂直居中

  9. css的position,float属性的理解

    我们知道,html是按照普通流来加载的,这个时候我们有些需求就不好实现.因此出现了非普通流: 1.普通流:按照顺序正常的排列,长度或不够就往下挤.position默认的static 2.非普通流:脱离 ...

随机推荐

  1. JavaScript基础学习(四)—Object

    一.Object的基本操作 1.对象的创建      在JavaScript中,创建对象的方式有两种:构造函数和对象字面量.      (1)构造函数 var person = new Object( ...

  2. memcached的安装以及php两个扩展软件安装（memcache、memcached）

    百度云安装包:http://pan.baidu.com/s/1pKZeDwn  k3ap 1.安装memcached Memcached是基于libevent的事件处理,所以它的安装依赖libeven ...

  3. tab栏切换，内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

  4. 关于sql语句between and的边界问题

    BETWEEN 操作符 操作符 BETWEEN ... AND 会选取介于两个值之间的数据范围.这些值可以是数值.文本或者日期. SQL BETWEEN 语法 SELECT column_name(s ...

  5. 浅谈C#抽象类

    抽象类 先说个事,一个类实例化为一个实例.就是一只狗,实例化一下,就成了一只哈士奇(具体的二哈).但是,一个动物类实例化呐,成了啥? 压根就不能实例化.这,就是抽象类的概念引入. 概念:C#允许把类和 ...

  6. MySQL Online DDL的改进与应用

        本文简析Online DDL的实现原理与使用过程注意事项.       任何DDL操作,执行者都需要预先测试或者清晰了解这个操作会给数据库带来的影响是否是在业务期间数据库的可承受范围内,尤其是 ...

  7. python之numpy的安装

    这是我第一次写博客,我的第一次打算送给python的numpy库的安装指导,这是我看到一位大神的博客后产生的启发,真是控制不住自己,必须得写一下. 第一次安装numpy浪费了我一个下午,结果还没安装好 ...

  8. 【原创】bootstrap框架的学习 第六课[bootstrap代码]

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

  9. systemtap原理及使用

    SystemTap的架构 SystemTap用于检查运行的内核的两种方法是 Kprobes和 返回探针.但是理解任何内核的最关键要素是内核的映射,它提供符号信息(比如函数.变量以及它们的地址).有了内 ...

  10. 完美实现在同一个页面中使用不同样式的artDialog样式

    偶然发现artDialog.js这个插件,就被其优雅的设计及漂亮的效果深深吸引,在做例子时碰到了一些想当然它应该提供但却没有提供的功能,不过这都不影响我对它的喜爱,下面说一下遇到的问题吧! artDi ...