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. CodeForces 618B Guess the Permutation

    只要找出当前没用过的数字中,大于或等于当前这一列的最大值就可以 #include<cstdio> #include<cstring> #include<cmath> ...

  2. Cantor表 1083

    题目描述 Description 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 - 2/1 2/ ...

  3. SQL 复习二（数据查询语言）

    1.1 数据查询语言 DQL就是数据查询语言,数据库执行DQL语句不会对数据进行改变,而是让数据库发送结果集给客户端. 语法: SELECT selection_list /*要查询的列名称*/ FR ...

  4. [iOS Animation]-CALayer 定时器动画

    定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速 ...

  5. MODBUS协议详解

    MODBUS是一个工业上通信常用的通讯协议,一般在PLC上面用的比较多,主要是定义了一种数据传输的规范,比如数据发给谁,数据是干嘛的,数据错没错,接收到数据的从机告诉我数据有没有接受到等. 传输的方式 ...

  6. java实现——007用两个栈实现队列

    import java.util.Stack; public class T007 { public static void main(String[] args) { Queue q = new Q ...

  7. UVa 495 - Fibonacci Freeze

    题目大意:计算斐波那契数列的第n项. 由于结果会很大,要用到大数.开始本来想节省空间的,就没用数组保存,结果超时了... import java.io.*; import java.util.*; i ...

  8. 在PHP语言中使用JSON

      目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它. 我写过一篇<数据类型和JSON格式>,探讨它的设计思想.今天,我想总结一下PHP语言对它的支持,这是开发 ...

  9. call的初步理解

    首先说下call的本质是一个函数 模Function.prototype.call = function(context){ // this表示某函数,函数里面的this先被替换成context,然后 ...

  10. Mysql中主从复制的原理、配置过程以及实际案例

    Mysql中主从复制的原理.配置过程以及实际案例1.什么是主从复制?原理:主从分离,什么意思呢?我们不妨画个图看看.如图1所示: 2.准备工作:预备两台服务器,我这里使用虚拟机安装了两个Centos6 ...