css布局(盒子,浮动,定位position,弹性盒子flex)

本文详细介绍了CSS布局中的盒子模型,包括内容区、边框、内边距和外边距;浮动布局的概念及应用;定位布局的静态、相对和绝对定位;以及弹性盒子模型的常见属性和对齐方式,帮助开发者更好地理解和运用CSS布局。
摘要由CSDN通过智能技术生成

目录

前言

一、盒子布局

 相关属性

1,内容区(content)

2,边框(border)

3,内边距(padding)

3,外边距(margin)

二、浮动布局

三,定位布局position

1,position:static静态定位。

2,position:relative相对定位。

3,position:absolute绝对定位。

四,弹性盒子flex

 常见的flex属性

在Flex容器中对齐Flex项目

沿主轴对齐Flex项目

沿横轴对齐Flex项目


前言

CSS 定义如何显示HTML 元素,用于控制Web页面的外观。实现页面的内容与表现形式分离,提高效率。


一、盒子布局

元素占空间的矩形元素框,看作是一个盒子。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成,内容区(content)、填充(padding)、边框(border)和空白外边距(margin)。

 相关属性

1,内容区(content)

内容区是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区有三个属性,width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度,当内容信息太多,超出内容区所占范围时,可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时,溢出部分将不可见;为visible时,溢出的内容信息可见,只是被呈现在盒子的外部;当为scroll时,滚动条将被自动添加到盒子中,用户可以通过拉动滚动条显示内容信息;当为auto时,将由浏览器决定如何处理溢出部分。

2,边框(border)

边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性,如果没有指定边框样式,其他的边框属性都会被忽略,边框将不存在。CSS有dotted(点线)、dashed(虚线)、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度,其属性值可以是长度计量值,也可以是CSS规定的thin、medium 和thick。在设定以上三种边框属性时,既可以进行边框四个方向整体的快捷设置,也可以进行四个方向的专向设置,如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

3,内边距(padding)

内容区和边框之间的空间。填充的属性有五种 ,即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时,可使背景色延伸到填充区域。

3,外边距(margin)

位于盒子的最外围,是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起,是CSS 布局的一个重要手段。空白边的属性有五种 ,即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin,其具体的设置和使用与填充属性类似。对于两个相邻的(水平或垂直方向 )且设置有空白边值的盒子,他们邻近部分的空白边将不是二者空白边的相加,而是二者的并集。若二者邻近的空白边值大小不等,则取二者中较大的值。同时,CSS 容许给空白边属性指定负数值,当指定负空白边值时,整个盒子将向指定负值方向的相反方向移动,以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素分类</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
/* display: inline; */
}
a{
width: 100px;
height: 100px;
border: 1px solid black;
display: block;
}
.one{
/* width: 100px;
height: 100px;
background-color: red;
display: none; */
width: 0;
}
</style>
</head>
<body>
<div class="one"></div>
<div>这二div</div>
<a href="#">1</a>
<a href="#">2/a>
<a href="#">3</a>
</body>
</html>

二、浮动布局

让设置的标签产生漂浮效果,脱离原来在页面本应出现的空间位置,不再占用任何文档流空间。元素设置为浮动以后,会生成一个块级元素,而不论它本身是何种元素。且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
float: left;
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">一div</div>
<div class="box2">二div</div>
<div class="box3">三div</div>
</body>
<html>

三,定位布局position

浮动元素因为存在于正常的文档布局流之外,所以他们在父元素中所占的面积的有效高度为0,非浮动元素的外边距不能用于它们和浮动元素之间来创建空间,可以使用一个空白的div,对其使用clear:both进行浮动的清除

1,position:static静态定位。

每个元素获取的默认值,意味着将元素放入它在文档布局流中的正常位置上,不改变原始布局

2,position:relative相对定位。

相对于父元素(上一个元素)为参照物,其他元素不受影响

3,position:absolute绝对定位。

元素脱离了文档流,不占据空间(变成阿飘浮在上面或者藏在下面),相对于最近的非static祖先元素定位,如果在body下直接设置absolute,元素还是处于当前位置上,不过这个元素之后的其他元素可能会把它给覆盖掉。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位布局</title>
<style>
.box1{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
/* position:absolute;
top: 100px;
left: 200px; */
}
.box2{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: blue;
position: relative;
left: 200px;
}
.box3{
width: 200px;
height: 200px;
border: 1px solid black;
background-color:green;
}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>

四,弹性盒子flex

打开flex布局,只需要设置display:flex

 常见的flex属性

每个元素获取的默认值,意味着将元素放入它在文档布局流中的正常位置上,不改变原始布局

