通俗重制系列--CSS布局

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

通俗重制系列--CSS布局


float布局

  • 在子元素上加float:leftwidth
  • 在父元素上加 .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;
}

image.png

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;
}

image.png

敬请期待

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

相关文章
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
2月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
67 4
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
3月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
4月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
194 3
|
4月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
65 3