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 ...

随机推荐

lightoj1281快速幂+数学知识
https://vjudge.net/contest/70017#problem/E 后半部分快速幂就能求出来,要注意03lld不然001是输出错误为1.前半部分用log10() 对于给定的一个数n, ...
hdu1698线段树区间更新
题目链接:https://vjudge.net/contest/66989#problem/E 坑爹的线段树照着上一个线段树更新写的,结果发现有一个地方就是不对,找了半天,发现是延迟更新标记加错了!! ...
Java scheduled executor
A typical usage of java scheduled executor looks like this ScheduledExecutorService executor = Execu ...
String,StringBuilder,StringBuffer的对比测试
public class TestString { private static final int COUNT = 10000000; public static void main(String ...
C++高精度模板
原文地址:http://blog.csdn.net/wall_f/article/details/8373395 原文只附代码,没有解析,本文增加了一些对代码的解释. 请注意:本模板不涉及实数运算与负 ...
poj 1008
#include<iostream>#include<string> using namespace std;string hname[19] = { "pop&qu ...
JS第二弹:用Jquery组装html标签,输出到页面
用Ajax从服务端获取数据,遍历到表格中(其实将表格替换了),中间发现不能为新增的元素绑定事件,原来是没有将其作为JQ对象
java基础---->hashMap的简单分析(一)
HashMap是一种十分常用的数据结构对象,可以保存键值对.它在项目中用的比较多,今天我们就来学习一下关于它的知识. HashMap的简单使用一.hashMap的put和get方法 Map<S ...
HDU4497GCD and LMC最大公约数与最小公倍数
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4497 题目大意: 求gcd(x,y,z)=G且lcm(x,y,z)=L的方法数. 题目分析: 起初这 ...
springcloud(五)：熔断监控Hystrix Dashboard和Turbine
Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各Hystrix Command的请求响应时间, 请求成功率等数 ...

CSS3学习系列之盒样式（一）

CSS3学习系列之盒样式（一）的更多相关文章

随机推荐

热门专题