前端基础——CSS布局

前端基础学习第三天

文章目录

前端基础学习第三天
- 一、CSS布局
- - 1.margin（外边距）
  - 2.padding（内边距）
  - 3.position
  - 4.float
- 二、布局实例
- - 1.浮动布局
  - 2.弹性布局（flex布局）
  - - （1）flex-direction
    - （2）flex-wrap
    - （3）flex-flow
    - （4）justify-content
    - （5）align-items
    - （6）align-content

一、CSS布局

学习布局之前，我先要认识CSS中的这几个属性：margin、padding、position。

1.margin（外边距）

它分别可以设置上、右、下、左四个边的外边距，一般写法是：

margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

也可以这样写：

margin:10px 25px 75px 100px;

10px表示上外边距；25px表示右边；75px表示下边；100px表示左边。

margin:10px 50px 100px;

10px表示上边；50px表示右边和左边；100px表示下边。

margin:10px 50px;

10px表示上边和下边；50px表示右边和左边.

margin:50px;

四个边都是50px。

margin还有一个值，auto值，它可以表示外边距居中（垂直居中面试题中有用到）。

行内元素使用margin改变外边距，左右两边生效，上边和下边不生效。

2.padding（内边距）

和margin一样的写法，不过它是设置内边距，而且行内元素使用它，只有上边是不生效的。

3.position

position有五个值，static、fixed、relative、absolute、sticky，它们的作用如下：

值	作用
static	position默认值
fixed	固定元素，含有滚动条的页面，在滚动时该元素不会移动
relative	相对定位，相对于其元素自身之前位置定位
absolute	绝对定位，相对于其最近的父级元素进行定位
sticky	粘性定位，滚动条滚动时元素会始终在页面内

其中绝对定位的用法：

<style>.father{width: 300px;height: 300px;position: relative;  //也可写position:absolute;background-color: cornflowerblue;}.son{width: 50px;height: 50px;position: absolute;background-color: crimson;left:50px;top: 50px;}
</style>

<div class="father"><div class="son"></div>
</div>

运行结果：

4.float

float浮动，使元素在固定位置浮动起来，float会使元素脱离文档流，但不会脱离文本流，所以浮动的元素会固定在一个位置，文本内容会围绕着周围。

（position属性中的absolute绝对定位会使元素脱离文档流和文本流，可以用float和position:absolute做两边固定中间自适应布局）

<style>img{height: 200px;float:left;margin: 10px;}
</style>
</head><p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F13%2F20200213195153_MwKPS.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644460734&t=81a2f1c4e1a9ee362fa79d06c8c316be">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
</p>

运行结果：

给一排图像设置浮动：

<style>img{height: 200px;float:left;margin: 10px;}
</style><p><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F13%2F20200213195153_MwKPS.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644462392&t=271fe1a1d3b6784b50378b230aabd4e3"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F13%2F20200213195153_MwKPS.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644462392&t=271fe1a1d3b6784b50378b230aabd4e3"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F13%2F20200213195153_MwKPS.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644462392&t=271fe1a1d3b6784b50378b230aabd4e3"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F13%2F20200213195153_MwKPS.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644462392&t=271fe1a1d3b6784b50378b230aabd4e3"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202002%2F13%2F20200213195153_MwKPS.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644462392&t=271fe1a1d3b6784b50378b230aabd4e3">
</p>

运行结果：

二、布局实例

网页一般会分为头部、导航栏、内容区域以及尾部（想想语义化标签<header>、<article>、<footer>等），布局主要在内容区域做文章。形式一般分为一列布局、两列布局以及三列布局。

1.浮动布局

就拿两列布局来说，我想做一个左边区域固定，右边自适应的布局。

实现如下：

<style>body{margin: 0;  //去掉白边padding: 0;}.head{height: 50px;background-color: #bbb;font-size:x-large;padding: 20px;text-align: center;}.article1{width: 200px;background-color: burlywood;font-size:x-large;text-align: center;position: absolute;top: 90px;bottom: 90px;}.article2{width: 100%;background-color:lemonchiffon;font-size:x-large;text-align: center;position: absolute;top: 90px;bottom: 90px;}.footer{width: 100%;height: 50px;background-color: #aaa;font-size:x-large;padding: 20px;text-align: center;position: absolute;bottom: 0;}
</style><div class="head">头部区域</div><div class="article2">右边自适应</div><div class="article1">左边固定</div><div class="footer">尾部</div>

运行效果：

2.弹性布局（flex布局）

弹性布局（flex布局）是目前用的比较多的布局形式，它相对来说具有很大灵活性，任何一个元素都可以用flex布局。

flex布局会将父元素作为容器，容器中的子元素就是项目，容器承载着项目，容器本身还是遵守它自身元素属性，存在于文档流之中；容器中的项目则全都脱离了文档流。将display:flex写在作为容器的父元素中，容器内的元素就遵守弹性布局规则了。

写在容器上的属性：

flex-direction（排列方向）
flex-wrap（规定换行）
flex-flow（前两种综合）
fjustify-content（主轴方向对齐方式）
align-items（交叉轴对齐方式）
align-content（多轴线对齐方式）

（1）flex-direction

四个值分别对应四种排列方向：row（默认从左往右）、row-reverse（从右往左）、column（从上至下）、column-reverse（从下至上）。

（2）flex-wrap

flex-wrap共有三个值：nowrap（默认不换行，会挤压元素）、wrap（换行，第一行在上）、wrap-reverse（换行，第一行在下）。

我设定的元素均是高宽相等，此时已经被挤压↑

（3）flex-flow

排列和对齐综合体，写法是flex-flow:row nowrap;row nowrap是默认值。

（4）justify-content

设定主轴方向的对齐方式，有五个值：flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐）、space-around（两段间隔相等）

space-around中，项目之间间隔是两段间隔的一倍。

（5）align-items

同样有五个值：flex-start（顶端对齐）、flex-end（底部对齐）、center（中点对齐）、baseline（第一行文本的基线对齐）、stretch（默认值，未设置高度则占满整个容器）。

（6）align-content

多轴线的对齐方式，只有一根轴线不起作用。共六个值：flex-start、flex-end、center、space-between、space-around、stretch（默认值）。

效果是这样：

写在项目里的属性：

order（数值小的排在前方，例：-1，0，1，2这样排列，默认值为0）
flex-grow（放大比例，默认值为0不放大）
flex-shrink（缩小比例，默认值为1空间不足会缩小，无负值）
flex-basis（项目占主轴空间的大小，默认值auto）
align-self（和align-items属性一样，是可以规定单个项目的对齐方式的，默认值为auto，表示继承父元素的align-items属性）