获取新技能 ----dispaly: tabel
刚才在总结自适应布局的时候,灵光一现,好像记得哪位大佬提过 display: tabel 这个布局,然后就去查了一下资料,进行了学习,现在简单总结一下。
说白了就是可以给HTML元素指定与表格相关的display属性值,使得它们像表格元素那样渲染。以下是这些可用的display属性值:
table 使该元素按table样式渲染
table-row 使该元素按tr样式渲染
table-cell 使该元素按td样式渲染
table-row-group 使该元素按tbody样式渲染
table-header-group 使该元素按thead样式渲染
table-footer-group 使该元素按tfoot样式渲染
table-caption 使该元素按caption样式渲染
table-column 使该元素按col样式渲染
table-column-group 使该元素按colgroup样式渲染
table-layout将table-layout 属性设置为fixed可以让浏览器按照固定算法来渲染单元格的宽度。这在固定宽度布局中非常有用,例如我们最上面的那段布局代码。
Border-collapse 和普通的HTML表格一样,你可以使用border-collapse属性来定义你的table布局元素之间使用何种形式的边框,是共用边框(赋值为collapse)还是使用各自独立的边框(赋值为separate)。
Border-spacing 如果你声明了“border-collapse:separate;”,那么你就可以使用border-spacing属性来定义相邻两个单元格边框间的距离。
下面则是我测试的自适应和等高布局的应用:
//这是html 代码 <div class="b_box">
<div class="box">
<div class="left"></div>
<div class="center">
网购了这么多年,这是我第一次这么认真的对待。我怀着忐忑的心情拿着手机盯着屏幕,迟迟不敢下手。我怕我一旦说出来,老板会觉得我在拍马屁,是不是想为了那几块钱的红包,又怕我的评价会误导后来的网友。为了写这次评价,我鼓起勇气喝了3瓶啤酒才有信心。记得第一次喝酒还是对初恋表白的那天,今天又是同样的心情,拼了,为了不辜负老板对我的期望,我一定会客观,公正,如实的写下自己的评价:这是我这开心的一次网购,谢谢!!!
</div>
</div>
//这是 css 代码
.b_box {
display: table;
margin-top: 30px;
} .box {
display: table-row;
} .left {
width: 200px;
background-color: #f3777b;
display: table-cell;
} .center {
background-color: aquamarine;
//这个就是自适应的宽度
}
获取新技能 ----dispaly: tabel的更多相关文章
- 5332盛照宗 如何获取新技能+c语言学习调查
如何获取新技能+c语言学习调查 你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...
- 20155332 如何获取新技能+c语言学习调查
如何获取新技能+c语言学习调查 你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...
- 腾讯优测干货精选| 安卓开发新技能Get -常用必备小工具汇总
文/腾讯公司 陈江峰 优测小优有话说: 移动研发及测试干货哪里找?腾讯优测-优社区你值得拥有~ 开发同学们都知道,安卓开发路上会碰到很多艰难险阻,一不小心就被KO.这时候,没有新技能傍身怎么行?今天我 ...
- [站点推荐]001.学习新技能的37个最佳网站(The 37 Best Websites To Learn Something New)
忘了过于褒奖的学校.整天呆在拥挤的教室而效果却差得可怜.这些网站和应用涵盖了科学.艺术和技术的无数话题.它们可以教会你实践练习任何技能,从制作豆 沙到用 node.js 开发 app,而且它们都是免费 ...
- selenium-webdriver循环点击百度搜索结果以及获取新页面的handler
webdriver还是很有意思的,之前用过Ruby的watir的自动化测试框架,感觉selenium的这套框架更好一些,很容易就可以上手.我虽然不做自动化这块,不过先玩玩再说,多学点东西总之还是好一些 ...
- Windows下查看自己电脑的网关mac以及手动获取新的地址
场景:正在上班时,工作电脑突然无法连接网络了.查看配置发现DNS服务器地址被分配到了192.168.1.1,瞬间懵了? 过程:(1)进入cmd.使用ipconfig /all查看网关地址; (2)使用 ...
- selenium获取新页面标签页(只弹出一个新页面的切换)
selenium获取新页面标签页(只弹出一个新页面的切换) windows = driver.current_window_handle #定位当前页面句柄 all_handles = driver. ...
- 【ABAP系列】SAP ABAP 控制ALV单元格编辑后获取新的数值
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 控制ALV单元 ...
- 用户登录成功后重新获取新的Session
HttpSession session = request.getSession(); // 用来存储原sessionde的值 ConcurrentHash ...
随机推荐
- 剑指offer:左旋转字符串
题目描述: 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”ab ...
- implement a list using Rust
Rust果然比較複雜,在經歷了n次compile fail,終于寫成了一個 list 難點: 對Rc<>的用法不熟悉.對borrow checker不夠熟悉 有些寫法可能還不是最短的 us ...
- Redis 操作帮助类
首先从Nuget中添加StackExchange.Redis包 1.Redis连接对象管理帮助类 using Mvc.Base; using Mvc.Base.Log; using StackExch ...
- 本机安装了oracle,本机还需要安装客户端吗?
转: 本机安装了oracle,本机还需要安装客户端吗? 2017-09-21 15:56:29 Ideality_hunter 阅读数 4681 版权声明:本文为博主原创文章,遵循CC 4.0 B ...
- SEO前端篇(二)关键词
首先要SEO的关键词最好放在网站首页index,并且网站域名选用顶级域名,最好是.com.现在很多后缀的域名不能备案,选择域名的时候一定要慎重. 域名解析的主机IP最好选择站点资源少的区域,可以用 爱 ...
- flex布局大全 2019
有句话叫做:存在即是合理. 最近很喜欢flex布局模式,不过还在摸索中,这里正一边在项目中使用和总结,也在学习一些大牛们总结的东西和布局思考. 鉴于自己很苦恼,到处去ha资料,真的,就没有一个系统的, ...
- [LeetCode] 256. Paint House 粉刷房子
There are a row of n houses, each house can be painted with one of the three colors: red, blue or gr ...
- [LeetCode] 59. Spiral Matrix II 螺旋矩阵 II
Given an integer n, generate a square matrix filled with elements from 1 to n^2 in spiral order. For ...
- [LeetCode] 291. Word Pattern II 词语模式 II
Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...
- python:使用多线程同时执行多个函数
使用多线程同时执行多个函数 import time import os import threading def open_calc(): with open('test.txt', 'r') as ...