[css display],table待续
昨天复习了flex布局,今天打算继续,才发现有display:table,今天有的点,别的先写上,其他的后补吧
css display
// none 此元素不会被显示。
// block 此元素将显示为块级元素,此元素前后会带有换行符。
// inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
// inline-block 行内块元素。(CSS2.1 新增的值)
// list-item 此元素会作为列表显示。单独使用会将元素变成块元素
// inherit 规定应该从父元素继承 display 属性的值。
// run-in 此元素会根据上下文作为块级元素或内联元素显示。
//★兼容问题现在还未普及,放弃研究,可以用 vertical-align 替代
//参考:http://www.zhangxinxu.com/wordpress/2012/03/tip-css-multiline-display/
// https://q.cnblogs.com/q/67758/
// https://css-tricks.com/run-in/ //table这的抛砖引玉吧,今天特懒,留着记录吧
//参考
//http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/
//http://www.jianshu.com/p/700ede25d0bc
//https://www.cnblogs.com/guoyong-feng/p/6076058.html // table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
// inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
// table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
// table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
// table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
// table-row 此元素会作为一个表格行显示(类似 <tr>)。
// table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
// table-column 此元素会作为一个单元格列显示(类似 <col>)
// table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
// table-caption 此元素会作为一个表格标题显示(类似 <caption>)
简单试 list-item 和 inherit
<!--display:list-item-->
<!--还可以使用list-style-->
<span style="display:list-item;list-style: square inside">aaaa</span>
<span style="display:list-item;">bbbb</span>
<span style="list-style: square inside">这个就不能用list-style</span>
<span style="display:list-item;list-style: square inside">dddd</span> <!--display:inherit-->
<span>
父span
<div style="display:inherit">
div
</div>
</span>
这里的 list-style 以前也不知道今天补习吧
//顺便补充list-style
//有4个属性值
//list-style-type //参考http://www.runoob.com/cssref/pr-list-style-type.html
//list-style-position //inside outside(默认)
//list-style-image //可用url(" ")传址
//inherit //ie8及+
[css display],table待续的更多相关文章
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- css display table使用小例子实验
display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...
- css display:table圣杯布局
圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...
- 基于CSS属性display:table的表格布局的使用
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...
- [转]基于display:table的CSS布局
当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...
- css Table布局:基于display:table的CSS布局
两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
- CSS:display:table
使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle; <!DOCTYPE html> <html l ...
- CSS display使用
.今天我们来分析一下display的一些用法,display样式在我们整个CSS设置中,非常重要,掌握好display,才能有效的解决CSS布局的问题,在理解display之前,我们先了解两个概念:块 ...
- VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table
一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...
随机推荐
- 【开发者portal在线开发插件系列五】命令的响应,即命令结果的上报(mid的使用)
基础篇 [开发者portal在线开发插件系列一]profile和基本上下行消息 [开发者portal在线开发插件系列二]多条上下行消息(messageId的使用) 基础场景见上面两个帖子,这里单独介绍 ...
- OC 与js 互相调用
参考文章 iOS开发-基于原生JS与OC方法互相调用并传值(附HTML代码) 参考文章 http://www.jianshu.com/p/fd378c6d70c0 利用苹果原生的JavaScriptC ...
- JS中的运算符_函数学习
js中的运算符: 算数运算符: + - * / % ++ -- 逻辑运算符: & | ! && || < > <= ...
- CF 1136A 1136B 1136C 1136D 1136E(Round546ABCDE)题解
题目地址:https://codeforces.com/contest/1136 A: Nastya Is Reading a Book 题解:挨个判断即可,水题. 参考代码: #include< ...
- 学好linux必须精通用户管理的章节知识
第12章 Linux中用户知识管理 12.1 系统开机启动流程 12.1.1 centos6系统开机启动流程 12.1.1.1 开机系统流程语言描述 服务器电源开关打开 bios自检 目的:检查硬件是 ...
- 大数据学习笔记——Hadoop编程之SequenceFile
SequenceFile(Hadoop序列文件)基础知识与应用 上篇编程实战系列中本人介绍了基本的使用HDFS进行文件读写的方法,这一篇将承接上篇重点整理一下SequenceFile的相关知识及应用 ...
- 小白的springboot之路(十)、全局异常处理
0.前言 任何系统,我们不会傻傻的在每一个地方进行异常捕获和处理,整个系统一般我们会在一个的地方统一进行异常处理,spring boot全局异常处理很简单: 介绍前先说点题外话,我们现在开发系统,都是 ...
- 【Visual Studio Code】插件
[Visual Studio Code]插件 转载:https://www.cnblogs.com/yangchongxing/p/10625628.html 目录 ================= ...
- Winform DataGridView控件数据导出EXcel
/// <summary> /// 导出Excel /// </summary> /// <param name="dgv"></para ...
- cd ..、cd / 和 cd ~ 的区别
cd ..是回到上一级目录 cd . 是当前目录 cd / 是回到根目录 cd ~ 回到用户主目录