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.非普通流:脱离 ...
随机推荐
- 我的iOS-App
1.PocketConfidential(密保箱) 简介 保存账号密码等敏感信息. 应用技术: sqlite.sqlcipher加密.AES数据加密.GCD https://itunes.apple. ...
- 线上分享会.net框架“ABP”分享会总结
前言 为了能够帮助.Net开发者开拓视野,更好的把最新的技术应用到工作中,我在3月底受邀到如鹏网.net训练营直播间为各位学弟学妹们进行ABP框架的直播分享.同时为了让更多的.NET开发者了解ABP框 ...
- day001-html知识点总结（-）块级。行内元素区分
-.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...
- 20155304 实验一《Java开发环境的熟悉》实验报告
20155304 实验一实验报告 实验一 Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA编译.编译.运行.调试Java程序. 实验步骤 (一)命令行下 ...
- Java线程池ThreadPoolExecutor使用和分析(三) - 终止线程池原理
相关文章目录: Java线程池ThreadPoolExecutor使用和分析(一) Java线程池ThreadPoolExecutor使用和分析(二) - execute()原理 Java线程池Thr ...
- JS中substring与substr的区别
Substring: 该方法可以有一个参数也可以有两个参数. (1) 一个参数: 示例: var str=“Olive”: str.substring(3); 结果:“ve” 说明:当substri ...
- css系列：input的placeholder在safari下设置行高失效
在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI ...
- Named function expressions demystified
Introduction Surprisingly, a topic of named function expressions doesn't seem to be covered well eno ...
- Spring Cloud搭建微服务架构----前言
前言 微服务并不神秘,只是在互联网技术发展过程中的一个产物,整个架构系统随着客户端的多样性,服务越来越多,devops的发展而产生的架构变种. 许多公司,通过采用微处理结构模式解决单体应用的问题,分解 ...
- framework7+node+mongo项目
Famework7还是一个不错的前端框架 不过这个小项目做下来确实踩了不少的坑 废话不多说上干货 项目代码:https://github.com/tsxylhs/framework7