CSS3 完善盒模型
CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式。
改善结构:为盒子新增轮廓区;
增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除、换行处理;允许多重定义背景图,控制背景图显示方式等;增加背景图边框,多重边框,圆角边框等功能;完善 margin:auto;布局特性;
扩展显示:完善传统的块显示特性,增加弹性,伸缩盒显示功能,丰富网页布局手段。
一、定义显示方式
CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
语法格式:
- 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 属性的任何容器元素中。
语法格式:
- 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:定义了上下边(垂直方向)的剪切。
语法格式:
- overflow-x:visible | hidden | scroll | auto | no-display | no-content;
- overflow-y:visible | 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 是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
语法格式:
- outline: [outline-color] | [outline-style] | [outline-width] | [outlineoffset] | inherit;
- <outline-color>:定义轮廓边框颜色;
- <outline-style>:定义轮廓边框轮廓样式;
- <outline-width>:定义轮廓边框宽度;
- <outline-offset>:定义轮廓边框偏移位置的数值;
- inherit:默认继承。
Tips:outline 属性创建的轮廓线是画在一个框“上面”,轮廓线总是在顶上,不会影响该框或任何其他框的尺寸。所有,显示或不显示不会影响文档流,也不会影响布局。
1、设置颜色
outline-color属性可以单独设置轮廓线的颜色。
语法格式:
- outline-color: <color> | invert | inherit;
- <color>:可以是颜色名或者十六进制;
- invert:执行颜色反正(逆向的颜色)。可以确保轮廓线在不同的背景颜色中都是可见的;
- inherit:默认继承。
2、设置样式
outline-style 属性可以设置轮廓线的样式。
语法格式:
- outline-style: auto | <border-style> | inherit;
- auto:根据浏览器自动设置;
- <border-style>:采用边框的样式;
- inherit:默认继承。
- none:初始值。
3、设置宽度
outline-width 属性可以单独设置轮廓线的宽度。
语法格式:
- outline-width:thin | medium | thick | <length> | inherit;
- thin:定义细轮廓;
- medium:定义中等的轮廓;(默认值)
- thick:定义粗的轮廓;
- <length>:定义轮廓粗细的值;
- inherit:默认继承。
Tips:只有当轮廓样式不是 none 时,该属性才会起作用。
4、设置偏移
outline-offset 属性可以单独设置轮廓线的偏移位置。
语法格式:
- outline-offset:<length> | inherit;
- <length>:定义轮廓距离容器的值;
- inherit:默认继承。
五、定义多色边框
border-color 属性可以设置边框的颜色。CSS3 中使用该属性可以设置更多的颜色。
语法格式:
- border-color:<color>;
CSS3 在这个属性上派生了4个边框颜色属性:
- birder-top-color: 定义指定元素顶部边框的色彩。
- birder-right-color: 定义指定元素右侧边框的色彩。
- birder-bottom-color: 定义指定元素底部边框的色彩。
- birder-left-color: 定义指定元素左侧边框的色彩。
Tips: 目前仅有 MOzilla Gecko 引擎支持 -moz-border-color 私有属性。
六、定义边框背景
border-image 属性来模拟 background-image 属性功能。
语法格式:
- border-image:none | <image> [<number> | <percentage>] {1,4} [ / <border-width>]{1,4}
- none:默认值,表示边框无背景图;
- <image>:使用绝对或相对URl 地址指定边框的背景图像;
- <number>:设置边框宽度或边框背景图图像大小,使用固定像素值表示;
- <percentage>:设置边框背景图像大小,使用百分比表示。
Tips:该属性适用于所有元素,除了 border-collapse 属性值为 collapse 的 table 元素。
派生子属性1:
- border-top-image: 定义顶部边框背景图像。
- border-right-image: 定义右侧边框背景图像。
- border-bottom-image: 定义底部边框背景图像。
- border-left-image: 定义左侧边框背景图像。
- border-top-left-image: 定义左上角边框背景图像。
- border-top-right-image: 定义右上角边框背景图像。
- border-bottom-right-image: 定义右下角边框背景图像。
- border-bottom-left-image: 定义左下角边框背景图像。
派生子属性2:
- border-image-source: 定义边框的背景图像源,即图像 URL;
- border-image-slice: 定义如何裁剪背景图像,与背景图像的定位功能不同;
- border-image-repeat: 定义边框被图像的重复性;
- border-image-width: 定义边框背景图像的显示大小(即边框显示大小);
- border-image-outset: 定义边框背景图像的偏移位置;
Tips:webkit 引擎支持 -webkit-border-image 私有属性,Mozilla Gocko 引擎支持 -moz-border-image 私有属性; Presto 引擎支持 -o-border-image 私有属性。IE 浏览器暂时不支持 border-image 属性,也没有定义私有属性。
CSS3 完善盒模型的更多相关文章
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
- css3弹性盒模型flex快速入门与上手(align-content与align-items)
接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...
- css和css3弹性盒模型实现元素宽度(高度)自适应
一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...
- CSS3使用盒模型实现三栏布局
本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
随机推荐
- ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于(WIFI模块AT指令TCP透传方式),定时访问升级
前言 学习此代码所需: 实现功能概要 定时使用http访问云端的程序版本,如果版本不一致,然后通过http下载最新的升级文件,实现升级. 测试准备工作(默认访问我的服务器,改为自己的服务器,请看后面说 ...
- [PHP] PHP汉字转拼音的方法
PHP汉字转拼音的方法 代码如下: <?php // 此类是依据ASCII码转换,GB2312库对多音字也无能为力. // GB2312标准共收录6763个汉字,不在范围内的汉字是无法转换,如: ...
- 从零和使用mxnet实现线性回归
1.线性回归从零实现 from mxnet import ndarray as nd import matplotlib.pyplot as plt import numpy as np import ...
- 浅谈HTTPS传输过程
HTTPS是什么 HTTPS不是一个新的协议,可以理解为是一个HTTP协议的加密"版本"(HTTP+SSL(TLS)).那为什么HTTP协议需要加密,不加密会出现什么问题呢?先来了 ...
- SqlServer 快速查看表结构
--快速查看表结构(比较全面的) THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , col.name AS 列名 , ISNULL(ep.[v ...
- 有趣的js代码
for ( ; ; ) { window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/ )\n(ノΠU\n何回閉じても無駄ですよ-ww\nm9(^Д^) ...
- 【牛客练习赛53】A-超越学姐爱字符串
// 题目地址:https://ac.nowcoder.com/acm/contest/1114/A /* 找规律(碰运气) n:1 = 2 n:2 = 3 n:3 = 5 n:4 = 8 ... d ...
- Oracle_12541错误和ora-12514错误
ORA-12541: TNS无监听程序错误 在oracle安装目录(E:\app\Administrator\product\instantclient_12_1\NETWORK\ADMIN)下查找l ...
- mysql(三)索引
参考文档:索引的基本操作 & 简单优化:https://www.cnblogs.com/zz-tt/p/6609828.html聚簇索引vs非聚簇索引:https://www.cnblogs. ...
- Markdown 编辑器指南
一直觉得博客园默认的编辑器不好用,后来了解了Markdown,并且博客园也支持Markdown标记,所以写篇博客总结下. 一.认识 Markdown Markdown 是一种用来写作的轻量级「标记语言 ...