任务四：定位和居中问题

任务目标

实践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. 让TextView里面的文字逐个显示的动画效果实现(1)

    最近使用TextView时想要实现里面的文字逐个显示的动画效果,就如同打字一样. 主要实现思想:新建一个TextView的派生类,先将要逐个显示的字符串保存变量 mOriginalStr 中,然后启动 ...

  2. quartus ii中仿真rom时遇到的问题（待完善）

    1.modelsim仿真只支持.hex,并不支持.mif(Memory Initialzation File). 2.在Matlab中生成.mif文件,然后再quartus中打开,转换为hex格式后另 ...

  3. Sitemesh 3 配置和使用(最新)

    Sitemesh 3 配置和使用(最新) 一 Sitemesh简介 Sitemesh是一个页面装饰器,可以快速的创建有统一外观Web应用 -- 导航 加 布局 的统一方案~ Sitemesh可以拦截任 ...

  4. sql中如何分割字符串

    使用方式: SELECT AllItem AS BldGUID  FROM dbo.fn_split('01.02.03','.') 函数:   GO )) )) --实现split功能 的函数 as ...

  5. 【转】JDBC学习笔记(6)——获取自动生成的主键值&处理Blob&数据库事务处理

    转自:http://www.cnblogs.com/ysw-go/ 获取数据库自动生成的主键 我们这里只是为了了解具体的实现步骤:我们在插入数据的时候,经常会需要获取我们插入的这一行数据对应的主键值. ...

  6. 【转载】 stm32之PWM

    发现这位博主的博客被大量的转发,我也转载一篇,谁叫人家写的好呢. 原文地址:http://blog.sina.com.cn/s/blog_49cb42490100s6uh.html 脉冲宽度调制(PW ...

  7. 关于Java中String类的hashCode方法

    首先来看一下String中hashCode方法的实现源码 public int hashCode() { int h = hash; if (h == 0 && value.lengt ...

  8. CF #Manthan, Codefest 16 C. Spy Syndrome 2 Trie

    题目链接:http://codeforces.com/problemset/problem/633/C 大意就是给个字典和一个字符串,求一个用字典中的单词恰好构成字符串的匹配. 比赛的时候是用AC自动 ...

  9. 开发Angular库的简单指导（译）

    1. 最近工作上用到Angular,需要查阅一些英文资料,虽然英文非常烂,但是种种原因又不得不硬着头皮上,只是每次看英文都很费力,因此决定将一些比较重要的特别是需要反复阅读的资料翻译一下,以节约再次阅 ...

  10. Vue+axios 实现http拦截及路由拦截

    现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...