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. vijos1010题解

    题目: 话说乾隆带着他的宰相刘罗锅和你出巡江南,被杭州城府邀请去听戏,至于什么戏,那就不知了.乾隆很高兴,撒酒与君臣共享.三更欲回住处,可是乾隆这人挺怪,他首先要到西湖边散散步,而且命令不准有人跟着他 ...

  2. 在Windows上安装Elasticsearch v5.4.2

    前言 最近项目里为了加快后台系统的搜索速度,决定接入开源的搜索引擎,于是大家都在对比较常用的几个开源做技术调研,比如Lucene+盘龙分词,Solr,还有本篇要介绍的Elasticsearch.话不多 ...

  3. OpenStack neutron 环境云主机使用keepalived vip + 给vip绑定浮动IP 步骤及注意事项

    在openstack环境创建的多台云主机配置keepalived作主备,默认情况下无法生效,直接对云主机一张网卡配置两个IP进行测试也是同样结果,因为: 可以看到,port所在的宿主机上iptable ...

  4. rsync随机启动脚本

    服务端 #!/bin/sh # chkconfig: # description: Saves and restores system entropy pool for \ #create by xi ...

  5. SpringWeb增删改查

    模型类: package com; public class Model { private int id; private String name; private String dtype; pr ...

  6. Ubuntu14.04桌面系统允许root登录

    首先安装完系统后,在登录界面我们可以看到不允许root账户登录.以普通账户登录系统,打开终端.执行如下命令来设置root密码: sudo passwd root 然后执行命令修改如下配置文件: vi ...

  7. Android - DrawerLayout

    Android DrawerLayout 的使用 Android L Android Studio 1.4 从主视图左侧能抽出一个导航栏,效果图:  点击后弹出新界面:  新界面也可以抽出左侧导航栏 ...

  8. Java多线程缓存器简单实现

    package com.charles.utils; import java.util.HashMap; import java.util.Map; import java.util.concurre ...

  9. UWP：使用Behavior实现Button点击动态效果

    废话不多说,先上效果 没有做成安卓那种圆形的原因是...人家真的不会嘛... 好了下面是正文: 首先在工程中引入Behavior的库,我们使用Nuget. 在项目->引用上点击右键,点击管理Nu ...

  10. Spring源码情操陶冶-AbstractApplicationContext#prepareBeanFactory

    阅读源码有助于陶冶情操,本文承接Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory 瞧瞧官方注释 /** * Configur ...