webkit-box
1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
提供的关于盒模型的几个属性：
box-orient 子元素排列 vertical or horizontal
box-flex 兄弟元素之间比例，仅作一个系数
box-align box 排列
box-direction box 方向
box-flex-group 以组为单位的流体系数
box-lines
box-ordinal-group 以组为单位的子元素排列方向
box-pack以下是关于flexible box的几个实例
1、三列自适应布局，且有固定margin：
<!DOCTYPE html><html><style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
-webkit-box-flex: 1;
margin: 10px;
font-size: 100px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
</style><div><div>1</div><div>2</div><div>3</div></div></html>
2、当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：
<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
.wrap {
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.child {
min-height: 200px;
border: 2px solid #666;
margin: 10px;
font-size: 40px;
font-weight: bold;
font-family: Georgia;
-webkit-box-align: center;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
</style><div><div>200px</div><div>比例1</div><div>比例2</div></div></html>
3、下面是一个常见的web page 的基本布局：
<!DOCTYPE html><html><meta charset=”utf-8″ /><style>
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style><div id=”doc”><header>Header</header><div id=”content”><section>定宽200</section><section>比例3</section><section>比例1</section></div><footer>Footer</footer></div></html>
下面是一个常见的web page 的基本布局
<style>
header, footer, section {
border: 10px solid #333;
font-family: Georgia;
font-size: 40px;
text-align: center;
margin: 10px;
}
#doc {
width: 80%;
min-width: 600px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
margin: 0 auto;
}
header,
footer {
min-height: 100px;
-webkit-box-flex: 1;
}
#content {
min-height: 400px;
display: -webkit-box;
-webkit-box-orient: horizontal;
}
.w200 {width: 200px}
.flex1 {-webkit-box-flex: 1}
.flex2 {-webkit-box-flex: 2}
.flex3 {-webkit-box-flex: 3}
</style>
<div id="doc">
<header>Header</header>
<div id="content">
<section class="w200">定宽200</section>
<section class="flex3">比例3</section>
<section class="flex1">比例1</section>
</div>
<footer>Footer</footer>
</div>
|
|
- 大小: 20.2 KB
分享到：
相关推荐
在CSS3中，弹性布局（Flexbox）是一种强大的布局模式，允许开发者更加灵活地控制元素在容器中的排列、对齐和大小调整。在早期的浏览器实现中，WebKit浏览器（如Safari和Chrome）引入了一个实验性的前缀 `-webkit-box...
在CSS3中，`-webkit-box-reflect` 是一个非标准的Webkit私有属性，用于在特定元素的下方、上方、右侧或左侧创建倒影效果。这个属性主要用于基于WebKit的浏览器，比如Chrome和Safari，以及一些移动端浏览器。由于它是...
另外一个值得注意的知识点是，在CSS3中新增的几种定位机制，例如relative、absolute、fixed、center和sticky，它们为元素的定位提供了更多的方式和灵活性。例如： - static：默认值，对象遵循常规文档流。 - ...
另一种方法是使用图片或者CSS3渐变来创建类似的效果，但这通常更复杂，且不适用于动态文本。 总结来说，为了在IE浏览器上实现CSS3的新特性，如圆角、阴影，我们需要利用特定的IE扩展技术，如CSS行为，并结合`.htc`...
标题中的“谷歌和Safari WebKit独有CSS Hack”指的是在开发Web页面时，为了针对谷歌浏览器（Chrome）和基于WebKit内核的Safari浏览器进行特定样式调整而使用的CSS技巧。这些技巧通常是为了修复浏览器之间的兼容性...
本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用，尤其当动画需要根据用户的操作（如点击按钮）而触发时。我们将通过具体的示例来一步步解释其实现原理...
在CSS中，我们可以使用多种方法来实现这种效果，例如： 1. **overflow** 属性：此属性用于规定当内容溢出元素框时发生的事情。设置`overflow: hidden;`可以隐藏超出元素边框的所有内容。对于`<li>`元素，这会使得...
3. **使用`display: -webkit-box`和`-webkit-line-clamp`** 对于多行文本的截断，可以利用WebKit浏览器的非标准属性`-webkit-line-clamp`和`-webkit-box-orient`。`-webkit-line-clamp`用于限制显示的文本行数，`-...
在CSS3中，创建文字的半透明倒影效果有多种方法。这里我们将详细探讨两种主要的实现方式，它们分别是利用`box-reflect`属性和`transform`属性的`scaleY`方法。 首先，我们来看第一种方法，使用`box-reflect`属性。`...
要在CSS3中实现垂直居中，可以将`box-pack`和`box-align`都设置为`center`，这样子元素会在容器中居中对齐。以下是一个例子： ```css #container { display: -webkit-box; /* Webkit */ display: -moz-box; /* ...
在Webkit浏览器中，滑动轨道是滚动条上的空白区域，通常我们使用`background`属性来设置其背景颜色或图像，同时也可以添加阴影效果（`-webkit-box-shadow`），以及边框圆角（`border-radius`）。 3. `::-webkit-...
以下是一个使用`-webkit-box`、`-webkit-line-clamp`和`-webkit-box-orient`的示例： ```css { display: -webkit-box; /* 使用Webkit的伸缩盒模型 */ -webkit-box-orient: vertical; /* 设置子元素垂直排列 */ -...
HTML与CSS的自适应宽度布局解决方案 ...双飞翼布局使用浮动和负 margin 实现自适应宽度布局，而CSS3盒布局使用盒布局模型实现自适应宽度布局。两种方法都可以实现自适应宽度布局，但需要根据实际情况选择合适的方法。
一个插件，用于使用CSS flexbox模型创建覆盖整个宽度的标题。 在此处查看一些示例： : 用法 CSS ： .full-width-hl .container { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -...
总结来说，对于多行文本截断，我们可以选择`-webkit-line-clamp`（适用于WebKit浏览器）或者使用定位元素模拟的方法（兼容性更好）。在实际应用中，应根据项目需求和目标用户群体的浏览器分布来决定使用哪种方法。...
在CSS3中，`mask`属性提供了一种强大的机制，允许开发者通过定义遮罩图像来隐藏或显示元素的一部分。这个特性对于创建动态效果、复杂的图形设计以及交互式用户体验非常有用。接下来，我们将深入探讨`mask`属性的各个...
#columns-3 { text-align: justify; -moz-column-count: 3; -moz-column-gap: 12px; -moz-column-rule: 1px solid #c4c8cc; -webkit-column-count: 3; -webkit-column-gap: 12px; -webkit-column-rule: 1px ...
针对给定文件提供的内容，我们将详细探讨在HTML中使用CSS实现图片自适应手机屏幕大小的方法。以下内容将涵盖相关的知识点，包括CSS属性、选择器、以及与响应式设计相关的概念。 首先，我们注意到文件中提供了一段...
以上就是在IE浏览器中使用CSS实现超长字段被省略的简单方法。尽管这种方法针对的是IE浏览器，但随着现代浏览器的普及，我们建议同时考虑其他浏览器的兼容性，使用如`-webkit-`、`-moz-`等前缀来确保在更多浏览器中的...