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. [转] 用Maven搭建多模块企业级项目

    转自:http://www.cnblogs.com/quanyongan/archive/2013/05/28/3103243.html 首先,前面几次学习已经学会了安装maven,如何创建maven ...

  2. openstack controller ha测试环境搭建记录（八）——配置nova（控制节点）

    在任一节点创建nova用户:mysql -u root -p CREATE DATABASE nova;GRANT ALL PRIVILEGES ON nova.* TO 'nova'@'localh ...

  3. Linux启动时显示Grub命令行及修改

    1.在启动Linux系统时,如果/boot/grub/grub.cfg文件损坏或者不存在时,启动Linux时,就会有Grub命令行的提示. 如下操作,将系统自带的grub.cfg文件改名.重新启动系统 ...

  4. Ubuntu和win10双系统Grup无法引导解决方案

    通常我们经常安装双系统, 但是有时候安装完系统无法正常引导, 以下就说明Ubuntu和win10双系统, win10在grub界面不断循环的解决方案 直接在win10启动项目上按e进入编辑模式 在文档 ...

  5. [Unity Shader]Shader前述

    什么是Shader   Shader,也就是着色器,它的工作就是读取你的网格并渲染在屏幕上.Shader可以定义一些属性,你会用它来影响渲染模型时所显示的效果.当存储了这些属性的设置时,就是一个Mat ...

  6. Spring自学教程-介绍、特点、框架(一)

    一.spring是什么,有什么用? 一句话:面向企业应用,使用javabean代替ejb的java应用或web开发. 侵入式的做法就是要求用户代码"知道"框架的代码,表现为用户代码 ...

  7. CKeditor使用js验证不得为空

    if (CKEDITOR.instances.TextArea1.getData() == '') { alert('警告:详细内容不得为空!'); CKEDITOR.instances.TextAr ...

  8. FZU 1054 阅读顺序

    水题,倒着输出. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm& ...

  9. 机器学习算法与实现 之 Logistic Regression---java实现

    Logistic Regression和Linear Regression实现起来几乎是一样的,有疑问的同学可以看一看Andrew N.g在coursera上的machine learning课程. ...

  10. 【转】程序员必须知道的几个Git代码托管平台

     一.VS2013中克隆远程Git仓库和SSH的配置 1.VS2013中克隆远程项目  首先感谢园友的评论和补充,今日又仔细看了一下,VS2013中是可以克隆项目的,只是我一直用的GitHub来克隆的 ...