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. php单元测试到底是什么东西呢?

    前言: 真正写php代码也有3年时间了,勉强算是一个php程序员, 但是,心底却一直没有底气. 都说测试驱动开发,可我连程序开发中什么是单元测试?这种基本的程序员的素养都 还不是很清楚,痛定思痛,决定 ...

  2. 51nod1138(math)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1138 题意:中文题诶- 思路:假设 x=a1+(a1+1)+ ...

  3. Linux系统目录

    [root@localhost ~]# ls /bin dev home lost+found misc opt root selinux sys usrboot etc lib media net ...

  4. iOS中正则表达式的三种使用方式

    1.利用NSPredicate(谓词)匹配 例如匹配有效邮箱: NSString *email = @“nijino_saki@163.com”: NSString *regex = @"[ ...

  5. vs2012中的小技巧2

    vs代码前面出现.......,解决方法是:点击菜单编辑——高级——查看空白

  6. collectionviewcell 添加删除按钮 响应区域的问题

    在collectionviewcell 的右上角添加了一个删除按钮,但是发现只有cell和删除按钮重合的区域才会响应点击事件 后来doctor 李说这是iOS 事件响应链的机制(http://www. ...

  7. BZOJ2733 [HNOI2012]永无乡 【线段树合并】

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  8. js设置文本框只能输入数字

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

  9. UVa 11059 最大乘积

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  10. Java Spring MVC项目搭建(二)——项目配置

    1.站点配置文件web.xml 每一个Spring MVC 项目都必须有一个站点配置文件web.xml,他的主要功能吗....有一位大哥已经整理的很好,我借来了,大家看看: 引用博客地址: http: ...