CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式。

  改善结构:为盒子新增轮廓区;

  增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除、换行处理;允许多重定义背景图,控制背景图显示方式等;增加背景图边框,多重边框,圆角边框等功能;完善 margin:auto;布局特性;

  扩展显示:完善传统的块显示特性,增加弹性,伸缩盒显示功能,丰富网页布局手段。

一、定义显示方式

  CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。

  语法格式

  1. box-sizing: content-box | border-box | inherit;

  可以分成两种情况:

  1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持 W3C 的标准Box Model

  2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

  注:上面的标注的width指的是CSS属性里设置的width: length,content的值是会自动调整的。

二、定义元素尺寸大小(放置拖拽元素)

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

  语法格式:

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

  Tips:resize 属性初始值为 none,适用于所有 overflow 属性不为 visibile 的元素。

三、溢出处理

  overflow 是 CSS2 中规范的特性,CSS3 在盒模型新加入 overflow-x 和 overflow-y 的特性。

  overflow-x:定义了左右边(水平方向)的剪切。

  overflow-y:定义了上下边(垂直方向)的剪切。

  语法格式:

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

四、定义轮廓

  outline 属性定义块元素的轮廓线,在 CSS2 中被定义,但是没有获取广泛支持,CSS3 增强了该特性。

  outline 是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

  语法格式:

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

  Tips:outline 属性创建的轮廓线是画在一个框“上面”,轮廓线总是在顶上,不会影响该框或任何其他框的尺寸。所有,显示或不显示不会影响文档流,也不会影响布局。

  1、设置颜色

    outline-color属性可以单独设置轮廓线的颜色。

    语法格式:

  1. outline-color: <color> | invert | inherit;
    •    <color>:可以是颜色名或者十六进制;
    • invert:执行颜色反正(逆向的颜色)。可以确保轮廓线在不同的背景颜色中都是可见的;
    • inherit:默认继承。

  2、设置样式

    outline-style 属性可以设置轮廓线的样式。

    语法格式:

  1. outline-style: auto | <border-style> | inherit;
    •     auto:根据浏览器自动设置;
    • <border-style>:采用边框的样式;
    • inherit:默认继承。
    • none:初始值。

  3、设置宽度

    outline-width 属性可以单独设置轮廓线的宽度。

    语法格式:

  1. outline-width:thin | medium | thick | <length> | inherit;
    • thin:定义细轮廓;
    • medium:定义中等的轮廓;(默认值)
    • thick:定义粗的轮廓;
    • <length>:定义轮廓粗细的值;
    • inherit:默认继承。

    Tips:只有当轮廓样式不是 none 时,该属性才会起作用。

  4、设置偏移

    outline-offset 属性可以单独设置轮廓线的偏移位置。

    语法格式:

  1. outline-offset:<length> | inherit;
    •   <length>:定义轮廓距离容器的值;
    • inherit:默认继承。

五、定义多色边框

  border-color 属性可以设置边框的颜色。CSS3 中使用该属性可以设置更多的颜色。

  语法格式:

  1. border-color:<color>;

  CSS3 在这个属性上派生了4个边框颜色属性:

  1. birder-top-color: 定义指定元素顶部边框的色彩。
  2. birder-right-color: 定义指定元素右侧边框的色彩。
  3. birder-bottom-color: 定义指定元素底部边框的色彩。
  4. birder-left-color: 定义指定元素左侧边框的色彩。

  Tips: 目前仅有 MOzilla Gecko 引擎支持 -moz-border-color 私有属性。

六、定义边框背景

  border-image 属性来模拟 background-image 属性功能。

  语法格式:

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

  Tips:该属性适用于所有元素,除了 border-collapse 属性值为 collapse 的 table 元素。

  派生子属性1:

  1. border-top-image: 定义顶部边框背景图像。
  2. border-right-image: 定义右侧边框背景图像。
  3. border-bottom-image: 定义底部边框背景图像。
  4. border-left-image: 定义左侧边框背景图像。
  5. border-top-left-image: 定义左上角边框背景图像。
  6. border-top-right-image: 定义右上角边框背景图像。
  7. border-bottom-right-image: 定义右下角边框背景图像。
  8. border-bottom-left-image: 定义左下角边框背景图像。

  派生子属性2:

  1. border-image-source: 定义边框的背景图像源,即图像 URL;
  2. border-image-slice: 定义如何裁剪背景图像,与背景图像的定位功能不同;
  3. border-image-repeat: 定义边框被图像的重复性;
  4. border-image-width: 定义边框背景图像的显示大小(即边框显示大小);
  5. border-image-outset: 定义边框背景图像的偏移位置;

  Tips:webkit 引擎支持 -webkit-border-image 私有属性,Mozilla Gocko 引擎支持 -moz-border-image 私有属性; Presto 引擎支持 -o-border-image 私有属性。IE 浏览器暂时不支持 border-image 属性,也没有定义私有属性。

CSS3 完善盒模型的更多相关文章

  1. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  2. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  3. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  4. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  5. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  6. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  7. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. CSS3使用盒模型实现三栏布局

    本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...

  9. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

随机推荐

  1. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于(WIFI模块AT指令TCP透传方式),定时访问升级

    前言 学习此代码所需: 实现功能概要 定时使用http访问云端的程序版本,如果版本不一致,然后通过http下载最新的升级文件,实现升级. 测试准备工作(默认访问我的服务器,改为自己的服务器,请看后面说 ...

  2. [PHP] PHP汉字转拼音的方法

    PHP汉字转拼音的方法 代码如下: <?php // 此类是依据ASCII码转换,GB2312库对多音字也无能为力. // GB2312标准共收录6763个汉字,不在范围内的汉字是无法转换,如: ...

  3. 从零和使用mxnet实现线性回归

    1.线性回归从零实现 from mxnet import ndarray as nd import matplotlib.pyplot as plt import numpy as np import ...

  4. 浅谈HTTPS传输过程

    HTTPS是什么 HTTPS不是一个新的协议,可以理解为是一个HTTP协议的加密"版本"(HTTP+SSL(TLS)).那为什么HTTP协议需要加密,不加密会出现什么问题呢?先来了 ...

  5. SqlServer 快速查看表结构

    --快速查看表结构(比较全面的) THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , col.name AS 列名 , ISNULL(ep.[v ...

  6. 有趣的js代码

    for ( ; ; ) { window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/ )\n(ノΠU\n何回閉じても無駄ですよ-ww\nm9(^Д^) ...

  7. 【牛客练习赛53】A-超越学姐爱字符串

    // 题目地址:https://ac.nowcoder.com/acm/contest/1114/A /* 找规律(碰运气) n:1 = 2 n:2 = 3 n:3 = 5 n:4 = 8 ... d ...

  8. Oracle_12541错误和ora-12514错误

    ORA-12541: TNS无监听程序错误 在oracle安装目录(E:\app\Administrator\product\instantclient_12_1\NETWORK\ADMIN)下查找l ...

  9. mysql(三)索引

    参考文档:索引的基本操作 & 简单优化:https://www.cnblogs.com/zz-tt/p/6609828.html聚簇索引vs非聚簇索引:https://www.cnblogs. ...

  10. Markdown 编辑器指南

    一直觉得博客园默认的编辑器不好用,后来了解了Markdown,并且博客园也支持Markdown标记,所以写篇博客总结下. 一.认识 Markdown Markdown 是一种用来写作的轻量级「标记语言 ...