百度前端学院_小薇课堂_task

小薇课堂Task_4

在做这个任务前课参考这篇文章

任务目标

实践HTML/CSS布局方式
深入了解position等CSS属性

任务描述

实现如示例图（点击打开）的效果
灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

任务注意事项

思考不同情况下（如灰色高度是根据内容动态变化的）水平垂直居中的解决方案。
动手试一试各种情况的组合，父元素和子元素分别取不同的 position 值。思考position 属性各种取值的真正含义，尤其是 absolute 究竟是相对谁而言的。
注意测试不同情况，尤其是极端情况下的效果。
调节浏览器宽度，灰色元素始终水平居中。
调节浏览器高度，灰色元素始终垂直居中。
调节浏览器高度和宽度，黄色扇形的定位始终准确。

源码与效果图

效果图

源码

总结

用到了一种水平居中的方式

margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

浏览器兼容性：
Chrome,Firefox, Safari, Mobile Safari, IE8-10.
优点
- 支持跨浏览器，包括IE8-IE10.
- 无需其他特殊标记，CSS代码量少
- 支持百分比%属性值和min-/max-属性
- 只用这一个类可实现任何内容块居中
- 不论是否设置padding都可居中（在不使用box-sizing属性的前提下）
- 内容块可以被重绘。
- 完美支持图片居中。
缺点：
- 必须声明高度（查看可变高度Variable Height）。
- 建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。
- 在Windows Phone设备上不起作用。

`position`

relative属性，相对于自己之前在标准流中的位置移动
absolute属性，它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素

CSS网页布局方式–浮动流、定位流

百度前端学院_task_1

百度前端学院_task_2

百度前端学院_task_3

百度前端学院_小薇课堂_task_4相关推荐

百度前端学院_小薇课堂_task2
任务目的针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法能够基于设计稿来合理规划HTML文档结构理解语义化,合理地使用HTML标签来构建页面掌握基本的 ...
百度前端学院_小薇课堂_task_5
小薇课堂_task_5 任务目的针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法能够基于设计稿来合理规划HTML文档结构理解语义化,合理地使用HTML标 ...
百度前端学院_小薇课堂_task3
文末会附上任务三实现效果图.源码以及学习资料任务目标掌握HTML/CSS布局的概念掌握盒模型的概念掌握position与float的概念以及在布局时的用法任务描述使用 HTML 与 CSS ...
百度前端学院_小薇课堂_task_1
任务一目的了解HTML的定义,概念.发展简史掌握常用html标签的含义.用法能够基于设计稿来合理规划html文档结构理解语义化,合理地使用html标签来构建页面任务注意事项参考示例图只需 ...
【百度前端学院学习笔记】Day9 圣杯布局和双飞翼布局
[百度前端学院学习笔记]Day9 圣杯布局和双飞翼布局圣杯布局(古老而费解的方法) 双飞翼布局(圣杯的改进) 参考资料: In search of the Holy Grail - A list a ...
【百度前端学院学习笔记】Day6 浮动/BFC
[百度前端学院学习笔记]Day6 浮动/BFC 一.什么是浮动? 二.普通流 / 浮动 / 绝对定位三.BFC/Flow Root 3.1 什么是BFC? 3.2 BFC 的特性 3.2.1 特性一 ...
当当elastic-job docker快速部署_[小Z课堂]－docker 快速部署 elasticsearch 和 kibana，一键部署...
各位小伙伴,小Z课堂来袭,每天只需看三分钟,你就能用docker 快速部署各种环境.今天就用docker 来部署 elasticsearch 和 kibana.docker的入门请上度娘学习,这里直接 ...
百度前端学院小薇学院task7笔记
1.纯css拉菜单默认样式 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
百度for android v5.0,小冰冰传奇百度版下载_小冰冰传奇安卓版下载v5.0.137_3DM手游...
<小冰冰传奇百度版>游戏的前身为火爆的手游<刀塔传奇>,由于一些问题而不得不改名,并且对游戏内的大量角色和原型都做了一定的改动.该游戏继承了<刀塔传奇>的基本玩法 ...

百度前端学院_小薇课堂_task_4

小薇课堂Task_4

任务目标

任务描述

任务注意事项

源码与效果图

效果图

源码

总结

`position`

CSS网页布局方式–浮动流、定位流

百度前端学院_task_1

百度前端学院_task_2

百度前端学院_task_3

百度前端学院_小薇课堂_task_4相关推荐

最新文章

热门文章