CSS3 利用盒子模型进行横排

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<style>

body{display:-webkit-box; -webkit-box-orient:horizontal;}

div{height:100px;}

.div1{background:orange;}

.div2{background:pink;}

.div3{background:red;}

</style>

<body>

<div class="div1"> 盒子1 </div>

<div class="div2"> 盒子2 </div>

<div class="div3"> 盒子3 </div>

</body>

</html>

CSS3 利用盒子模型进行横排

时间: 2024-10-25 20:14:50

CSS3 利用盒子模型进行横排的相关文章

css3弹性盒子模型之box-flex

css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex 属 box-flex是css3新添加的盒子模型属性),它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)

css3弹性盒子模型之box-flex(修正版一)

http://www.rainleaves.com/html/1095.html css3弹性盒子模型之box-flex(修正版一) 发表于 2011/12/06 9 条回复 18,699 views 今天看到蓝色理想上面有一篇文章讲<css3弹性盒模型布局模块介绍>里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面也同样讲到flex box自适应布局,而上次竟然没有引起自己的注意,想深入研究一下,竟然给忘记了,于是就在这种不断的忘记中彻底变成outer.今天借此机会,好

盒子模型以及css3指定盒子模型种类的box-sizing

1.CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属性. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 一个栗子: <button style="margin: 10px;padding: 10px;bo

浅谈css3弹性盒子模型

昨晚听了一个微信小程序的公开课,在布局时,无意间看到了弹性盒子的身影,之前只知道box-flex,但是由于兼容性问题,使用者很少,毕竟市面上的大多浏览器都必须加前缀才能实现,也就意味着多写几行代码,其实这都不是事,可是大部分CXY都比较懒,能一行代码搞定的事绝不写两行.废话有点多了.转回正题. 我学东西遵循着,是什么?为什么?怎么用?有什么问题?下面我就按这四个方向深入聊聊,水平有限,有问题的地方请多多指教.. 一.是什么? 相信大多数CXY遇到问题,不知是骡子还是马,都会习惯性谷歌之,我也不例

css3弹性盒子模型

当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布局,可以垂直布局,还可以调换顺序,可以设置不等的百分比等. 1.弹性盒子column分栏 1 <h2>1.弹性盒子column分栏</h2> 2 <div class="freebox"> 3 <img src="image/moon.j

浅谈 css3 box盒子模型以及box-flex的使用

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使用以及介绍: 1.要实现水平或者垂直切分,必须先满足以下要求 i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性 ii. .panel的元素定义box-flex,来实现按比例切分.如下图:就是将三个di

CSS3.0盒子模型:display:-webkit-box

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css3盒子模型</title> 5 <style> 6 .box3{ 7 width: 300px; 8 height: 100px; 9 /*设置css3盒子模型的父类*/ 10 display: -webkit-box; 11 display: -moz-box; 12 display: box; 13 14 background-colo

CSS3之盒子模型

display:box 使子元素成行排列如果父级宽度小于子级盒子 不会把超出部分挤出下面 而是直接超出 -box-orient:vertical 使盒子垂直显示  默认水平显示 -box-direction:Reverse使盒子排列顺序颠倒; -box-ordinal-group: ;设置元素排列的具体位置 -box-flex:; 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 水平方向的富裕空间处理 box-pack:Justify;富裕空

CSS3 Box-sizing(盒子模型)

http://www.w3cplus.com/content/css3-box-sizing http://tantek.com/CSS/Examples/boxmodelhack.html box-sizing是CSS3的box属性之一.一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性.那么CSS3的Box-sizing跟盒模型有什么关系呢?第一句话就说了,Box-sizing是CSS3的Box属性