CSS3学习系列之盒样式（一）
- 盒的基本类型
在css中，使用display属性来定义盒的类型，总体上来说，css中的盒分为block类型与inline类型
- inline-block类型
inline-block类型是在css2.1中追加的一个盒类型，属于block类型的一种，但是显示时它具有inline类型盒的特点，例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>inline-block类型div元素的示例</title>
<style>
div.inlineblock{
display:inline-block;
background-color: #00aaff;
width: 300px;
}
div.inline{
display: inline;
background-color: #00ff00;
width: 300px;
}
</style>
</head>
<body>
<div>
<div class="inlineblock">inline-block类型</div>
<div class="inlineblock">inline-block类型</div>
</div>
<div>
<div class="inline">inline类型</div>
<div class="inline">inline类型</div>
</div>
</body>
</html>
- 使用inline-block类型来执行行分列显示
在css2.1之前，如果需要在一行中并列显示多个block类型的元素，则需要使用float属性或position属性，但这样会使样式变得比较复杂，因此在css2.1中，追加了inline-block类型。例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将div元素并列显示示例</title>
<style>
div#a, div#b {
display: inline-block;
width: 200px;
} div#a {
background-color: #0088ff;
} div#b {
background-color: #00ccff;
} div#c {
width: 400px;
background-color: #ffff00;
}
</style>
</head>
<body>
<div id="a">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
<div id="b">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>
<div id="c">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
</body>
</html>
- 使用inline-block来先水平菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用inline-block类型实现水平菜单的示例</title>
<style>
ul {
margin: 0;
padding: 0;
} li {
display: inline-block;
width: 100px;
padding: 10px 0;
background-color: #00ccff;
border: solid 1px #666666;
text-align: center;
} a {
color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</body>
</html>
- inline-table类型
table元素属于block类型，所以不能与其他文字处于同一行中，但是如果将table元素修改成inline-table类型，就可以让表格与其他文字处于同一行中了。
- list-item类型
如果在display属性中将元素的类型设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list-item类型使用示例</title>
<style>
div {
display: list-item;
list-style-type: circle;
margin-left: 30px;
}
</style>
</head>
<body>
<ul>
<div>示例div1</div>
<div>示例div2</div>
<div>示例div3</div>
<div>示例div4</div>
</ul>
</body>
</html>
- run-in类型与compact类型
将元素指定为run-in类型或compact类型的时候，如果元素后面还有block类型的元素，run-in类型的元素将被包含在block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边。谷歌还不支持例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>run-in类型与compact类型使用示例</title>
<style>
dl#runin dt{
display: run-in;
border: solid 2px red;
}
dl#compact dt{
display: compact;
border: solid 2px red;
}
dd{
margin-left: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<dl id="runin">
<dt>名词一</dt>
<dd>关于"名词一"的名词解释</dd>
</dl>
<dl id="compact">
<dt>名词二</dt>
<dd>关于名词二的解释</dd>
</dl>
</ul>
</body>
</html>
- 表格相关的类型
CSS3中所有表格相关的元素对应的display的类型值：
|
元素 |
所属类型 |
说明 |
|
table |
table |
代表整个表格 |
|
table |
Inline-table |
代表整个表格，可以被指定为table类型或inline-table类型 |
|
tr |
table-row |
代表表格中的一行 |
|
td |
table-cell |
代表表格中的单元格 |
|
th |
table-cell |
代表表格中的列标题 |
|
tbody |
table-row-group |
代表表格中所有行 |
|
thead |
table-header-group |
代表表格中的表头部分 |
|
tfoot |
table-footer-group |
代表表格中的脚注部分 |
|
col |
table-column |
代表表格中的一列 |
|
colgroup |
table-column-group |
代表表格中所有列 |
|
caption |
table-caption |
代表整个表格的标题 |
完整例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 3中完整表格的构成示例</title>
<style>
.table {
display: table;
border: solid 3px #00aaff;
} .caption {
display: table-caption;
text-align: center;
}
.tr{
display: table-row;
}
.td{
display: table-cell;
border:solid 2px #aaff00;
}
.thead{
display: table-header-group;
background-color: #ffffaa;
}
</style>
</head>
<body>
<div class="table">
<div class="caption">字母表</div>
<div class="thead">
<div class="td">1st</div>
<div class="td">2nd</div>
<div class="td">3rd</div>
<div class="td">4th</div>
<div class="td">5th</div>
</div>
<div class="tr">
<div class="td">A</div>
<div class="td">B</div>
<div class="td">C</div>
<div class="td">D</div>
<div class="td">E</div>
</div>
<div class="tr">
<div class="td">F</div>
<div class="td">G</div>
<div class="td">H</div>
<div class="td">I</div>
<div class="td">J</div>
</div>
</div>
</body>
</html>
CSS3学习系列之盒样式（一）的更多相关文章
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之布局样式（二）
使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...
- CSS3学习系列之背景相关样式（一）
新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...
- CSS3学习系列之背景相关样式（二）
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
- CSS3学习系列之布局样式（一）
多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...
- [CSS3]学习笔记-CSS基本样式讲解
1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（二）
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
随机推荐
- ionic创建项目遇到的各种问题
前提:执行创建语句的前提是ionic环境已经装好,开始执行ionic start myApp blank. 提示已经有同名项目,是否覆盖.这里创建的是一个blank(空) 的ionic项目.还要两种是 ...
- IOS开发常见错误
. 问题表现:什么情况?方法居然无法拉线? 问题简述:ios的空间拉线到一个.h .m文件中 居然多次拖动无效.. 问题解决:ios的空间响应单单在代码中创建一个方法是没用的,这个时候通常跟空间是没有 ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- centos mysql5.7 二进制包安装
此种方式安装非常简单 cd /usr/local 下载安装包wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.17-linux- ...
- kotlin， 一种新的android平台一级开发语言
最近看到一则科技新闻, 大致内容是google将kotlin语言作为android应用开发的一级语言, 与java并驾齐驱, 这是一个开发界的大事件大新闻, 连google的亲儿子go语言也没有这种待 ...
- javaScript 设计模式系列之一：观察者模式
介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...
- CopyOnWriteArrayList实现原理及源码分析
CopyOnWriteArrayList是Java并发包中提供的一个并发容器,它是个线程安全且读操作无锁的ArrayList,写操作则通过创建底层数组的新副本来实现,是一种读写分离的并发策略,我们也可 ...
- Day5模块-random模块
random:随机数 >>> import random>>> print(random.random()) #生成随机小数0.6906362176182085 & ...
- 入坑以来最清晰的this指南[老哥们来交流指正]
直接放有道云笔记的链接,博客园的markdown总是用不好. 1.这一篇是this的绑定(call,apply,bind) http://note.youdao.com/noteshare?id=c3 ...
- vue+vux+axios+vuex+vue-router的项目的理解
本文主要是讲解项目前期的工作,后期考虑再详细说明. 作为一个技术团队如果你们团队选择了上面的技术栈,这说明你们的技术团体对于vue有很熟练的掌握了.在这里我想说明的是前期架构的重要.这里有一遍博客写的 ...