CSS布局技巧｜ 青训营

下面我将详细的阐述总结一下css布局技巧

盒模型

相关知识点

1. 盒模型可以用于布局元素,包括块级元素和内联元素。可以设置 width 和 height属性来控制元素的大小。
2. 盒模型中分为 content-box(标准盒模型) 和 border-box(IE 盒模型)两种。

• content-box:width 和 height 指元素内容框的宽和高,border 和 padding 不包括在内。
• border-box:width 和 height 指包含 border 和 padding的总宽和高。

3. 利用盒模型可以很方便地设置元素与元素之间的间距。可以设置 margin 间距使元素向外偏移,也可以设置 padding 内边距。

应用

1. 布局元素

<div class="left">左侧容器</div>
<div class="right">右侧容器</div>

<style>
.left {
  float: left;  
  width: 60%;  
  padding: 10px;  
}
.right {
  float: right;
  width: 40%;
  padding: 10px;
}
</style>

这里我们使用 width 为两个 div 元素分别设置了宽度,实现了左右两个元素的基本布局 2. 设置间距实现对齐

<div class="box">元素1</div>  
<div class="box">元素2</div>
<div class="box">元素3</div>

<style>
.box {
  width: 100px;   
  margin: 0 auto;  
  text-align: center;
}
</style>

这里我们使用 margin: 0 auto 让所有 div 元素居中对齐。 对齐。

3. 设置内外边距实现间距

<div class="box">元素1</div>  
<div class="box">元素2</div>

<style>
.box {
  padding: 10px;    
  margin-bottom: 20px;  
}
</style>

给所有 div 元素设置 padding 内边距,同时设置 margin 外边距,这样两个元素就有20像素的间距

浮动布局

相关知识点

1. 浮动布局主要用于页面布局,可以很方便地实现侧边栏、头部/底部固定布局等。
2. 使用 CSS float属性可以将元素浮动,应用最常见的有:

• float:left,使元素向左浮动
• float:right,使元素向右浮动

3. 注意事项:

• 浮动的元素会脱离标准流,其他元素会"冲出"它
• 使用margin-top不能移开浮动元素
• 必须清楚浮动,否则父元素高度没有撑开

应用

1. 左右中布局

<div class="left">左侧栏</div>
<div class="main">主要内容</div> 
<div class="right">右侧栏</div>
<style>
.left {
  float: left;
  width: 200px;
}
.main {
}
.right {
  float: right;
  width: 200px; 
}
</style>

这里我们将左右两边栏浮动, 主要内容部分保持自然流动。 2. 头部固定布局

<div class="header">头部</div>
<div class="main">主内容</div>
<style>
.header {
  float: left; 
  width: 100%;
}
.main {
}
</style>

我们将头部组件浮动左侧,宽度占满视口,使得头部固定在顶部。 3. 图片左右排列

<img src="img1" class="float-left">
<img src="img2" class="float-right">
<style>
.float-left {
  float: left;
}
.float-right {
  float: right;
}
</style>

给需要左右排列的图片添加类,实现左右浮动。

清除浮动

1. 使用额外标签清除浮动

<div class="float-left">...</div>
<br class="clear">
<div>下一个元素</div>
<style>
.clear {
  clear: both;
}
</style>

使用
标签并添加clear类,可以清除前面的浮动。

2. 给父元素添加额外类

<div class="wrap">
  <div class="float-left">...</div>  
  <div class="float-right">...</div>
</div>
<div>下一个元素</div>
<style>
.clearfix:after {
  content: '';
  display:block;
  clear: both;
}
.wrap {
  overflow: auto;
}
</style>

给父元素添加clearfix类,通过伪元素clear both清除浮动。

3. 给父元素设置overflow属性

<div class="wrap">
  <div class="float-left">...</div>
  <div class="float-right">...</div>
</div>
<style>
.wrap {
  overflow: auto; /* 或hidden, scroll等值 */
}
</style>

设置父元素overflow属性,也可以默认清除其内部元素的浮动。

4. 直接在浮动元素后添加元素自带clear属性

<div class="float-left">...</div>
<div class="float-right">...</div>
<div style="clear: both;">...</div>

添加一个元素,并设置其clear:both,也可以清除前面的浮动。

定位

相关知识点

• 使用position: absolute设置绝对定位
• 使用position: fixed设置固定定位
• 设置top、right、bottom、left属性指定元素位置
• 结合z-index控制元素层叠等级
• 为了定位的元素,最好给其父元素也设置定位(position不为static)
• 结合overflow:hidden清除绝对定位元素。

注意事项:

• 定位后,元素脱离标准流,其他元素会"冲出"定位元素
• 绝对定位依赖于第一个与定位元素形成新的包含块的祖先元素的position值
• 固定定位相对于浏览器视口进行定位。

应用

1. 布局元素。通过绝对定位和固定定位可以很方便实现页面不同部分的布局。
2. 制作菜单。使用固定定位position: absolute可以让菜单总是固定在页面上的某个位置。
3. 弹出框。使用绝对定位可以将弹出框指定到页面上的任何位置。
4. 悬停效果。将元素设置为绝对定位,并添加hover状态,就可以实现悬停效果。

<div class="box">
  <img src="img.jpg">
</div>
.box {
  position: relative;
}
<style>
img {
  width: 200px;
  height: 200px;
  display: block;
}

.box:hover img {
  opacity: 0.5;
}

.box:hover::after {
  content: "悬停显示";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

我们将box元素设置为相对定位,img为它的直接子元素。

当鼠标悬停在box上时,img变暗,同时通过伪元素在其上方显示"悬停显示"文字。

5. 实现图片效果。如各种悬停放大效果、图片轮播等。

弹性盒子

相关知识点

• 应用display: flex到父元素上,使其成为弹性盒子容器。
• 使用flex-direction指定主轴方向,如row(默认,主轴为水平方向)和column(主轴为垂直方向)。
• 设置子元素flex-grow属性以定义如何分配空间。
• 利用flex-shrink属性来控制元素是否收缩。
• 通过align-items来定义子元素在交叉轴方向上的对齐方式。
• 使用justify-content来定义主轴方向上的对齐方式。

注意事项:

• 默认情况下,弹性盒子元素会ushed到一起,不会自动为其创建间隔。需要自己手动设置margin。
• 利用flex-wrap和flex-flow属性可以实现多列布局。

应用

1. 等分几列布局

<div class="container">
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>
</div>
<style>
.container {
  display: flex;
}

.container div {
  flex: 1; /* 等分空间 */
}
</style>

这里我们使.container成为flex容器,其子元素div通过flex: 1等分容器的空间。

2. 主轴对齐方式

.container {
  justify-content: center; /* 居中 */
}

/* 或者 */

.container {
  justify-content: space-between; /* 两边对齐 */
}

/* 或者 */

.container {
  justify-content: space-around; /* 分散对齐 */
}

使用justify-content属性可以设置主轴(默认为水平)上的不同对齐方式。 3. 交叉轴对齐方式

.container {
  align-items: center; /* 居中 */
}

/* 或者 */

.container {
  align-items: flex-start; /* 左对齐 */
}

使用align-items属性设置交叉轴(默认为垂直)上的对齐方式。

4. 语义化的响应式导航菜单 给导航菜单 <nav> ...</nav>设置display: flex; flex-wrap: wrap;可以让菜单 items 在小屏下变成多行。