【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的更多相关文章

  1. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  2. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  3. 装载：对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  4. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  5. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  6. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  7. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  8. 对CSS中的Position属性的一些深入探讨

    转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...

  9. 细说css中的position属性

    有过css开发经验的同学,对于position这个属性一定不会陌生,然而这个熟悉的属性确是面试题中的常客,也就说明了该属性在css的世界是有一定的江湖地位的,那么我们就来详细的说说position这个 ...

随机推荐

  1. 配置tomcat、nginx实现反向代理（需操作）

    配置tomcat.nginx实现反向代理现在我想通过nginx访问tomcat 这就要我们去修改nginx的核心配置文件,在其目录下的conf文件夹下的nginx.conf文件,那么首先我们就要了解该 ...

  2. nodejs常用模块

    推荐的入门教程: <七天学会NodeJS>  https://github.com/nqdeng/7-days-nodejs <Node.js 包教不包会> https://g ...

  3. 13.swoole学习笔记--DNS查询

    <?php //执行DNS查询 swoole_async_dns_lookup("www.baidu.com",function($host,$ip){ echo $ip; ...

  4. 【SQL必知必会笔记(1)】数据库基础、SQL、MySQL8.0.16下数据库、表的创建及数据插入

    文章目录 1.数据库基础 1.1 数据库(database) 1.2 表(table) 1.3 列和数据类型 1.4 行 1.5 主键 2.什么是SQL 3.创建后续练习所需数据库.表(MySQL8. ...

  5. JAVA-数据类型-复习

    JAVA-数据类型-复习 Java中,一共有8种数据类型,4种整型,2种浮点型,1种用于表示Unicode编码的字符单元的字符类型char,1种布尔类型. 整型 类型 存储需求(字节)一个字节包含8个 ...

  6. 实验吧-密码学-他的情书(进一步了解js代码调试和console.log)

    打开网站,在白色背景下的任一点上点击鼠标,白色部分都会消失(包括password输入框),那么就无法输入. 查看源码,发现是明显的从源码解决问题. 火狐F12查看器查看源码(如果是简单的操作,可以vi ...

  7. javaweb历史上最简单的使用Ajax判断用户名是否被注册（不跳转页面奥！）

    关于前端: 使用jquery-3.3.1.js记得要导入奥---最后我会附加我的源码的 哎我也不多说了新手加菜鸟jquery真的不太懂!看代码吧!个别地方我会写上我对本程序的理解. 关于后台也就是se ...

  8. Python LMDB的使用

    在python中使用lmdb linux中,可以使用指令 pip install lmdb 安装lmdb包. ---- lmdb 数据库文件生成 增 改 删 查 1.生成一个空的lmdb数据库文件 # ...

  9. softmax、交叉熵

    Softmax是用于分类过程,用来实现多分类的 它把一些输出的神经元映射到(0-1)之间的实数,并且归一化保证和为1,从而使得多分类的概率之和也刚好为1. Softmax可以分为soft和max,ma ...

  10. 前端ajax用post方式提交json数据给后端时，网络报错 415

    项目框架:spring+springmvc+mybatis 问题描述:前端ajax用post方式提交json数据给后端时,网络报错 415 前端异常信息:Failed to load resource ...