精华内容
下载资源
问答
  • float:left,display:-webkit-box,display:flex的区别 float:left,display:-webkit-box,display:flex都可以实现元素横向排列,但是却存在的一定的区别: HTML代码: <div id="box"> <div class="inner">...

    float:left,display:-webkit-box,display:flex的区别

    float:left,display:-webkit-box,display:flex都可以实现元素横向排列,但是却存在的一定的区别:

    HTML代码:

      <div id="box">
    	<div class="inner">1</div>
    	<div class="inner">2</div>
    	<div class="inner">3</div>
    	<div class="inner">4</div>
    	<div class="inner">5</div>
      </div>
    
    1. float:left
    	#box{
    	  width:400px;
    	  height:300px;
    	  border:1px solid;
    	  position:absolute;
    	  margin:auto;
    	  top:0;
    	  left:0;
    	  right:0;
    	  bottom:0
    	}
    	#box > .inner{
    	  width:50px;
    	  height:50px;
    	  background:red;
    	  font:20px/50px "微软雅黑";
    	  text-align:center;
    	  border:1px solid blue;
    	  box-sizing:border-box;
    	  float:left
    	}
    

    页面效果:
    float_left
    如果我们把父元素#box的宽度变小:

    	#box{
    	  width:100px;
    	  height:300px;
    	  border:1px solid;
    	  position:absolute;
    	  margin:auto;
    	  top:0;
    	  left:0;
    	  right:0;
    	  bottom:0
    	}
    

    页面效果:
    float_left1
    可以看见设置float:left,父元素的外框宽度小于子元素总体宽度的时候,元素会换行依次横向排列。

    1. display:-webkit-box
    	#box{
    	  width:100px;
    	  height:300px;
    	  border:1px solid;
    	  position:absolute;
    	  margin:auto;
    	  top:0;
    	  left:0;
    	  right:0;
    	  bottom:0;
    	  display:-webkit-box
    	}
    	#box > .inner{
    	  width:50px;
    	  height:50px;
    	  background:red;
    	  font:20px/50px "微软雅黑";
    	  text-align:center;
    	  border:1px solid blue;
    	  box-sizing:border-box;
    	}
    

    页面效果:
    display_-webkit-box
    可以看见设置display:-webkit-box,父元素的外框宽度小于子元素总体宽度的时候,元素会横向排序并且溢出。

    1. display:flex
    	#box{
    	  width:100px;
    	  height:300px;
    	  border:1px solid;
    	  position:absolute;
    	  margin:auto;
    	  top:0;
    	  left:0;
    	  right:0;
    	  bottom:0;
    	  display:flex
    	}
    	#box > .inner{
    	  width:50px;
    	  height:50px;
    	  background:red;
    	  font:20px/50px "微软雅黑";
    	  text-align:center;
    	  border:1px solid blue;
    	  box-sizing:border-box;
    	}
    

    页面效果:
    display:flex
    可以看见设置display:flex,父元素的外框宽度小于子元素总体宽度的时候,子元素会在父元素的宽度基础上,自动调节自身的宽度,把多余的挤掉,实现横向排列。

    展开全文
  • 问题:在IE里面不兼容,右边那部分掉下去了 ... display: -webkit-box; (Chrome 4+, Safari 3.1, iOS Safari 3.2+) display: -moz-box; (Firefox 17-) display: -webkit-flex; (Chrome 21+, Saf...

    问题:在IE里面不兼容,右边那部分掉下去了

     

    解决方案:

             加一句display: -ms-flexbox;代码就可以兼容IE了(只能兼容到IE10),

             display: -webkit-box; (Chrome 4+, Safari 3.1, iOS Safari 3.2+)

             display: -moz-box; (Firefox 17-)

             display: -webkit-flex; (Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16)

             display: -moz-flex; (Firefox 18+ )

             display: flex;(Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ 

    展开全文
  • 盒子模型:display:-webkit-box的使用

    千次阅读 2019-04-15 20:03:46
    在移动布局中浮动已经不再重要,自适应成为主要的需求,所以display:-webkit-box;变的尤为重要. box-flex是css3新添加的盒子模型属性,实现布局的垂直登高/水平均分/按比例划分.兼容性有待提高,没有得到完全支持,可以...

    在移动布局中浮动已经不再重要,自适应成为主要的需求,所以display:-webkit-box;变的尤为重要.

    box-flex是css3新添加的盒子模型属性,实现布局的垂直登高/水平均分/按比例划分.兼容性有待提高,没有得到完全支持,可以使用它们的私有属性定义Firefox(-moz)/opera(-o)/chrome/safari(-webkit)

    一、box-flex属性

    box-flex主要让子容器针对父容器的宽度按一定规则进行划分--父容器定义display:box后,子容器变为内联元素,使其居中只能通过给父容器定义text-align:center;

    1、如果有一个或多个子容器设置了固定的宽度,父容器减去固定宽度,或者子容器的margin值,剩下的宽度再按照划分比例进行划分。

    二、box属性

    父容器里面的box属性:box-orient | box-align | box-pack | box-lines

    1、box-orient

    box-orient(排列)用来确定父容器里的子容器的排列方式,是水平还是垂直。可选属性如下所示:

    horizontal | vertical | inline-axis | block-axis | inherit

    horizontal、inline-axis说明:

    给box设置horizontal或inline-axis属性其效果似乎表现一致,都可将子容器水平排列,具体两者有什么实质差别暂时还没有搞清楚。

    如果父容器选择horizontal或inline-axis属性对子容器进行水平排列,其是对父容器的宽度进行分配划分。----此时如果父容器定义了高度值,其子容器的高度值设置则无效状态,所有子容器的高度等于父容器的高度值---;等高布局:如果父容器不设置高度值,其子容器的高度值才有效并且取最大高度值的子容器的高度。

    vertical、block-axis说明:

    给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致,都可将子容器垂直排列,具体两者有什么实质差别暂时还没有搞清楚。

    如果父容器选择vertical或block-axis属性对子容器进行垂直排列,其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值,其子容器的宽度值设置则无效状态;如果父容器不设置宽度值,其子容器的宽度值才有效并且取最大宽度值的子容器的宽度

    inherit说明:

    inherit属性则是让子容器继承父容器的相关属性。

    2、box-direction

    box-direction用来确定父容器里的子容器排列顺序,具体属性如下代码所示:

    normal | reverse | inherit

    normal是默认值  reverse表示反转 

    3、box-align

    box-align表示父容器里面子容器的垂直对齐方式,可选参数如下所示:

    start | end | center | baseline | stretch

    start--在box-align表示居顶对齐

    end--在box-align表示居底对齐

    center--在box-align表示居中对齐

    stretch--在box-align表示拉伸,拉伸到与父容器等高

    4、box-pack

    box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示:

    start | end | center | justify

    start--在box-pack表示水平居左对齐

    end--在box-pack表示水平居右对齐

    center--在box-pack表示水平居中对齐

    justify--在box-pack表示水平等分父容器宽度(唯一遗憾的是,firefox与opera暂时不支持,只有safari、chrome支持)



    链接:https://www.jianshu.com/p/57ab03566efa

    展开全文
  • css3中的display:-webkit-box的用法

    千次阅读 2018-10-17 09:06:50
    css3中的display:-webkit-box的用法 webkit-box 1.之前要实现横列的web布局,通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算...3.box-flex是css3新添加的盒子模型...

     css3中的display:-webkit-box的用法
    webkit-box

    1.之前要实现横列的web布局,通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。

    2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性,浏览器会帮我们做额外的计算。

    3.box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

    目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari(-webkit)。

     

    提供的关于盒模型的几个属性

    box-orient

    子元素排列 vertical(竖排)orhorizontal(横排)

    box-flex

    兄弟元素之间比例,仅作一个系数

    box-align

    box排列

    box-direction

    Box方向

    box-flex-group

    以组为单位的流体系数

    box-lines

     

    box-ordinal-group

    以组为单位的子元素排列方向

    -moz-box-pack:end;

     -webkit-box-pack:end;
    效果图

     

    box-pack以下是关于flexiblebox的几个实例

    1.1.     四列自适应的布局。
    效果图

     

    1.1html

    <!DOCTYPE html>

    <html>

           <head>

                  <meta charset="UTF-8">

                  <title>css3中webkit-box的用法</title>

           </head>

           <style>

           .wrap {

            display:-moz-box;

              display:box;

                  display: -webkit-box;

                  -webkit-box-orient: horizontal;/* 横排显示*/

                  }

           .child {

                  min-height: 200px;

                  border: 2px solid orangered;

                  -webkit-box-flex: 1; /* 一比一*/

                  margin: 20px;

                  font-size: 100px;

                  font-weight: bold;

                  font-family: Georgia;

                  -webkit-box-align: center; /* 居中显示*/

                  }

    </style>

           <body>

                  <div class="wrap">

                         <div class="child">1</div>

                         <div class="child">2</div>      

                         <div class="child">3</div>

                         <div class="child">4</div>

                        

                  </div>

           </body>

    </html>

    转载于:https://blog.csdn.net/csdn_chenli/article/details/52946143

    展开全文
  • 一、对内部元素平均分配的问题 1、display:flex; 如果要加私有的话那么方法是display:-webkit-flex;而不是-webkit-display:flex;子元素flex:1然后平均分配,但是这个方法会有一个... 子元素要:-webkit-box-flex:1;...
  • display: -webkit-box

    2018-06-16 15:20:21
    转自:https://www.cnblogs.com/frankwong/p/4603141.htmlFlexbox 为 display 属性赋予了一个新的值(即 box 值), flexbox的属性有很多,记录一些比较...(Flexbox 模型只适用于直系子代)box-orient: horizo...
  • box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典 的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、...
  • 用法: div { display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 overflow: hidden; // 超出的文本隐藏 width:100px; text-overflow: ellipsis; // 溢出用省略号显示 ... -webkit-box-orient: vertical
  • 注明:内容于... 1、现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显示两行文字,超出部分省略,可以用样式 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webki...
  • 注明:内容于... 1、现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显示两行文字,超出部分省略,可以用样式 overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-...
  • display:-webkit-inline-boxdisplay: inline-block,等高的div却不在同一条水平线上。 风言枫语 CSS: .bank-box .bank-change .bank-icon { width: 1.5rem; height: 1.5rem; background-...
  • display: -webkit-box; 盒模型

    千次阅读 2017-05-09 15:07:36
    p {  width: 100%;  overflow: hidden;  text-overflow: ellipsis; 文本溢出隐藏 ... display: -webkit-box; /* 定义为盒子显示 */ ... -webkit-box-orient: vertical; /* 定义为竖向编排显示 */  
  • box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到firefox、Opera、chrome...
  • 必须联合使用 overflow: hidden; text-overflow: ellipsis; 文本溢出隐藏为省略号 ... display: -webkit-box;... -webkit-box-orient: vertical; 定义为竖向编排显示 -webkit-line-c...
  • 效果图 css代码 /* 滚动条样式 */ .culture>div.container .right::-webkit-scrollbar { width: 6px; height: 6px; background-color: #f0f0f0; } .culture>div.container .right::-webk
  • 大家经常用的css3属性text-overflow是针对单行文本溢出的操作,那块级元素的文本溢出要怎样处理呢? 需要用到-webkit-line-clamp:
  • 后来发现代码里写的好好的,一到页面上居然没有反应,和没写一个样,f12看了下,原来是-webkit-box-orient: vertical;这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性...
  • display:-webkit-box

    2015-06-26 21:41:00
    Flexbox 为 display 属性赋予了一个新的值(即 box 值), flexbox的属性有很多,记录一些比较常用的属性: 用于父元素的样式: ...box-orient:horizontal|vertical|inherit; 该属性定义父元素的子元素...
  • CSS改变浏览器滚动条 ::-webkit-scrollbar

    千次阅读 2018-08-23 10:18:37
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); border-radius: 10px; background-color: #f5f5f5; } /*定义滑块,内阴影及圆角*/ ::-webkit-scrollbar-thumb { /*width: 10px;*/ height: 20px; ...
  • display: none; }   CSS3自定义滚动条样式 -webkit-scrollbar   前言 webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有...
  • 如果没有听说过(display:box)的朋友建议去别人家的博客看看CSS3就可以直接command+w了,由字看意,是不是能联想到 display:inline 这个属性,不知道的可以看看我的上一篇随笔, 之所有在前面加上-webkit-是因为太多...
  • css3中的display -webkit-box的用法
  • 使用-webkit-box-orient: vertical;样式,但是打包上线后,发现样式丢失 方法1: 加上注释命令,让autoprefixer编译的时候关闭对这行代码的转换。 display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;...
  • 自适应布局display:-webkit-box的用法

    千次阅读 2016-09-07 09:35:42
    上班的路上我突然想到一个问题display:-webkit-box的用法。这个东西我经常去用。但是经常忘记他的用法。不过为了兼容性问题,我们一般都加上 display: -moz-box; display: -webkit-box; display: box; display:-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 51,784
精华内容 20,713
关键字:

display:-webkit-box;