flex-direction:row/column/row-reverse/column-reverse/initial/inherit:控制弹性盒子的排列方向

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-direction: column-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
</div>
</body>
</html>

flex-wrap:nowrap/wrap/wrap-reverse/initial/inherit:控制子元素整体宽/高超出父元素宽/高时需要拆行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
flex-wrap: wrap-reverse;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
</div>
</body>
</html>

flex-flow:flex-direction + flex-wrap\n\nflex-grow:填写一个数字,规定弹性子元素相对于其他子元素进行扩展的量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒子</title>
<style>
.flex-contain{
width: 400px;
height: 350px;
background-color: orange;
display: inline-flex;
/* flex-flow: column-reverse wrap; */
flex-direction: column-reverse;
flex-wrap: wrap;
}
.flex-item{
width: 100px;
height: 100px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex-contain">
<div class="flex-item">flex item1</div>
<div class="flex-item">flex item2</div>
<div class="flex-item">flex item3</div>
<div class="flex-item">flex item4</div>
<div class="flex-item">flex item5</div>
<div class="flex-item">flex item6</div>
<div class="flex-item">flex item7</div>
<div class="flex-item">flex item8</div>
<div class="flex-item">flex item9</div>
</div>
</body>
</html>

flex-shrink:填写一个数字,定义子元素在超过父元素大小的缩放比例\

flex-basis:规定子元素的初始长度

 flex:flex是flex-grow, flex-shrink和flex-basis的结合

flex-basis是每个子元素的原始宽度,根据原始子元素的宽度和跟父元素的宽度进行比较,来计算子元素的真实宽度,最后展现出来的子元素是按照父元素宽度布局的。

flex容器(flex container)和flex子项(flex item):前者是设置了display:flex的父元素(这个元素的子元素都按照flex布局来排列啦),后者就是这个父元素的子元素们

在Flex容器中对齐Flex项目

有四个属性justify-contentalign-contentalign-itemsalign-self指定弹性容器内的弹性项目的对准。其中的前三个适用于flex容器,而最后一个适用于单个flex项目。

沿主轴对齐Flex项目

使用justify-content属性,可以将伸缩项沿伸缩容器的主轴(即在水平方向上)对齐。通常在弹性项目未使用主轴上所有可用空间的情况下使用。

justify-content属性接受以下值:

  • flex-start-默认值。弹性项目放置在主轴的起点。

  • flex-end -Flex项目位于主轴的末端。

  • center  - Flex的项目放置在主轴线的与等量的自由空间在两端的中心。如果剩余的自由空间为负,即项目溢出,则弹性项目将在两个方向上均等溢出。

  • space-between -的Flex项都沿着主轴线,其中第一项放置在主起始沿和最后一个放置在主端均匀地分布。如果项目溢出或只有一项,则此值等于flex-start。

  • space-around -Flex项在两端均以一半大小的空间均匀分布。如果它们溢出或只有一项,则此值等于center。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex项目沿着主轴对齐示例 -基础教程 (cainiaojc.com)</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
	font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-justify-content: space-around;
    /* Standard syntax */
    display: flex;
    justify-content: space-around;
}
.flex-container div{
    padding: 10px;
}
.item1 {
    width: 75px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>

沿横轴对齐Flex项目

可以使用align-items或align-self属性沿Flex容器的横轴(即垂直方向)对齐Flex项目。但是,在将align-items应用于flex容器时

  • flex-start — Flex项目位于交叉轴的起点。

  • flex-end — Flex项目位于交叉轴的末端。

  • center —伸缩项放置在横轴的中心,两端具有相等的可用空间。如果剩余的自由空间为负,即项目溢出

  • baseline —每个弹性项目的文本基准(或内联轴)与最大的弹性项目的基线对齐font-size

  • Stretch —伸缩项目将拉伸以填充当前行或列,除非由最小和最大宽度或高度阻止。align-items属性的默认值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flex项目沿着十字轴对齐示例- (cainiaojc.com) 基础教程</title>
<style> 
.flex-container {
    width: 500px;
    min-height: 300px;
    margin: 0 auto;
	font-size: 32px;
    border: 1px solid #666;
    /* Safari */
    display: -webkit-flex;
    -webkit-align-items: center;
    /* Standard syntax */
    display: flex;
    align-items: center;
}
.flex-container div{
    padding: 10px;
}
.item1 {
    width: 75px;
    height: 100px;
    background: #e84d51;
}
.item2 {
    width: 125px;
    height: 200px;
    background: #7ed636;
}
.item3 {
    width: 175px;
    height: 150px;
    background: #2f97ff;
}
</style>
</head>
<body>
    <div class="flex-container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>
</html>
  • 18
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值