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. 原生封装ajax

    01.声明一个全局变量 02.开始封装,判断参数 03.属性的var自定义 04.请求 01.请求行 02.请求头 03.请求发送 05.响应 01.事件监听onreadystatechange 02 ...

  2. 005.Getting started with ASP.NET Core MVC and Visual Studio -- 【VS开发asp.net core mvc 入门】

    Getting started with ASP.NET Core MVC and Visual Studio VS开发asp.net core mvc 入门 2017-3-7 2 分钟阅读时长 本文 ...

  3. QQ空间魔力日志大全SduSRZ

    大家好~最近,在QQ空间里出现了一种神奇的日志,谁看显示谁的信息,在个人中心显示的是一张图片,在日志里显示的又是另一张图片.这就是传说中的魔力日志.魔力日志从今年的9月份开始盛行,因为具有谁看就针对谁 ...

  4. 自动化运维—tomcat服务起停（mysql+shell+django+bootstrap+jquery）

    项目简介: 项目介绍:自动化运维是未来的趋势,最近学了不少东西,正好通过这个小项目把这些学的东西串起来,练练手. 基础架构: 服务器端:web框架-Django 前端:html css jQuery ...

  5. Jsp运行环境——Tomcat

    JSP JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它[1] 是由Sun Microsystems公司倡导.许多公司参与一起建立的 ...

  6. JVM学习笔记二：垃圾收集算法

    垃圾回收要解决的问题: 哪些内存需要回收? 线程私有区域不需要回收,如PC.Stack.Native Stack:Java 堆和方法区需要 什么时候回收? 以后的文章解答 如何回收? 首先进行对象存活 ...

  7. Spring-mybatis没有了XXXmapper.java和Dao的实现类还有Service的实现类

    对于刚学过框架的同学可能知道,mybatis有两种主要的配置文件: SqlMapConfig.xml(mybatis全局配置文件,名称不固定,用来配置运行环境(数据源.事务) XXXmapper.xm ...

  8. NLPIR大数据挖掘平台新增敏感词扫描功能

    在网络日益发达的现在,也伴随着有益信息与造成不稳定因素的信息也随之日益泛滥,为了网民的思想健康,也为了社会的和谐,在许多对外公共场合下,有些内容是要经过审查才能显示的.在网络审查初期,都是通过人工审核 ...

  9. Jersey实现Restful服务

    jersey 是基于Java的一个轻量级RESTful风格的Web Services框架.以下我基于IDEA实现Restful完整Demo. 1.创建maven-web工程,后面就是正常的maven工 ...

  10. web 前端路线