学习笔记 第十一章 CSS3布局基础

第11章   CSS3布局基础

【学习重点】

  • 了解CSS2盒模型。
  • 设计边框样式。
  • 设计边界样式。
  • 设计补白样式。
  • 了解CSS3盒模型。

11.1  CSS盒模型基础

页面中所有元素基本显示形态为方形的盒子（Box），根据盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示方式。

11.1.1 盒模型结构

Box具有如下特点：

  • 每个盒子都有：边界、边框、填充、内容4个属性。
  • 每个属性都包括4个部分：上、右、下、左。属性的四部分可以同时设置，也可以分别设置。

内容（content）时盒子里装的东西，填充（padding）是怕盒子里装的东西损坏而添加的抗震辅料，边框（border）就是盒子本身，边界（margin）是盒子与盒子之间的空隙。

网页中，内容可以是小盒子（嵌套结构），CSS盒子具有填写，里面的东西大过盒子本身最多把它撑大，但不会损坏盒子。

网页中任何元素都可以视为一个盒子。

11.1.2  定义大小

CSS盒子使用width和height定义内容区域（content）的大小。

对于一个CSS盒模型来说，它的实际宽度/高度就等于内容区域的宽度/高度加上两倍的边界、边框和补白之和。

在IE怪异解析模式下（部分浏览器也支持怪异模式，如Firefox和Opera等），CSS的width/height属性表示content、padding和border的width/height之和。

用户也可以通过下面4个属性灵活控制CSS盒模型的大小，这些属性在网页弹性布局中非常有用。

  • min-width：最小宽度；
  • max-width：最大宽度；
  • min-height：最小高度；
  • max-height：最大高度。

11.1.3 定义边框

CSS使用border定义边框样式，border包括3个子属性：border-style（边框样式）、border-color（边框颜色）和border-width（边框宽度）。

  1. 定义宽度

    1. 直接在属性后面指定宽度值。

      <style type="text/css">
border-bottom-width: 12px;
border-top-width: 0.2em;
</style>
    2. 使用关键字，如thin、medium和thick。

      <style type="text/css">
border-width: thick;
</style>
    3. 单独为元素的某条边框设置宽度。

      <style type="text/css">
border-bottom-width: 12px;
border-top-width: 0.2em;
</style>
    4. 使用border-width属性快速定义。

      <style type="text/css">
.div{
      border-width: 4px;   /*定义四边都为4px*/
}
#title{
      border-width: 2px 4px;   /*定义上下边为2px，左右边为4px*/
}
#article{
      border-width: 2px 4px 6px;   /*定义上边为2px，左右边为4px，下边为6px*/}
#ar2{
      border-width:2px 4px 6px 8px;   /*定义上边为2px，右边为4px，下边为6px，左边为8px*/}</style>

  2. 定义颜色——颜色名、RGB颜色值或16进制颜色值

  3. 定义样式

边框样式有如下几种：

      • none：默认值，无边框，不受任何指定的border-width值影响；
      • hidden：隐藏边框，IE不支持；
      • dotted：点线边框；
      • dashed：虚线边框；
      • solid：实线边框；
      • double：双线边框，两条线以及间隔宽度都等于指定的border-width值；
      • groove：根据border-color值定义3D凹槽；
      • ridge：根据border-color值定义3D凸槽；
      • inset：根据border-color值定义3D凹边；
      • outset：根据border-color值定义3D凸边。

11.1.4 定义边界

元素的边距由margin属性控制，margin定义了元素和其它相邻元素的距离。margin属性有4个子属性：margin-top、margin-right、margin-bottom和margin-left。

margin可以取负值，这样能够强迫元素偏移原来位置，实现相对定位功能。

11.1.5 定义补白

补白是用来调整元素包含的内容和元素边框的距离，由CSS的padding属性定义。

与边界margin不同补白不可以为负值。补白和边界一样都是透明的，当设置元素的背景色或边框后，才能感觉到补白的存在。

11.2  CSS3完善盒模型

CSS3改善了传统盒模型结构，增强盒子构成要素的功能，扩展了盒模型显示的方式。具体描述如下：

  • 改善结构：为盒子新增了轮廓区；
  • 增强功能：
    • 内容区增强CSS自动添加内容功能，增强内容溢出、换行功能；
    • 允许多重定义背景图、控制背景图显示方式等；
    • 增加背景图边框、多重边框、圆角边框等动能；
    • 完善margin：auto；
    • 布局特性。
  • 扩展显示：完善传统的块显示特性，增加弹性、伸缩盒显示功能，丰富网页布局手段。

11.2.1 定义显示方式

为了兼顾IE怪异模式，CSS3对盒模型进行了改善，定义了box-sizing属性，能够事先定义盒模型的尺寸解析方式。基本语法如下：

box-sizing：content-box | border-box | inherit;
  • conten-box：属性值维持CSS2.1盒模型的组成模式，元素width/height=border+padding+content。
  • border-box：属性值重新定义CSS2.1盒模型组成模式，元素width/height=content。

目前，Webkit引擎支持-webkit-box-sizing私有属性，Mozilla Gecko引擎支持-moz-box-sizing私有属性，Presto引擎和IE浏览器直接支持该属性。

