任务四：定位和居中问题

任务目标

实践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. SpringMVC 自定义全局日期转换器

    第一步: 编写自定义转换器的类 /* * 自定义日期转换器 */ public class CustomDateConverter implements Converter<String, Da ...

  2. php基础知识--2017-04-14

    1.Php的两种打开方式: 第一种方式:http://localhost/0414/qq.php 第二种:新建站点,选到www目录.点击服务器----+添加-------选择本地网络   ------ ...

  3. VS2017 Cordova Ionic2 移动开发-环境搭建

    1. 文档概述 本文档用于说明Visual Studio 2017下使用 Ionic 2进行跨平台开发的运行环境配置. 2. 安装环境 Windows10 3. 安装 Visual Studio 20 ...

  4. ValueStack

    1.把list集合压入栈顶 /** * * 查找所有的用户 * @return */ public String findAll() { List<User> allUser = user ...

  5. 使用Spring标签<form:textarea>时，用readonly=“readonly”属性时不起作用。

    最近的一个项目用到了Spring标签<form:textarea>,当在设置其只读属性时,使用readonly="readonly"不起作用,还是能修改内容. 在网上找 ...

  6. 微信开发(2)---微信小程序开发实战part1

    微信开发现在来说,简单可以概括为两部分,微信公众号和微信小程序. 微信公众号的技术已经非常成熟.分为服务号和订阅号.简单的.可以弄一个个人订阅号,在编辑模式下就可以实现推送图文.自动回复.自定义菜单的 ...

  7. ueditor .net设置步骤

    1.官网http://ueditor.baidu.com,下载ueditor的.net版本 2.把下载后的文件夹放在项目content目录下 3.页面设置,Featrue为textArea的id 4. ...

  8. 在ABP框架中使用MapTo容易犯的错误

    用自己的话说:MapTo其实就是两个实体间的数据转换.不用像以前那样p.name=p1.name 这样赋值,一旦实体的属性多到十几个以上的时候,这样赋值代码就显得有些臃肿了,如下面: Resource ...

  9. 2017百度web前端实习生在线笔试题

    代码: import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner s ...

  10. 使用wcf编写坐标字符串生成shapefile文件，在iis发布供前端调用

    项目有一需求,需要由坐标字符串(格式:x,y,点名)生成shapefile,由于在前台开发类似功能比较麻烦而且也不适用,最终决定使用WCF来实现,不借助现有GIS软件,基于GDAL实现. 实现过程如下 ...