1、css3的display属性:
　　inline:内联
　　inline-block:可以设置宽高的内联
　　block:设置为块:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css3盒子类型</title>

    <style>

        /*inline:内联，inline-block:可以设置宽高的内联,*/

        p{

            /*此处设置宽高无用*/

            background: #999999;

            display: inline;

            width:200px;

        }

        span{

            background: #fff000;

            display: inline-block;

            width:200px;

        }

    </style>

</head>

<body>

<p>这是一段测试文字</p>

<p>这是一段测试文字</p>

<span>这是一段测试文字</span>

<span>这是一段测试文字</span>

</body>

</html>

inline-table:内联表格:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>line-table属性</title>

    <style>

        /*inline-table:内联表格*/

        table{

            border: 2px solid #999;

            display: inline-table;

        }

        table td{

            border: 2px solid rebeccapurple;

        }

    </style>

</head>

<body>

我是上面文字

<table>

    <tr>

        <td>单元1</td>

        <td>单元1</td>

        <td>单元1</td>

    </tr>

    <tr>

        <td>单元1</td>

        <td>单元1</td>

        <td>单元1</td>

    </tr>

    <tr>

        <td>单元1</td>

        <td>单元1</td>

        <td>单元1</td>

    </tr>

</table>

我是下面文字

</body>

</html>

list-item:把元素设置为列表项:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>list-item属性</title>

    <style>

        /*list-item:把元素设为列表项。可设置列表项样式*/

        div{

            display: list-item;

            list-style-type: circle;

            margin-left:50px;

        }

    </style>

</head>

<body>

<div>我是一段测试文字</div>

<div>我是一段测试文字</div>

<div>我是一段测试文字</div>

</body>

</html>

2、盒子的大小计算方式:box-sizing属性：

border-box:此情况下设置的宽高为整个盒子(包含padding)的宽高;

content-box:此情况下设置的宽高为盒子内容(不包含padding)的宽高;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>盒子的box-sizing属性</title>

    <style>

        /*下面两个div宽高此情况下是一样的，*/

        #div1{

            box-sizing: border-box;

            width:240px;

            height:240px;

            padding:20px;

            background: #fff000;

        }

        #div2{

            box-sizing: content-box;

            width:200px;

            height:200px;

            padding:20px;

            background: #00ff00;

        }

    </style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>

</html>
 

css3盒子相关样式的更多相关文章

  1. css盒子模型 css3盒子相关样式

    1.内边距(内边距在content外,边框内) 内边距属性: padding          设置所有边距 padding-bottom     底边距 padding-left           ...

  2. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  3. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...

  4. CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）

    CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...

  5. css文字与文本相关样式

    css文字属性定义文本的字体系列,大小,加粗,风格和变形   font-family          设置字体系列 font-size          设置字体的尺寸 font-style     ...

  6. 前端开发CSS3——文本样式和盒子及样式

    博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome:     http://fontaw ...

  7. CSS自学笔记（10）:CSS3盒子模型

    CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

  8. CSS3 Backgrounds相关介绍

    CSS3 Backgrounds相关介绍 1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认 ...

  9. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

随机推荐

  1. Mybatis(七) mybatis的逆向工程的配置详解

    还是觉得看书学习有意思~嘿嘿.今天把mybatis给结束掉. --WH 一.什么是逆向工程? 简单点说,就是通过数据库中的单表,自动生成java代码. Mybatis官方提供了逆向工程,可以针对单表自 ...

  2. 利用fputcsv导出数据备份数据

    今天,分享一个利用fputcsv导出数据备份数据的方法,我也时看到些零零散散的代码,想着拼起来,所以我只提供些思路,以及简单的代码,至于怎么组合能够让它更强大,尽情去探索吧 讲之前先上一段获取数据库里 ...

  3. mysql生成百万级数量测试数据

    今天因为项目需要,想测试一下读取百万级数量数据的速度如何,无奈数据库没有现成符合要求的数据,网上百度一番有很都不错的文章,但是需要涉及到一些存储过程和用php代码什么的,虽说可以实现,但是感觉另外再弄 ...

  4. 【菜鸟入门】安装配置eclipse 并编写运行第一个Java程序

    不得不吐槽一下,安装配置这eclipse真是太费劲了...下面总结一下,以便下次再安装 本人 win10系统,64位机 一.在官网下载eclipse安装包 文件名:eclipse-inst-win64 ...

  5. Sql for Oracle基本操作关键字

    Sql for Oracle基本操作关键字 +SQL TOP子句 TOP 子句用于规定要返回的记录的数目 SELECT column_name(s) FROM table_name WHERE ROW ...

  6. iOS图解多线程

    前言 多线程一直是iOS开发中重中之重的话题,无论是面试还是真正在公司中进行业务开发,都会经常使用到多线程来开发.笔者在简书上看到一张图,记录的是多线程的相关知识,笔者认为这是非常好的,推荐给大家: ...

  7. Css元素居中设置

    你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...

  8. 前端javascript中字符串的总结

    1.截取方法 截取字符串的abcdefg中的efg. 注意:str.length从1的开始数 var str="abcdefg"; (1).slice() : console.lo ...

  9. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

  10. 【原创】09. easyui-tabs 配合 iframe 使用，请求两次等问题

    描述 需要把已经做好的几个设备管理页面.转为子菜单管理:直接使用 easyui-tabs 配合 iframe 是最省时省力的. 存在问题 当点击 "设备管理" 会出现子页面多次加载 ...