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 属性,也没有定义私有属性。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战