11.2.2 定义元素尺寸大小

CSS3新增了resize属性，允许用户通过拖动的方式改变元素的尺寸。主要用于可以使用overflow属性的任何容器元素中。

resize: none | both | horizontal | vertical | inherit;

resize属性初始值为none，适用于所有overflow属性不为visible的元素。取值说明如下：

  • none：浏览器不提供尺寸调整机制，用户不能操纵机制调节元素的尺寸。
  • both：浏览器提供双向尺寸调整机制，允许用户调节元素的宽度和高度；
  • horizontal：浏览器提供单向水平调整机制，允许用户调节元素的宽度；
  • vertical：浏览器提供单向垂直尺寸的调整机制，允许用户调节元素的高度；
  • inherit：默认继承。

除了IE浏览器外，其他最新版本主流浏览器都允许元素的缩放，但尚未完全支持，部分仅允许双向调整。

11.2.3 溢出处理

overflow时CSS2.1规范中的特性，而overflow-x和overflow-y属性则是CSS3基础盒模型中新加入的特性。

overflow属性定义当一个块级元素的内容溢出了元素的框时，是否剪切显示。

overflow-x属性定义了对左右边（水平方向）的剪切，而overflow-y属性定义了对上下边（垂直方向）的剪切。基本语法如下：

overflow-x: visible | hidden | scroll | auto | no-display | no-content;
overflow-y: visible | hidden | scroll | auto | no-display | no-content;

overflow-x和overflow-y属性的初始值为visible，适用于非替换的块元素，或非替换的行内块元素。取值说明如下：

  • visible：不剪切内容，也不添加滚动条。元素将被剪切为包含对象的窗口大小，且clip属性设置将失效；
  • auto：在需要时剪切内容并添加滚动条。该属性为body和textarea元素的默认值；
  • hidden：不显示超出元素尺寸的内容；
  • scroll：当内容超出元素尺寸，则overflow-x显示为横向滚动条，overflow-y显示为纵向滚动条；
  • no-display：当内容超出元素尺寸，则不显示元素，此时类似添加了display:none声明；
  • no-content：当内容超出元素尺寸，则不显示内容，此时类似添加了visibility:hidden声明。

11.2.4 定义轮廓

outline属性可以定义块元素的轮廓线，该属性在CSS2.1规范中已被明确定义，CSS3增强了该特性。

在元素周围绘制一条轮廓线，可以起到突出元素的作用。基本语法如下：

