CSS中的 position与Grid Layout
【1】CSS之Position（定位布局）：
现css常用的属性有5种：
1、static
2、absolute
3、fixed
4、relative
5、sticky.
1、static
表示元素的默认值，没有具体定位，出现在文档流的正常位置，
也不会受top, bottom, left, right的影响。
2、absolute
表示元素的绝对定位，但也有相对位置，相对于最近的父元素，
可以通过top, bottom, left, right属性进行定位。
3、fixed
表示相对于浏览器的窗口是固定位置的，浏览器滑动时，元素不会移动。
4、relative
表示元素的相对位置，是相对其正常位置，可以通过top, bottom, left, righ
t属性进行相对位置的规定，且元素位移的参照处是元素边界的左上角。
5、sticky
表示元素的粘性定位，当元素相对于窗口的位置处于窗口中时，
粘性定位表现得同relative或absolute，当该元素因页面滚动而相对于
窗口的位置离开了窗口时，粘性定位将表现得同fixed一致，固定在某一位置。
【2】CSS之Grid Layout（网格布局）
grid布局的核心思想是，用横线和竖线将目标元素分成大小各异的格子，
再指明子元素在横向和纵向上的起始点，将子元素的内容填充到某个单元格或几个单元格中。
类似于Excel表格，网络布局可以将窗口界面分割成不同的空间，
定义他们的大小、位置以及层级。
下面是代码及效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
* {margin: 0;padding: 0;}
html,body {width: 100%;height: 100%;}
.container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% 25% 25% 25%;
}
.item {
background-color: #444;
color: #fff;
font-size:150%;
padding: 80px;
margin: 2%;
}
.item-1 {
grid-column:1 / 5;
grid-row: 1 / 2;
}
.item-2 {
grid-column:1 / 2;
grid-row: 2 / 5;
}
.item-3 {
grid-column: 2 / 4;
grid-row: 2 / 5;
}
.item-4 {
grid-column: 4 / 5;
grid-row: 2 / 5;
</style>
</head>
<body> <div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div> </div> </body>
</html>
CSS中的 position与Grid Layout的更多相关文章
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- 装载：对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- 关于css中的position定位
希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- 理解css中的position属性
理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 细说css中的position属性
有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...
随机推荐
- 二十九、SAP中输出漂亮的表格
一.代码如下 二.输出效果如下 *&---------------------------------------------------------------------* *& ...
- 131-PHP子类可以访问父类public修饰的类成员
<?php class father{ //定义father类 public function cook(){ return '烹饪'; } } class son extends father ...
- crontab 实现Linux系统上定时任务的关键命令
附上原文链接 https://www.cnblogs.com/ftl1012/p/crontab.html 原文真是写得非常好,所谓他山之石可以攻玉~,我就不客气啦,哈哈
- React全局浮窗、对话框
下面代码是组件源码: import React, {Component} from 'react' import {createPortal} from 'react-dom' import styl ...
- UVA - 10539 Almost Prime Numbers （几乎是素数）
题意:输入两个正整数L.U(L<=U<1012),统计区间[L,U]的整数中有多少个数满足:它本身不是素数,但只有一个素因子. 分析: 1.满足条件的数是素数的倍数. 2.枚举所有的素数, ...
- UVA - 11925 Generating Permutations（生成排列）（构造）
题意:将序列1,2,3,……,n,用不超过2n^2次操作,通过下列操作变成给定序列.(1<=n<=300) 1.交换前两个元素 2.将第一个元素移到最后 分析:因为将序列变成升序更容易操作 ...
- 【Java Spring 进阶之路 】1.Spring 是什么？
- Vulkan SDK 之 Instance
上一篇 Vulkan SDK Demo 熟悉 粗略的了解了下,一个app是如何调用vulkan的api来展示一个立方体的,但是对其中的每一个api了解并不深刻,后面的系列会根据sample的tutor ...
- 专题复习--背包问题+例题（HDU 2602 、POJ 2063、 POJ 1787、 UVA 674 、UVA 147）
*注 虽然没什么人看我的博客但我还是要认认真真写给自己看 背包问题应用场景给定 n 种物品和一个背包.物品 i 的重量是 w i ,其价值为 v i ,背包的容量为C.应该如何选择装入背包中的物品,使 ...
- kuangbin专题——简单搜索
A - 棋盘问题 POJ - 1321 题意 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大 ...