通俗重制系列--CSS布局

2022-12-28 144

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 通俗重制系列--CSS布局

通俗重制系列--CSS布局

float布局

在子元素上加float：left和width
在父元素上加 .clearfix

注意：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

clearfix要写三句话，如下：

.clearfix:after{
 content: '';
 display: block;
 clear: both;
 }

经验

有经验者会留一些空间或者最后一个不设width
不需要做响应式，手机上没有IE，此布局是为IE准备的
IE6/7存在双倍 margin bug，解决方法如下:
将错就错，针对IE6/7把margin减半
神来一笔，在加上一个display：inline-block

 <header class="clearfix">
    <div class="logo">
      <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png" alt="">
    </div>
    <ul class="clearfix nav">
      <li>首页</li>
      <li>课程</li>
      <li>优惠</li>
      <li>关于</li>
    </ul>
  </header>
  <div class="content clearfix">
    <aside>一行有六个字</aside>
    <main></main>
    <div class="ad"></div>
  </div>
  <div class="imageList">
    <div class="x  clearfix">
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
      <div class="image"></div>
    </div>
  </div>

*{margin:0;padding:0;box-sizing: border-box;}
ul,ol{
  list-style: none;
}
img{max-width: 100%;}
header{display: block;}
.clearfix{
  width: auto;
}
.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.logo{
  background: grey;
  display: inline-block;
  float: left;
  margin-top: 8px;
  margin-left: 10px;
}
.logo>img{
  height: 26px;
  vertical-align: middle;
}
.nav{
  float: right;
  margin-left: 20px;
}
ul > li {
  float: left;
  padding: 4px 0.5em;
  line-height: 32px;
}
ul{
  display: inline-block;
}
header{
  background: grey;
  color: white;
}
.content{
  margin-top: 10px;
}
.content{
  outline: 1px solid red;
   width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.content>aside{
  width: 200px;
  height: 300px;
  float: left;
  background: #999;
}
.content> main{
  height: 300px;
  width: 800px;
  float: left;
  background: #ccc;
}
.content>.ad{
  width: 100px;
  height: 300px;
  float: left;
  background: #000;
}
.imageList{
  outline: 1px solid green;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.imageList >.x > .image{
  width: 191px;
  height: 191px;
  background: #000;
  border: 50px solid red;
  float: left;
  margin-bottom: 10px;
  margin-right: 12px;
}
.imageList > .x{
  margin-right: -12px;
}

flex布局

container 容器(一般用来做父元素)
items 项目（一般用来做子元素）

网络异常，图片无法展示
|

容器的属性

首先，实现 flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

flex：将对象作为弹性伸缩盒显示,没有为父元素main设置宽度，默认为100%；

inline-flex：将对象作为内联块级弹性伸缩盒显示，没有给父元素设置宽度，但是父元素默认会根据子元素的宽高去自适应。

.container {
    display: flex | inline-flex;       //可以有两种取值
}

分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

flex-direction: 决定主轴的方向(即项目的排列方向)

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

默认值：row，主轴为水平方向，起点在左端。

网络异常，图片无法展示

flex-wrap: 决定容器内项目是否可换行

默认情况下，项目都排在主轴线上，使用 flex-wrap 可实现项目的换行。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。

网络异常，图片无法展示

flex-flow

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap默认值为: row nowrap，感觉没什么卵用，老老实实分开写就好了。这样就不用记住这个属性了。

flex-flow: <flex-direction>|| <flex-wrap>;

justify-content：定义了项目在主轴的对齐方式。

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

建立在主轴为水平方向时测试，即 flex-direction: row

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。
space-evenly：每个项目的间隔与项目和容器之间的间隔是相等的。

网络异常，图片无法展示

align-items: 定义了项目在交叉轴上的对齐方式

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

建立在主轴为水平方向时测试，即 flex-direction: row

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
stretch（默认值）: 如果项目未设置高度或设为auto，将占满整个容器的高度。
baseline: 项目的第一行文字的基线对齐。

网络异常，图片无法展示

align-content

align-content 属性定义了多根轴线的对齐方式，前提是需要设置flex-wrap: wrap，否则不会有效

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

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

网络异常，图片无法展示

items属性

order

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负数。

网络异常，图片无法展示

flex-grow

定义项目的放大比例

flex-grow flex容器中剩余空间的多少应该分配给项目，也称为扩展规则。最终的项目的宽度为：自身宽度 + 容器剩余空间分配宽度，flex-grow最大值是1，超过1按照1来扩展 items上加flex-grow（控制变胖）

.items{
  flex-grow: 0;
}

flex-shrink

items上加flex-shrink（控制变瘦，一般写flex-shrink：0防止变瘦，默认是1）

.items{
  flex-shrink: 0;
}

flex-basis

items上加flex-basis（控制基本宽度，默认auto） flex：flex-grow flex-gshrink flex-basis(缩写)

.items{
  flex: 1 1 100px;
}

align-self

align-self定制align-items（某一个items可以特立独行，不常用）

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

网络异常，图片无法展示

重点属性

display: flex让一个元素变成flex容器
flex-direction: row/column表示流动方向横着还是竖着
flex-wrap: wrap是否换行
justify-content: conter/space-between主轴（横轴）方向怎么对齐
align-items: center次轴（纵轴）方向怎么对齐

<header class="header">
  <div class="logo">
    <img src="https://static.xiedaimala.com/xdml/cdn/assets/white-logo-1a762b425df663fbccee710fe08d66951cea2fbc0a0350f03446ab30462e739f.png" alt="">
  </div>
  <ul>
    <li>首页</li>
    <li>课程</li>
    <li>优惠</li>
    <li>关于</li>
  </ul>
</header>
<div class="content">
  <aside>一行有六个字</aside>
  <main></main>
  <div class="ad"></div>
</div>
<div class="imageList">
  <div class="x">
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
    <div class="image"></div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}
img {
  max-width: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: grey;
  padding: 4px 0;
}
.logo {
  display: flex;
  align-items: center;
}
.logo>img {
  height: 26px;
  vertical-align: middle;
}
ul {
  display: flex;
}
ul>li {
  padding: 4px;
}
.content {
  display: flex;
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.content>aside {
  background: #000;
  width: 200px;
}
.content>main {
  background: #666;
  height: 400px;
  flex-grow: 1;
}
.content>.ad {
  background: #999;
  width: 100px;
}
.imageList{
  width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.imageList > .x{
  display: flex;
  flex-wrap: wrap;
  margin-right: -6px;
  margin-left: -6px;
}
.image{
   width: 191px;
  height: 191px;
  background: grey;
  border: 1px solid red;
  margin-right: 6px;
  margin-left: 6px;
  margin-bottom: 10px;
}

敬请期待

我原本打算把float flex grid一起总结，但是grid布局必想象的更加复杂，我zhun

通俗重制系列--CSS布局

通俗重制系列--CSS布局

float布局

经验

flex布局

容器的属性

flex-direction: 决定主轴的方向(即项目的排列方向)

flex-wrap: 决定容器内项目是否可换行

flex-flow

justify-content：定义了项目在主轴的对齐方式。

align-items: 定义了项目在交叉轴上的对齐方式

align-content

items属性

order

flex-grow

flex-shrink

flex-basis

align-self

重点属性

敬请期待

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

通俗重制系列--CSS布局

通俗重制系列--CSS布局

float布局

经验

flex布局

容器的属性

flex-direction: 决定主轴的方向(即项目的排列方向)

flex-wrap: 决定容器内项目是否可换行

flex-flow

justify-content：定义了项目在主轴的对齐方式。

align-items: 定义了项目在交叉轴上的对齐方式

align-content

items属性

order

flex-grow

flex-shrink

flex-basis

align-self

重点属性

敬请期待

热门文章

最新文章

相关课程

相关电子书

相关实验场景