outline:[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit
  • <outline-color>：定义轮廓边框颜色；
  • <outline-style>：定义轮廓边框轮廓；
  • <outline-width>：定义轮廓边框宽度；
  • <outline-offset>：定义轮廓偏移位置的数值；
  • inherit：默认继承。

11.2.5 定义轮廓样式

  1. 设置宽度——outline-width

    outline-width: thin | medium | thick | <length> | inherit;

    初始值为medium，适用于所有元素。

  2. 设置样式——outline-style

    outline-style: auto | <border-style> | inherit;

    初始值为none，适用于所有元素。

  3. 设置颜色——outline-color

    outline-color:<color> | invert | inherit;

    初始值为invert（执行颜色反转），适用于所有元素。

  4. 设置偏移——outline-offset

    outline-offset:<length> | inherit;

    初始值为0，适用于所有元素。

11.2.6 定义多色边框

border-color属性可以设置边框的颜色。不过，CSS3增强了这个属性的功能，使用它可以设置更多的颜色。基本语法如下：

border-color:<color>;

与CSS2中的border-color属性可以混合使用，当为该属性设置一个颜色值时，则表示为边框设置纯色，如果设置n个颜色值，切边框宽度为n像素，那么就可以在该边框上使用n种颜色，每种颜色显示1像素的宽度。如果边框宽度是10个像素，但是只声明了5种颜色，那么最后一个颜色将被添加到剩下的宽度。

border-color派生了4个边框颜色属性：border-top-color、border-right-color、border-bottom-color、border-left-color。

11.2.7 定义边框背景

CSS3增加了border-image属性，来模拟background-image属性功能，且功能更加强大。

border-image:none | <image> [<number> | <percentage>]{1,4}[/<border-width>{1,4}
  • none：默认值，表示边框无背景图；
  • <image>：使用绝对或相对URL地址指定边框的背景图像；
  • <number>：设置边框宽度或者边框背景图像大小，使用固定像素值表示；
  • <percentage>：设置边框背景图像大小，使用百分比表示。

CSS3将border-image分成了8个部分，使用8个子属性分别定义：border-top-image、border-right-image、border-bottom-image、border-left-image、border-top-right-image、border-top-left-image、border--bottom-left-image、border-bottom-right-image。

另外，根据边框背景图像的处理功能，border--image属性还派生了下面几个属性：

  • border-image-source：定义边框的背景图像源，即图像URL；
  • border-image-slice：定义如何裁切背景图像，与背景图像的定位功能不同；
  • border-image-repeat：定义边框背景图像的重复性；
  • border-image-width：定义边框背景图像的显示大小（即边框显示大小）；
  • border-image-outset：定义边框背景图像的偏移位置。
时间： 2024-10-12 13:18:18

学习笔记 第十一章 CSS3布局基础的相关文章

o&#39;Reill的SVG精髓（第二版）学习笔记——第十一章

第十一章:滤镜 11.1滤镜的工作原理 当SVG阅读器程序处理一个图形对象时,它会将对象呈现在位图输出设备上:在某一时刻,阅读器程序会把对象的描述信息转换为一组对应的像素,然后呈现在输出设备上.例如我们用SVG的<filter>元素指定一组操作(也称作基元,primitive),在对象的旁边显示一个模糊的投影,然后把这个滤镜附加给一个对象: <fliter id="drop-shadow"> <!-- 这是滤镜操作 --> </fliter&g

Android学习笔记—第十一章 Fragment

第十一章 Fragment android-supportV4: Android在新版本新增功能的兼容包,最低兼容1.6 路径:adt-bundle-windows-x86-20131030\sdk\extras\android\support\v4 功能:Fragment.ViewPager.视频播放 查看supportV4源代码: (1)在项目lib文件夹上new→file,文件名为android-support-v4.jar.properties (2)编辑文件内容: src=xxx:\\

Java学习笔记—第十一章 多线程机制

第十一章 Java多线程机制 了解Java中的进程与线程 1.1 进程:一般程序的结构大致可分为一个入口.一个出口和一个顺序执行的语句序列.程序运行时,系统从程序入口开始,按照语句的执行顺序(包括顺序.分支和循环)完成相应指令,然后从出口退出,程序结束.这样的结构称为进程.可以说,进程就是程序的一次动态执行的过程.一个进程既包括程序的代码,同时也包括系统的资源,如CPU.内存空间等.不同的进程所占用的系统资源都是独立的. 1.2 线程:线程是比进程更小的执行单位.一个进程在执行过程中,为了同时完

《Android面试宝典》学习笔记（第二章：布局）

如何让三个按钮以水平方向分别左对齐.居中对齐和右对齐? android:layout_gravity="left" android:layout_gravity="center_horizonal" android:layout_gravity="right" 如何获得组件的宽度和高度? 先调用view.measure方法测量组件的宽度和高度,再调用view.getMeasuredWidth和view.getMeasuredHeight(Layo

[core java学习笔记][第十一章异常断言日志调试]

第11章 异常,断言,日志,调试 处理错误 捕获异常 使用异常机制的技巧 使用断言 日志 測试技巧 GUI程序排错技巧 使用调试器 11.1 处理错误 11.1.1异常分类 都继承自Throwable类 分成Error和Exception Error类 描写叙述了Java运行时系统的内部错误和资源耗尽错误. 应用程序不应该抛出此种类型的错误.假设出现了这样的内部错误.除了通告给用户,并尽力使程序安全地终止外,再也无能为力 Exception层次结构:最需关注的 RuntimeException

《JAVA编程思想》学习笔记——第十一章 持有对象

JAVA容器类类库的用途是 "保存对象",并将其划分为两个不同的概念: 1) Collection.一个独立元素的序列,这些元素都服从一条或多条规则.List必须按照插入的顺序保存元素,而Set不能用重复元素.Queue按照排队规则来确定对象产生的顺序(通常与它们被插入的顺序相同) 2)Map.一组成对的 "键值对" 对象,允许你使用键来查找值.ArrayList允许你使用数字 Arrays.asList()方法接受一个数组或是一个用逗号分隔的元素列表(使用可变参数

学习笔记（十一）——Linux Shell 基础知识

1. shell 特性: 使用 history 命令查看命令历史: [[email protected] ~]# history 用户的 history 记录位于用户家目录下 .bash_history 文件中: [[email protected] ~]# vim ~/.bash_history 有关 history 的相关快捷操作: [[email protected] ~]# !!    //上一条命令 [[email protected] ~]# !$    //上一条命令的最后一个参数

matlab学习笔记第十一章——使用特殊函数

1.在MATLAB中,n的伽马函数可以使用下面的形式访问:x = gamma(n) 例如,Γ(6) = 5! = 120,在MATLAB检验它: >> gamma(6) ans = 120 2.要以表格显示数据,可以在行末包含单引号: >> x = (1:0.1:2)'; 3.MATLAB允许你计算不完全伽马函数(incomplete gamma function),MATLAB中用来求这个函数的命令是: y = gammainc(x,n) 当x<<1和n<<

【数据分析 R语言实战】学习笔记 第十一章 对应分析

11.2对应分析 在很多情况下,我们所关心的不仅仅是行或列变量本身,而是行变量和列变量的相互关系,这就是因子分析等方法无法解释的了.1970年法国统计学家J.P.Benzenci提出对应分析,也称关联分析.R-Q型因子分析,其是一种多元相依变量统计分析技术.它通过分析由定性变量构成的交互汇总表,来揭示同一变量各类别之间的差异,以及不同变量各类别之间的对应关系,这是一种非常好的分析调查问卷的手段. 对应分析是一种视觉化的数据分析方法,其基木思想是将一个联列表的行和列中各元素的比例结构以点的形式在较