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. 生成R文件

    aapt package -f -m -J H:/workspaces/java_android/Test2/gen -S H:/workspaces/java_android/Test2/res - ...

  2. FreeRTOS代码剖析

    FreeRTOS代码剖析之1:内存管理Heap_1.c   FreeRTOS代码剖析之2:内存管理Heap_2.c   FreeRTOS(V8.0.1)系统之xTaskGenericCreate() ...

  3. Cocos2dx 3.1.1 学习笔记整理(2):创建场景与载入图片

    把之前用2.2.3的代码迁移到3.1.1真是个蛋疼的工作,话说3.1.1做的改动还真是大啊. 可以在HelloWorldScene.cpp中看到,之前的各种CCXXX都被废弃了. 例如,新建一个CCL ...

  4. GIT使用规范流程

    1:每次开发新功能时,都应该新建立一个独立的分支(branch),整个项目工程有且只有一个主分支(master branch),项目发版时是从主分支上发布. Step01:切换到主分支 $ git c ...

  5. CodeForces 652B z-sort

    先对序列排个序. 例如:1 2 3 4 5 6 7 我们把序列分成两半,前一半是1 2 3 4,后一半是5 6 7 然后,我们从前一半取最小的一个,再从后一半取最小的一个..一直操作下去就能构造出答案 ...

  6. iOS开发——打电话

    1.调用 自带mail [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://55522555 ...

  7. 通过div模拟table

    参考: https://css-tricks.com/complete-guide-table-element/ 不要使用内联样式,但只是为了了解这里是如何去: <section style=& ...

  8. VMWare虚拟机启动报错物理内存不足

    尝试了三种修改 1.说是微软补丁KB2995388冲突-->>失败 2.修改win8.1高级环境性能更改设置-->>失败 3.修改config.ini文件-->>成 ...

  9. MongoDB和Java-PHP

    一.java操作mongoDB 配置环境: 1.下mongodb JDBC驱动mongo-java-driver-3.2.2.jar,并包含在classpath中 步骤: 1.连接数据库 // 连接到 ...

  10. jdk8 之 java.time包AND DateUtils

    package com.jansh.comm.util; import java.time.Clock; import java.time.LocalDate; import java.time.Lo ...