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. Unity-奥义技能背景变黑效果

    [旧博客转移 - 2016年8月29日 12:51 ] 前段时间做了一个放技能的时候,背景缓慢变黑,放完后再变回来的效果,可以很好的突出技能特效的感觉. 算是一种屏幕后期特效,这个特效说难不难,说简单 ...

  2. JavaScript中闭包实现的私有属性的getter()和setter()方法

    注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  3. java 使用spring实现读写分离

    最近上线的项目中数据库数据已经临近饱和,最大的一张表数据已经接近3000W,百万数据的表也有几张,项目要求读数据(select)时间不能超过0.05秒,但实际情况已经不符合要求,explain建立索引 ...

  4. MySQL IO线程及相关参数调优

    一.关于一个SQL的简单的工作过程 1.工作前提描述 1.启动MySQL,在内存中分配一个大空间innodb_buffer_pool(其中log_buffer) 2.多用户线程连接MySQL,从内存分 ...

  5. VMware虚拟机下Ubuntu连不上网解决

    虚拟机:VMware® Workstation 12 Pro Ubuntu: 14.04 问题描述:电脑从公司拿到家打开Ubuntu之后,打开自带Firefox浏览器,显示连接不上网,终端下ping ...

  6. 第一章：火狐浏览器 ： 环境配置： FireFox 版本38 + jdk 7 + selenium 2.53.6 + selenum-version 2.48.2

    配置一套完整的 selenium + Java + Firefox38  环境: 1. 火狐浏览器的版本 : 38 2. JDK 安装 1.7 版本的 3. 安装 Python 的版本是 2.7 4. ...

  7. 了解Java并学会创建Java项目（一个菜鸟的成长历程）

    计算机语言分类:了解 1)低级语言:更接近于计算机的语言 1.1)机器语言:由0和1组成的 1.2)汇编语言:有一些助记符号2)高级语言:更接近于人的语言 2.1)面向过程的:C... 2.2)面向对 ...

  8. React 实践项目 （五）

    React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架.而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! React 实践项目 (一 ...

  9. <EffectiveJava>读书笔记--02泛型数组

    1, java中可以申明泛型类型的数组引用; 2, 但是不能实例化一个泛型数组对象; 3, 针对第二点, 可以曲线救国, 实例化一个Object数组, 再进行类型强转; 见代码如下: public c ...

  10. 微服务（二）hystrix

    特性 1.延迟和失败容忍 防止级联错误,错误回退,优雅降级.快速失败和恢复 线程和信号量隔离 2.实时监控和配置更改 3.并发 并行执行,请求缓存,自动批处理失败请求 总运行流程 当你发出请求后,hy ...