1、盒子的类型

在CSS3中，使用display来定义盒子的类型，包括block，inline，inline-block类型。div元素和P元素，属于block类型，span元素和a元素，属于inline类型。

 <head>
    <style>
         /*div默认是block类型，span默认是inline类型，以下通过display，将它们的类型反过来了*/
         div{
             background-color: red;
             display:inline;
         }
         span{
             background-color: green;
             display:block;
         }
 </style>
 </head>
 <body>
     <div>div元素</div>
     <div>div元素</div>
     <br>

     <span>span元素</span>
     <span>span元素</span>
     <br>
 </body>
 <head>
 <style>
         /*inline元素是无法设置宽度的，如果要设置宽度，则类型需要变成inline-block类型*/
         #div1{
             background-color: gold;
             display: inline-block;
             width:300px;
         }
 </style>
 </head>
 <body>
     <div id="div1">inline-block属性</div>
 </body>
 <head>
 <style>
         div{
             /*加了以下display，div会变成列表的展现*/
             display: list-item;
             list-style-type:circle;
             margin-left:30px;
         }
 </style>
 </head>
 <body>
     <div>示例1</div>
     <div>示例2</div>
     <div>示例3</div>
     <div>示例4</div>
 </body>

2、对盒子中，容纳不下的内容的显示

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         div{
             /*hidden:会将显示不下的文字隐藏*/
             /*scroll添加滚动条*/
             /*overflow: scroll;*/

             /*overflow-x,overflow-y指定单边的样式*/
             overflow-x:hidden;
             overflow-y: scroll ;
             width: 300px;
             height: 150px;
             border:solid 1px orange;
             /*以下属性禁止换行*/
             /*white-space: nowrap;*/
         }
     </style>
 </head>
 <body>
         <div>
         <h1>标题文字</h1>
         <p>文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例</p>
         <p>文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例</p>
         </div>
 </body>
 </html>

3、对盒子使用阴影

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         div{
             background-color: aqua;
             /*参数：水平方向阴影，垂直方向阴影，模糊程度，阴影颜色*/
             box-shadow: 10px 10px 10px gold;
             width:200px;
             height: 100px;
         }
     </style>
 </head>
 <body>
     <div></div>
 </body>
 </html>

指定针对元素宽度和高度的计算方法：

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         #div1{
             /*宽度包含在盒子的边框中*/
             box-sizing: border-box;
             width: 100px;
             height:100px;
             padding: 10px;
             background-color: gold;
             margin:100px;
         }
         #div2{
             /*宽度不包括在盒子的边框中，所以盒子看起来更大*/
             box-sizing: content-box;
             width: 100px;
             height:100px;
             padding: 10px;
             background-color: gold;
         }
     </style>
 </head>
 <body>
     <div id="div1"></div>
     <div id="div2"></div>
 </body>
 </html>

[CSS3] 学习笔记-CSS3盒子样式的更多相关文章

  1. [CSS3] 学习笔记--CSS盒子模型

    1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...

  2. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  3. [CSS3] 学习笔记-CSS3选择器详解（一）

    1.属性选择器 在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> ...

  4. [CSS3] 学习笔记-CSS3常用操作

    1.对齐操作 使用margin属性进行水平对齐:使用position进行左右对齐:使用float属性进行左右对齐. <!doctype html> <html> <hea ...

  5. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  6. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  7. 微信小程序开发：学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

  8. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  9. 十天精通CSS3学习笔记 part1

    http://www.imooc.com/learn/33 第1章 初识CSS3 什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主 ...

随机推荐

  1. $.when().done().then()的用法

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. ...

  2. JVM线程安全

    一.线程的调度方式 线程调度分为两种方式: 协同式调度和抢占式调度.协同式调度:线程的执行时间由线程本身控制,线程将工作执行完之后,通知操作系统切换到其他线程上.缺点:时间不可控,就算出问题,也不会通 ...

  3. ie6,ie7兼容性总结

    摘自: http://www.cnblogs.com/li0803/archive/2009/08/22/1552094.html 其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致 ...

  4. FMDB的一些基本操作小结

    http://blog.csdn.net/iunion/article/details/7204625 仅供自己记录使用, h文件 #import <Foundation/Foundation. ...

  5. iOS开发——Reachability和AFNetworking判断网络连接状态

    一.Reachability // 监听网络状态改变的通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selec ...

  6. iOS开发者的福利 — — iOS9+Xcode7免越狱免证书直接调试

    苹果发布Xcode7后, 开放了普通的AppleID也能真机调试( 非$99 或 $299, 只要能上AppStore下载应用的AppleID就行),下面教你具体做法,很简单的. 1.运行Xcode, ...

  7. BZOJ 1257 [CQOI2007]余数之和sum ——Dirichlet积

    [题目分析] 卷积很好玩啊. [代码] #include <cstdio> #include <cstring> #include <cmath> #include ...

  8. 微信小程序之----navigator页面跳转

    navigator navigator跳转页面样式分为两种一种是左上角带返回按钮跳转到新的页面,另一种不带即在本页跳转,通过控制redirect属性 .js <view> <navi ...

  9. Node.js timer的优化故事

    前几天nodejs发布了新版本4.0,其中涉及到一个更新比较多的模块,那就是下面要介绍的timer模块. timers: Improved timer performance from porting ...

  10. Python知识小点（备注）

    (1)if __name__ == '__main__': 的作用是让后面的代码只有文件被作为程序执行时才有效,作为库加载时不执行