CSS布局

啊璆

于 2020-05-30 16:15:25 发布

阅读量228

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/qiuqiubili/article/details/106434518

版权

CSS布局

css布局是css中重要的部分，有下列几种方式：table表格布局，float浮动布局，flex布局

table表格布局
float浮动布局(css+div)
1.两栏布局
2.三栏布局
flex布局
1.盒子模型
2.定位position
3.flexbox布局

table表格布局

最初网页比较简单的时候，最常用的就是表格布局，因为表格布局可以展现出多个块的排列。

<style>
.left{ background-color: blue; width: 50px; height: 50px;}
.right{background-color: brown;    width: 50px;    height: 50px;}
</style>
<body>    
<table>        
<tbody>            
       <tr> <td class="left">左边</td>         
              <td class="right">右边</td>        
       </tr>        
</tbody>   
 </table>
</body>

局限性：table页面元素比较多，占用的字节比其他的HTML多（造成下载时间延迟,占用服务器更多流量资源，用户等待页面加载时间久）；可以使用更加灵活的div

float浮动布局(css+div)

两栏布局
实现方式：float + margin：

<style>
.content{    width: 600px;}
.left{    
background-color: yellow;     
float: left;    
height: 400px;   
 width:100px;
 }
.right{    
background-color: red;     
margin-left: 100px;      //这一句将浮动元素的位置空了出来，所以右边栏里面的元素不会影响到浮动的 div,float中重要的思想
height:400px;}
</style>
<body>    
<div class="content">        
  <div class="left">左-定宽度</div>      
  <div class="right">右-适应宽度</div>    
 </div>
 </body>

三栏布局
实现方式：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定

//方法一：用float
<style>
.content{    width: 700px;    height: 100px;}
.left{    
width: 150px;    
height: 100px;    
background-color: red;    
float: left;  //左边框向左边浮动
 }
.right{    
width: 150px;    
height: 100px;    
background-color: yellow;    
float: right; ///右边框向右边浮动
}
.middle{    
height: 100px;    
margin-left: 150px;     //左右两边用margin撑开左右两个边框的空隙
margin-right: 150px;    
background-color:green;
}
</style>
<body>   
 <div class="content">        
      <div class="left">左</div>       
      <div class="right">右</div>       
      <div class="middle">中</div>    //html的结构要将middle放在最后，放在中间的话假设中间有块级元素会把right挤到下面；因为浮动元素会把块级元素的位置空出来，所以right放在最后的话右边的浮动元素把上面的位置空了下来，造成right右边下移
 </div>
</body>

flex布局

盒子模型
盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)

css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图：
盒子模型图片
标准的盒子模型：width的长度等于content的宽度
当将box-sizing的属性（CSS3属性）值设置成border-box时，盒子模型的width=border+padding+content的总和

定位position
定位的概念就是它允许你定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，另一个元素甚至是浏览器窗口本身。
关于position的六个属性：

static（默认情况，存在文档流当中）
relative（根据元素本身原来所应该处的位置偏移，不会改变布局的计算）
absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 relative 或者 absolute 定位元素）
fixed（绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）
sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位
inherit 规定应该从父元素继承 position 属性的值。

flexbox布局
flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度；
1.任何容器都可以指定为flex布局：

.box{
  display: flex;
}

行内元素也可以设置为flex布局

.box{
  display: inline-flex;
}

设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效
2.flex布局的基本概念

容器默认存在两根轴，一根主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目（即容器中的子元素）占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

3.flex容器的属性

flex-direction 决定主轴的方向，即项目的排列方向

存在下面四个值
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

存在的值
nowrap (默认值)：不换行
wrap ：换行，第一行在上面
wrap-reverse ：换行，第一行在下面

flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content 定义了项目在主轴上的对齐方式

可能取5个值，具体对齐方式与轴的方向有关。
下面假设主轴为从左到右
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 定义项目在交叉轴上如何对齐

它可能取5个值。具体的对齐方式与交叉轴的方向有关，
下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

4.容器中项目的属性

order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小（负值对该属性无效。）
flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex 属性可以指定1个，2个或3个值

单值语法: 值必须为以下其中之一:
一个无单位数(number): 它会被当作flex-grow的值。
一个有效的宽度(width)值: 它会被当作 flex-basis的值。
关键字none，auto或initial.
（
initial：元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。
auto：元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto”.
none：元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
）
-双值语法: 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。第二个值必须为以下之一：
一个无单位数：它会被当作 flex-shrink的值。
一个有效的宽度值: 它会被当作 flex-basis的值。
三值语法:
第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
第三个值必须为一个有效的宽度值，并且它会被当作 flex-basis 的值。

align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.content{   
 width: 700px;    
 height: 100px;    
 display: flex; //设置为使用flex布局
 }
 .left{    
 width: 200px;    //固定左右的宽度
 height: 100px;    
 background-color: red;   
 }
 .right{    
 width: 200px;     
 height: 100px;    
 background-color: yellow; 
 }
 .middle{    
 height: 100px;    
 flex: 1;     让flex-grow为1，即说明多余的空间都给middle
 background-color:green;   
  }
  </style>
  <body>    
    <div class="content">        
        <div class="left">左</div>        
        <div class="middle">中</div>        
        <div class="right">右</div>    
   </div>
  </body>

///比较经典的flex三栏布局
<style>
.content{    
width: 700px;    
height: 100px;    
display: flex;
}
.left{    
height: 100px;   
background-color: red;   
order: -1;       ///因为left需要显示在最左侧，所以需要设置left的order为-1
flex: 0 1 200px;     ///flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 这也是flex实现三栏布局的核心；指定了flex-basis为200px，所以指定了两者的宽度，保证其显示效果
}
.right{    
height: 100px;    
background-color: 
yellow;    flex: 0 1 200px;    
}
.middle{    
height: 100px;    
flex-grow: 1;    //main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分
background-color:green;    
}</style>
<body>    
<div class="content">        
       <div class="left">左</div>        
       <div class="middle">中</div>        
       <div class="right">右</div>   
</div>
</body>

啊璆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局

CSS布局css布局是css中重要的部分，有下列几种方式：table表格布局，float浮动布局，flex布局table表格布局float浮动布局(css+div)1.两栏布局2.三栏布局flex布局1.盒子模型2.定位position3.flexbox布局table表格布局最初网页比较简单的时候，最常用的就是表格布局，因为表格布局可以展现出多个块的排列。<style>.left{ background-color: blue; width: 50px; heigh
复制链接

扫一扫