html4水平居中,Html_Task4(知识点：水平居中+垂直居中/position/float/border-radius)

任务四：定位和居中问题

任务目标

实践HTML/CSS布局方式

深入了解position等CSS属性

任务描述

实现如 示例图(点击打开) 的效果

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

任务注意事项

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

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

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

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

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

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

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

参考资料

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

task4

*{

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;

}

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

图片垂直居中 和 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.非普通流:脱离 ...

随机推荐

fedora自带OpenJDK，所以如果安装官方的JDK的话要先删除OpenJDK

1:rpm -qa|grep jdk 查看当前的jdk情况. 2:yum -y remove java java-1.7.0-openjdk* 卸载openjdk,这个过程中因为依赖原因可能会卸载一些 ...

【BFS】POJ 3414

直达 -> POJ 3414 Pots 相似题联动–>HDU 1495 非常可乐 题意:两个壶倒水,三种操作,两个桶其中一个满足等于C的最少操作,输出路径.注意a,b互倒的时候能不能倒满, ...

posix 消息队列

注意 在涉及到posix消息的函数时, gcc 编译时要加-lrt参数, 如 gcc -lrt unpipc.c mqpack.c send.c -o send gcc -lrt unpipc.c m ...

phaser源码解析(一) Phaser.Utils类下shuffle方法

/** * #一个 基于 费雪耶茨排列 洗牌方法 * A standard Fisher-Yates Array shuffle implementation. * @method Phaser.Ut ...

iOS开发之property属性介绍

大家都知道@property和@synthesize可以自动生成某个类成员变量的存取方法,但可能对property中的一些属性不是很了解,网上的一些介绍有的不是很正确,感觉会误导新手,于是准备详细介绍 ...

Linux(CentOS)安装配置zeromq、jzmq(解决各种问题)

今天为Hadoop配置zeromq.jzmq遇到各种问题,先是编译出错,到编译成功后测试出错等等,下面将我遇到的问题与大家分享一下. 第一个注意点是:必须先编译安装zeromq,然后在编译jzmq,否 ...

Socket通信流程

Socket通信流程 HTTP 底层就是通过socket建立连接通信管道,实现数据传输 HTTP是一个TCP的传输协议(方式),它是一个可靠,安全的协议

【JavaScript学习】-事件响应，让网页交互

什么是事件: JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单 ...

即时通信系统Openfire分析之五：会话管理

什么是会话? A拨了B的电话 电话接通 A问道:Are you OK? B回复:I have a bug! A挂了电话 这整个过程就是会话. 会话(Session)是一个客户与服务器之间的不中断的请求 ...

微信小程序echarts层级太高

项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和 ...