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. DOM元素拖拽效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. javascript的一个简易利率计算器+js图像显示 代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. asp.net验证码的编写

    很多时候我们在登录什么网站的时候,除了需要什么用户名和密码之外,有的还需要验证码那么在asp.net中这个验证码如何编写和设计,今天我就来给大家说一下: 首先创建一个页面名字随便起一个,我们这里叫做C ...

  4. 基于pytorch实现word2vec

    一.介绍 word2vec是Google于2013年推出的开源的获取词向量word2vec的工具包.它包括了一组用于word embedding的模型,这些模型通常都是用浅层(两层)神经网络训练词向量 ...

  5. webgl自学笔记——光照

    在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型.着色器允许我们使用数学模型来控制如何照亮我们的场景. 最好有线性代数的相关知识. 本章中: 光源.法线.材料 光照和着色的区别 ...

  6. Android_65535问题的解决

    做过比较大的项目的人都知道,当app大到一定程度的时候,会出现65535这个错误,也就是64K,也就是,一个app包中,方法数不能超过65535个,超过了就要分成多个dex包,这个别问为什么,andr ...

  7. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  8. .net 爬虫框架技术选型

    个人认为爬虫框架分抓取框架和分析框架 1)抓取框架 .net 市面上好的似乎不多,选择要素分两种:1.轻量型,2.重量型. 1. 轻量型是可以定制一些特殊的功能或者插件开关形式.总体性能高,速度快. ...

  9. 移动端em与rem区别

    rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕. rem是根据html根节点来计算的,而em是继承父元素的字体.比如下面一个demo <!doctype html> ...

  10. ServerSocket简单例题

    ServerSocket 简单例题: package com.kaige123.net; /* *凯哥 */ import java.io.FileInputStream; import java.i ...