Mawawa CSS 学习之旅 Display
CSS 类型之 Display
更新时间: 2018-2-10;
一个良好的布局结构从 display 开始!
分类:外部值、内部值、列表值、属性值、混合值、显示值、全局值;
一、外部值
作用:主要用于容器的外部表现;因此对内部子元素不会有影响。
属性值:block,inline;
说明: block 块,独占一行。inline 内联,在同一行显示。这没啥好说的!
二、内部值
作用:主要作用于内部表现;对外部无影响;
属性值:
flow-root 该种模式内如果遇见子元素为float类型,那么父元素不会塌陷。也是解决塌陷的一种方法,高版本都支持良好。
table
- 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>)
flex
Mawawa CSS 学习之旅 Display的更多相关文章
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- CSS学习笔记:display属性
目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...
- Css3盒子模型-css学习之旅(5)
主要内容: 盒子模型内边距,外边距,边框,外边距合并 主要包括:margin(外边距)padding(内边距) border(边框)centent(内容) 内边距:padding,paddinglef ...
- css文本样式-css学习之旅(4)
color:颜色derction:方向:line-height:行高:letter-spaceing:字符间距:text-align:对齐方向:text-decoration:装饰:text-inde ...
- css3的样式讲解-css学习之旅(3)
css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- css学习之 display:inline-block;
设置display:inline-block;后的元素 就是一个格式化为行内元素的块容器( Block container ):通俗讲就是:将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内 ...
- css重构之旅
css重构之旅 >前言: 今年我大一,马上就要大二了.从高三毕业暑假到大学的这一年马上过去,马上迎来大二生活学习前端也有将近一年了.一昧去追求那些视觉的效果和相对高端和新颖的技术,反而忽略了最基 ...
- laravel学习之旅
前言:之前写了二篇YII2.0的基本mvc操作,所以,打算laravel也来这一下 *安装现在一般都用composer安装,这里就不讲述了* 一.熟悉laravel (1)如果看到下面这个页面,就说明 ...
随机推荐
- k8s 部署rabbitmq单节点
apiVersion: extensions/v1beta1 kind: Deployment metadata: annotations: fabric8.io/iconUrl: https://r ...
- linux下jdk8安装
--- 解压命令不管用 添加插件 yum install tar --- 上传命令不管用 添加插件 wget http://www.ohse.de/uwe/releases/lrzsz-0.12.20 ...
- c++常量指针和指针常量的区别
int a:int * const p = &a: //指针常量,*p可以修改*p = 8:(OK) p不可以修改 p++(ERROR) int a,b:const int *p = & ...
- MySql5.5安装详细说明
双击MySql5.5安装文件开始: next 打勾,Next 选Custom,原因如下面所述: Typical(典型安装) Installs the most common program fea ...
- 解决Visual C++ for Linux: -L"~/projects/path_to_lib_folder" 无法设置library search path的问题
最近倒腾Linux C/C++项目.以目前的情况来说,要生成编译(build)一个Linux工程脚本,首选的工具必定是CMake.这也是我之前Linux项目的首选.不过自从VS IDE支持Linux ...
- 文件6. 查找替换.txt文本文件中的内容
servlet实现对文本文件的查找替换 .jsp界面 <form> <table> <tr> <td>选择文本文件:</td> <td ...
- C++笔记之关键字explicit
在C++中,explicit关键字用来修饰类的构造函数,被修饰的构造函数的类,不能发生相应的隐式类型转换,只能以显示的方式进行类型转换. explicit使用注意事项: explicit 关键字只能用 ...
- python 游戏 —— 汉诺塔(Hanoita)
python 游戏 —— 汉诺塔(Hanoita) 一.汉诺塔问题 1. 问题来源 问题源于印度的一个古老传说,大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆 ...
- Oracle入门之对表内容的dml操作
oracle表的管理--添加数据 使用insert语句向表中插入数据 插入数据基本语法: insert into table[(column [,column...])] values(value [ ...
- SQLZOO网页中SQL的答案(SELECT from nobel篇)
SELECT from nobel篇 1. 更改查詢以顯示1950年諾貝爾獎的獎項資料. 答案: SELECT yr, subject, winner FROM nobel WHERE yr = 19 ...