-webkit-box-orient: horizontal||vertical
设置或检索弹性盒模型对象的子元素的排列方式。
对应的脚本特性为boxOrient。需设置容器的display:-webkit-box;
CSS样式:
html,body,div{ margin:0px; padding:0px;} .orient{display:-webkit-box;-webkit-box-orient:horizontal; width:600px; margin:0 auto;} .orient > div{ width:0%;} .flex_1{-webkit-box-flex:1;background-color:#666; height:50px;} .flex_2{-webkit-box-flex:2;background-color:#933; height:50px;} .flex_3{ width:300px !important;background-color:#9C6; height:50px;}
HTML:
1 <div class="orient"> 2 <div class="flex_1">-webkit-box-flex:1</div> 3 <div class="flex_2">-webkit-box-flex:2</div> 4 <div class="flex_3">设定固定空间300px</div> 5 </div>
结果:
父容器总宽度600px,减去固定宽度300px,剩余的300px按1:2分配。(均未设margin和padding)
bug:如果不设置子元素的width:0%,会出现分配不均匀的bug.
display:-webkit-box;-webkit-box-orient:horizontal;是指元素以盒子模型显示,其子元素水平排列 -webkit-box-flex:1 设置子元素如何分配父元素剩余空间,上文是所有元素等分父元素剩余空间。如果有个子元素设定了固定宽度,则分配空间是除去固定空间后的剩余空间 剩余宽度=父容器宽度-子容器固定宽度(优先)-子容器margin&border&padding
-webkit-box-align:start | end | center | baseline | stretch:子元素对齐方式
box-orient设置为horizontal start和end所呈现的效果等同于顶部对齐和底部对齐;当box-orient设置为vertical时,start和end所呈现的效果等同于左对齐和右对齐
stretch(子元素自适应父元素尺寸)
start |
设置弹性盒模型对象的子元素从开始位置对齐 |
center |
设置弹性盒模型对象的子元素居中对齐 |
end |
设置弹性盒模型对象的子元素从结束位置对齐 |
baseline |
设置弹性盒模型对象的子元素基线对齐 |
stretch |
设置弹性盒模型对象的子元素自适应父元素尺寸。此值为默认值,如果子元素设了高度,该属性无效 |
-webkit-box-align:start
-webkit-box-align:end;
-webkit-box-align:center;
-webkit-box-align:stretch;(如果子元素设了高度,该属性无效)
-webkit-box-pack :设置或检索弹性盒模型对象的子元素的对齐方式。
查看其兄弟属性-webkit-box-align,两者的效果正好(相反)互补。
box-pack的对齐方式受-webkit-box-orient影响;默认情况下(即box-orient设置为horizontal)start和end所呈现的效果等同于左对齐和右对齐;当box-orient设置为vertical时,start和end所呈现的效果等同于顶部对齐和底部对齐;
对应的脚本特性为boxPack。
设置弹性盒模型对象的子元素从开始位置对齐(大部分情况等同于左对齐) |
设置弹性盒模型对象的子元素居中对齐 |
设置弹性盒模型对象的子元素从结束位置对齐(大部分情况等同于右对齐) |
设置或弹性盒模型对象的子元素两端对齐 |
<div class="orient" style="-webkit-box-pack:justify;-webkit-box-align:center"> <div class="flex_1">-webkit-box-flex:1</div> <div class="flex_2">-webkit-box-flex:2</div> <div class="flex_3">设定固定空间300px</div> </div>
-webkit-box-pack:justify;-webkit-box-align:center配合实现得居中和等间距效果(父容器600px,子元素设定固定宽度150px、去除-webkit-box-flex属性,图中文字没改仅作显示)
其它属性: -webkit-box-direction:normal | reverse:子元素排列方式,正常排列或者反转排列
-webkit-box-ordinal-group: <interger> 数值较低的元素显示在数值较高的元素前面;相同数值的元素,它们的显示顺序取决于它们的代码顺序
-webkit-box-reflect:none | <direction> <offset> <mask-box-image> 盒子倒影
none |
无倒影 |
<direction> |
指定倒影与对象的方向 |
above |
指定倒影在对象的上边 |
below |
指定倒影在对象的下边 |
left |
指定倒影在对象的左边 |
right |
指定倒影在对象的右边 |
<offset> |
设置倒影与对象的距离 |
<length> |
用长度值来定义倒影与对象之间的间隔。可以为负值 |
<precentage> |
用百分比来定义倒影与对象之间的间隔。可以为负值 |
<mask-box-image> |
设置倒影的遮罩图像 |
none |
无遮罩图像 |
<url> |
使用绝对或相对地址指定遮罩图像。 |
<linear-gradient> |
使用线性渐变创建遮罩图像。 |
<radial-gradient> |
使用径向(放射性)渐变创建遮罩图像。 |
<repeating-linear-gradient> |
使用重复的线性渐变创建背遮罩像。 |
<repeating-url> |
使用重复的径向(放射性)渐变创建遮罩图像。 |
.reflect_box {-webkit-box-reflect: below 5px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(white));} <div class="orient reflect_box"> <div class="flex_1">1</div> <div class="flex_2">2</div> <div class="flex_3">3</div> </div>
-webkit-box-shadow:none | <length>① <length>② <length>③ <length>④ <color> inset
none |
无阴影 |
<length>① |
第1个长度值用来设置对象的阴影水平偏移值。可以为负值 |
<length>② |
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 |
<length>③ |
如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 |
<length>④ |
如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 |
<color> |
设置对象的阴影的颜色。 |
inset |
设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影 |
相关推荐
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的,一到页面上居然没有反应,和没写一个样,f12看了下,原来是-webkit-box-orient: vertical;这个属性丢失,...
css3弹性布局-webkit-box的用法演示 css3弹性布局-webkit-box的用法演示
webkit Box模型 3 B. 可视化格式模型 5 C. 视觉效果 6 D. 生成目录 8 E. 分页媒体 8 F. 颜色与背景 8 G. 字体 10 H. 文字 10 I. 表格 12 J. 用户接口 12 全部的样式都附带了说明的效果图片, 效果与代码之间对比,...
-webkit-line-clamp 概述: -webkit-line-clamp 是一个 不规范的... -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow,可以用来多行文本的情况下,用省略号“…”
主要介绍了CSS3 Notes: -webkit-box-reflect实现倒影的实例,具有一定的参考价值,有需要的可以了解一下。
node-webkit 中的浮动备忘录应用程序。 特征 总在最前面 Markdown 编辑器(gfm 支持) 自动保存以前的写作备忘录。 保存到 DayOne(OS X) 安装 此应用程序仅支持 Mac OS X。(但是,如果您为您的平台实现 ,则可以...
这个总结了Webkit内核的浏览器的默认CSS属性,也就是解释HTML标签时候的默认样式,比如<p><br />这种的默认样式……
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome...
box-sizing属性包括content-box(default),border-box,padding-box。 1、content-box,border和padding不计算入width之内 2、padding-box,padding计算入width内 3、border-box,border和padding计算入...
WebKit2是WebKit的新的,完全不阻塞API层,它引入了一个分裂的过程模型 - web进程是孤立的UI过程中提供更好的稳定性和更好的嵌入应用程序的响应能力。 WebKit2.NET。NET绑定WebKit2。 WebKit2.NET是不是一个控件库...
java集成webkit浏览器,内附详细Demo,注意64位需要用64位swt
基于Webkit的新手级浏览器源码是一个简易web浏览器,基于安卓Webkit开发的。
-webkit-box-reflect:none | <direction> <offset>? <mask>? box-reflect:none | <direction> <offset>? <mask>? 属性说明: none:此值为默认值,表示无倒影; direction:生成倒影的方向 above:指定倒影在对象...
Qtwebkit安装库适用于QT5.14版本。 包含了MinGw730 、VS2017 编译器的的32和64位库。 qtwebkit-Windows-Windows_7-Mingw73-Windows-Windows_7-X86.7z qtwebkit-Windows-Windows_10-Mingw73-Windows-Windows_10-X86_...
包含IRI2007、2012、2016三个版本,分别为IRI2007、IRI2012、IRI2016三个文件。 在iritest中fun2test的参数分别更改为@iri2007、@iri2012、@iri2016可以得到对应的iri模型值。
WebKit技术内幕WebKit技术内幕WebKit技术内幕WebKit技术内幕WebKit技术内幕
WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox 等使用),Trident(也称MSHTML,IE 使用)和EdgeHTML(也称Chakra,Edge和其他UWP浏览器使用)。同时WebKit 也是苹果Mac OS X 系统引擎...
c# winform webkit C# 调用webkit