前端基础——CSS布局

前端基础学习第三天

一、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&