网页布局——grid语法属性详解
grid目前兼容性目前还可以,主流浏览器对它的支持力度很大,ie9,10宣布它未来不久会对它有很好的支持,目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人员必备的布局技能。
属性介绍
1.父元素上的属性
属性 | 说明 |
---|---|
display | 设置grid布局 |
grid-template-rows | 设置网格的行数 |
grid-template-columns | 设置网格的列数 |
grid-template-areas | 根据子元素的网格名字来排列 |
grid-column-gap | 用来指定竖网格轨道的大小 |
grid-row-gap | 用来指定行网格轨道的大小 |
grid-gap | grid-column-gap和grid-row-gap这两个属性的缩写方式 |
justify-items | 网格中所有单元格中的内容在X轴的对齐方式 |
align-items | 网格中所有单元格中的内容在Y轴的对齐方式 |
justify-content | 来设置整个网格在网格容器中的X轴的排列方式 |
align-content | 来设置整个网格在网格容器中的Y轴的排列方式 |
grid-auto-columns | 设定隐藏的网格的高 |
grid-auto-rows | 设定隐藏的网格的宽 |
grid-auto-flow | 在布局的时候,选择网格填充的方法 |
2.设置子元素上的属性
属性 | 说明 |
---|---|
grid-area | 给单个子元素起名字 |
grid-column-start | 元素的位置哪跟竖线开始 |
grid-column-end | 哪跟竖线结束 |
grid-row-start | 哪跟横线开始 |
grid-row-end | 哪跟横线结束 |
grid-row | grid-row-start和grid-row-end的缩写 |
grid-column | grid-column-start和grid-column-end这两个属性的缩写方式 |
grid-area | grid-row和grid-column的缩写 |
justify-self | 设置单个子元素在其所在的小网格中的X轴排列方式 |
align-self | 设置单个子元素在其所在的小网格中的Y轴排列方式 |
align-content | 来设置整个网格在网格容器中的Y轴的排列方式 |
网页布局——grid语法属性详解的更多相关文章
- css之Grid Layout详解
css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...
- Android组件---四大布局的属性详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...
- LigerUI之Grid使用详解(三)——字典数据展示
一.问题概述 在开发web信息管理系统时,使用Web前端框架可以帮助我们快速搭建一组风格统一的界面效果,而且能够解决大多数浏览器兼容问题,提升开发效率.在关于LigerGrid的前两篇的内容里,给大家 ...
- Flex 布局——语法属性详解
前言 Flexbox 是 flexible box 的简称(注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式.它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现 ...
- css3伸缩布局中justify-content详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 弹性盒布局display:flex详解
一:弹性盒子 随着响应式设计的流行,网站开发者在设计网页布局时往往要考虑到页面在适配不同分辨率的浏览器时其内部组件位置大小都会产生变化,因此需要设计者根据窗口尺寸来调整布局,从而改变组件的尺寸和位置, ...
- CSS布局(四) float详解
一.float设计初衷 因为float被设计出来的初衷是用于--文字环绕效果.即,一个图片一段文字,图片float:left之后,文字会环绕图片. <div style="width: ...
- tkinter之grid布局管理器详解
在很久之前,我发过一篇<tkinter模块常用参数>,里面已经几乎涵盖了tkinter的大部分教程. 好吧,其实也就是上一篇而已啦. 所谓布局,就是指控制窗体容器中各个控件(组件)的位置关 ...
- Python基础=== Tkinter Grid布局管理器详解
本文转自:https://www.cnblogs.com/ruo-li-suo-yi/p/7425307.html @ 箬笠蓑衣 Grid(网格)布局管理器会将控件放置到一个二维的表 ...
随机推荐
- 爬虫 之 requests
Requests 安装pip install requests 官方设计原则:让HTTP服务于人类 一.常用方法 import requests url = "http://www.http ...
- 使用dubbo引用和发布服务时出现的异常:HTTP状态500 - 请求处理失败; 嵌套异常是com.alibaba.dubbo.rpc.RpcException:无法在服务cn.e3mall.service.ItemService中调用方法getTbItemById。使用dubbo版本2.5.3在消费者...
异常情况如下: 从异常看,主要是因为TbItem没有序列化: 分析问题: 表现层调用服务端时返回了一个TbItem对象即Java对象,此时这个对象远程调用拿过来必须进行序列化,要进行网络传输必须先要把 ...
- 使用eclipse Debug时总是被URLClassLoader这个类拦截,不能进入到要调试的类里面去
打开Debug,如图去掉前面的两个对号,重新debug即可:
- eclipse中离线安装activit插件
离线安装activiti教程: 1.先下载压缩包和jar包 链接:https://pan.baidu.com/s/1hSToZt_4A262rUxc8KToCw 密码:j5r1 2.将下载好的jars ...
- .NET框架之“小马过河”
.NET框架之"小马过河" 有许多流行的.NET框架,大家都觉得挺"重",认为很麻烦,重量级,不如其它"轻量级"框架,从而不愿意使用.面对形 ...
- linux 常用压缩、解压命令
.tar.gz 解压为 tar -zxvf xx.tar.gz 压缩为 tar -zcvf target.tar.gz ./src_dir zip 解压为 ...
- StringBulider类
StringBulider类创建的字符串同样可以对字符串进行修改: public class StringBuliderDemo { public static void main(String[] ...
- charles 高亮Hosts
本文参考:charles 高亮Hosts Focus Host是焦点域名的:这里配置好的可以在结构视图中,单独拎出来显示: 如下图,在把zhubangbang.com设为焦点域名,在视图中是下图这么展 ...
- 01:***VideoToolbox硬编码H.264
最近接触了一些视频流H264的编解码知识,之前项目使用的是FFMpeg多媒体库,利用CPU做视频的编码和解码,俗称为软编软解.该方法比较通用,但是占用CPU资源,编解码效率不高.一般系统都会提供GPU ...
- 为什么一个标准的反相器中 P 管的宽长比要比 N 管的大呢?
和载流子有关.P 管是空穴导电,而 N 管是电子导电,电子的迁移率大于空穴.所以在同样的电场下,N 管的电流要大于 P 管,因此要增大 P 管的宽长比,使之对称,这样才能使得两者上升下降时间相等.高低 ...