Html_Task4(知识点：水平居中+垂直居中/position/float/border-radius)
任务四：定位和居中问题
任务目标
实践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)的更多相关文章
- css 水平居中垂直居中的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两 ...
- CSS水平居中/垂直居中的N个方法
我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...
- 图片垂直居中 和 float
//图片垂直居中, display:table-cell; vertical-align:middle; 不能和 css (float)元素共存,可以在元素外面多加一个层 css .th-left ...
- CSS的position/float/display
一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...
- 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
- css_css 盒子水平居中 垂直居中
1.盒子垂直居中---常用3种方法 方法2: 2.盒子水平居中 3.垂直水平都居中 之前学过 1.结合上面的知识 2.flex布局可以做到 3.css3 translate 定位
- 007-li标签CSS水平居中垂直居中
水平居中是text-align:center垂直居中 一般是用 line-height比如你li的高度是80px 那你设置 line-height:80px 文字就垂直居中
- css的position,float属性的理解
我们知道,html是按照普通流来加载的,这个时候我们有些需求就不好实现.因此出现了非普通流: 1.普通流:按照顺序正常的排列,长度或不够就往下挤.position默认的static 2.非普通流:脱离 ...
随机推荐
- WPF 截屏软件开发
最近由于工程需要开始研发基于Windows的自动录屏软件,很多细节很多功能需要处理,毕竟一个完美的录屏软件不是你随随便便就可以写出来的.首先参考了大部分的录屏软件,在研发的过程中遇到了很多的问题:比如 ...
- java 基础知识五 数组
java 基础知识五 数组 数组保存的是一组有顺序的.具有相同类型的数据. 同一个数组中所有数据元素的数据类型都是相同的. 可以通过数组下标来访问数组,数据元素根据下标的顺序,在内存中按顺序存放 ...
- 通过修改CoreCLR中的ClrHost实现自托管程序
上一篇我们讲了如何在windows和Linux上编译CoreClr的问题 虽然文章使用的是windows 10 (Bash)环境,但是也可以做为ubuntu环境的参考. 成功编译CoreCLR的源代码 ...
- oracle实现like多关键字查询
oracle实现like多关键字查询: select * from contract_info tt where 1=1 and REGEXP_LIKE(tt.contract_name,'关键字1| ...
- 利用 Forcing InnoDB Recovery 特性解决 MySQL 重启失败的问题
小明同学在本机上安装了 MySQL 5.7.17 配合项目进行开发,并且已经有了一部分重要数据.某天小明在开发的时候,需要出去一趟就直接把电脑关掉了,没有让 MySQL 正常关闭,重启 MySQL 的 ...
- Swift中枚举的总结以及使用
枚举定义了一组具有相关性的数据,是开发者可以再带吗中以一个安全的方式来使用这些值,以又助于提供代码的可读性. 在Swift中,枚举可以分成两种:任意类型的枚举和指定类型的枚举,结构如下: //任意类型 ...
- StringBuilder的实现
先看看MS给出的官方解释吧 (http://msdn.microsoft.com/zh-cn/library/system.text.stringbuilder(VS.80).aspx) String ...
- MySQL数据库主从同步配置
主服务器必须打开开二进制日志. 主要是修改配置文件 , 一般在 linux 下安装的 mysql 配置文件是 my.cnf, 在 windwos 下是 my.ini, 修改主服务器配置文件 serve ...
- border-raduis 在IE8中的兼容性问题
border-raduis 是css3新增加的属性,我们运用起来也很方便,效果很好,但是在IE8以及之前的ie版本并不支持这个属性,怎么解决这个问题呢? 1.切成背景 这也是我经常用到的方法,虽然说有 ...
- EzHttp 使用Https协议时证书如何部署
今天为EzHttp增加了https支持, EzHttp介绍见这里:使用EzHttp框架 开发基于HTTP协议的CS轻应用 服务端启动时会创建自签名证书,并将其绑定到启动参数url对应的端口上. 服务端 ...