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.非普通流:脱离 ...
随机推荐
- linux常用20命令 --转载
玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...
- 初识JS
今儿我遇到一特别恐怖的事儿,JS 刚开始的我看到JS感觉是懵逼的,翻开第一页,感觉是棒棒哒,再看第二页,感觉是easy的,看到第三页是恐怖的,当看到的第四页的时候,我感觉今年的清明节是为我准备的 废话 ...
- Linux - 进程间通信 - 命名管道
1.命名管道的特点: (1)是管道,可用于非血缘关系的进程间的通信 (2)使用命名管道时,梁金成需要用路径表示通道. (3)命名管道以FIFO的文件形式存储于文件系统中.(FIFO:总是按照先进先出的 ...
- Linux - PCB之task_struct结构体
task_struct结构描述 1. 进程状态(State) 进程执行时,它会根据具体情况改变状态 .进程状态是调度和对换的依据.Linux中的进程主要有如下状态,如表4.1所示. 内核表示 含义 ...
- MyBatis-plus 代码自动生成器
MyBatis-plus 代码自动生成器 1.添加pom文件依赖 <!-- Mybatis-Plus 自动生成实体类--> <dependency> <groupId& ...
- 作死上CODEVS，青铜题
题面:输入一列整数,输出它们的总和.最大值.最小值.并从大到小输出. 先上一波伪代码,认真地做一波数组排序题. #include<stdio.h> #include<math.h&g ...
- C++STL中map容器的说明和使用技巧(杂谈)
1.map简介 map是一类关联式容器.它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响.对于迭代器来说,可以修改实值,而不能修改key. 2.map的功能 自 ...
- 安装hexo报错（npm WARN deprecated swig@1.4.2: This package is no longer maintained），已解决
问题:在使用npm安装hexo时报错 $ npm install -g hexo npm WARN deprecated swig@1.4.2: This package is no longer m ...
- RocketMQ与Kafka对比
转自:https://github.com/alibaba/RocketMQ/wiki/rmq_vs_kafka 淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用MySQL作为消息存 ...
- 【2017-05-05】timer控件、三级联动、帐号激活权限设置
一.Timer控件 Timer实际就是一个线程控件. 属性:Enabled 是否被启用 Interval 多长时间执行一次控件中的代码 事件: Tick 事件中放要执行的代码. ...