CSS学习—layout

最新推荐文章于 2024-07-24 11:39:30 发布

Lum1n0us

最新推荐文章于 2024-07-24 11:39:30 发布

阅读量942

点赞数

分类专栏： Web前端文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_46270220/article/details/120392428

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

盒模型

css将页面中的所有元素都设为一个矩形的盒子，将元素设为盒子后，对元素的布局就变为将不同的盒子摆放到不同的地方。每一个盒子由以下几个部分组成：

内容区(content)
内边距(padding)
边框(border)
外边距(margin)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box1{
            height: 200px;
            width: 200px;
            background-color: #0A9FE5;

            border-width: 10px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

请添加图片描述

盒模型-边框

border-width可以用来指定四个方向的宽度

border-width: 10px 20px 30px 40px;

四个值，分别代表了上、右、下、左
请添加图片描述

border-width: 10px 20px 30px;

三个值，分别代表上、左右、下；

border-width: 10px 20px;

两个值，分别代表上下、左右。

除了border-width，还有border-xxx-width，xxx可选top、right、bottom、left

border-left-width: 10px;
border-bottom-width: 20px;
border-top-width: 30px;
border-right-width: 40px;

请添加图片描述
border-color的规则和border-width一样；
border-style有几种方法：solid表示实线，dotted表示点状虚线，dashed表示虚线，double表示双线

border简写属性，通过它可以设置所有属性，且没有顺序要求

border: 20px red solid;

还有border-xxx，xxx可选top、right、bottom、left

盒模型-内边距

内容区和边框之间的距离是内边距，一共有四个方向的内边距padding-xxx

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #00AEEF;
            border: 10px red solid;

            padding-top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">hello</div>
</body>
</html>

请添加图片描述
padding内边距也有简写属性

padding: 10px 20px 30px 40px;

盒模型-外边距

外边距不会影响盒子可见框的大小，但是会影响盒子的位置，和padding类似，也是margin-xxx,也有简写属性

margin: 100px 200px 300px 400px;

水平布局

元素在其父元素中的水平位置由以下几个属性共同决定：

margin-left border-left padding-left width padding-right border-right margin-right

一个元素在其父元素中，水平布局必须满足以下等式：

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区宽度

如果相加后等式不成立，则是过度约束，等式会自动调整margin-right值使等式满足。

相对定位

相对于自己原来的位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #00d084;
            padding: 0;
        }
        #first{
            background-color: #2C9ED3;
            border: 1px dashed #00AEEF;
        }
        #second{
            background-color: #2C9ED3;
            border: 1px dashed #00AEEF;
        }
        #third{
            background-color: #2C9ED3;
            border: 1px dashed #00AEEF;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

请添加图片描述

#first{
    background-color: #2C9ED3;
    border: 1px dashed #00AEEF;
    position: relative;
    top: -20px;
    left: 10px;
}

相对定位：position: relative;，相对于原来的位置，进行指定的偏移，
请添加图片描述

小练习

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方块定位</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #ffaaaa;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #2C9ED3;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
    <div id="box">
        <a class="a1" href="#">链接1</a>
        <a class="a2" href="#">链接2</a>
        <a class="a3" href="#">链接3</a>
        <a class="a4" href="#">链接4</a>
        <a class="a5" href="#">链接5</a>
    </div>
</body>
</html>

绝对定位

基于xxx定位

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常相对于父级元素进行偏移
在父级元素内移动

在网页中下拉页面时，绝对定位的元素会随着下拉而向上移动

body{
    height: 1000px;
}
/* 绝对定位*/
div:nth-of-type(1){
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

请添加图片描述

固定定位

body{
    height: 1000px;
}
/*固定定位*/
div:nth-of-type(2){
    width: 50px;
    height: 50px;
    background: yellow;
    position: fixed;
    right: 0px;
    bottom: 0px;
}

固定定位是使元素保持在页面中的指定位置，无论是否下拉页面

Lum1n0us

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS学习—layout

文章目录盒模型盒模型—边框盒模型css将页面中的所有元素都设为一个矩形的盒子，将元素设为盒子后，对元素的布局就变为将不同的盒子摆放到不同的地方。每一个盒子由以下几个部分组成：内容区(content)内边距(padding)边框(border)外边距(margin)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒模型<
复制链接

扫一扫