CSS学习之盒子模型

最新推荐文章于 2022-10-11 20:45:30 发布

大雷哥～

最新推荐文章于 2022-10-11 20:45:30 发布

阅读量187

点赞数

分类专栏： Web前端 Css3 文章标签： CSS

本文链接：https://blog.csdn.net/JJJKJJ/article/details/94446473

版权

Web前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Css3

4 篇文章 0 订阅

订阅专栏

内容概述

盒子模型内容包括：

1.margin：外边距
2.border：边框
3.padding：内边距
4.content：内容
在这里插入图片描述

CSS内边距：

在这里插入图片描述

CSS边框

可以创建效果出色的边框，并可以应用与任何元素
边框的样式：border-style：定义了10个不同的非继承样式，包括none
1.边框的单边样式：
border-top-style
border-left-style
border-right-style
border-bottom-style
2.边框宽度
border-width
3.单边框宽度:
border-top-width
4.边框颜色：
border-color
5.单边框颜色
border-top-color

CSS边框：

border-radius:圆角边框
box-shadow：边框阴影
border-image:边框图片

CSS外边距

1.css外边距：围绕在内容边框的区域就是外边距，外边距默认是透明区域
外边距接收任何长度单位、百分数值
2.外边距常用属性
在这里插入图片描述
背景颜色距左距上都有一个空格、可以添加下面代码消除：

body{
		margin=0px;
}

3.内外边距合并：与大的边距相同

影子模型应用

index.html 内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型应用</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="top">
        <div class="content"></div>
    </div>
    <div class="body">
        <div class="body_image"></div>

        <div class="body_content">
            <div class="body_no"></div>
        </div>
    </div>
    <div class="footing">
        <div class="footing_content"></div>
        <div class="subnav"></div>
    </div>
</body>
</html>

style.css内容：

/*所有外边距都是0*/
*{
    margin:0px;
}
.top{
    width: 100%;
    height:50px;
    background-color: black;
}
.content{
    width:75%;
    height:50px;
    margin:0 auto;/*设置上下为0，左右自适应*/
    background-color: blue;
}
.body{
    margin:20px auto;
    width:75%;
    height:1500px;
    background-color: green;
}
.body_image{
    width:100%;
    height:400px;
    background-color: aqua;
}

.body_content{
    width: 100%;
    height:1100px;
    background-color: darkorchid;
}
.body_no{
    width: 100%;
    height:50px;
    background-color: darkkhaki;
}
.footing{
    width:100%;
    height:400px;
    background-color: brown;
    margin:0px auto;
}
.footing_content{
    width:100%;
    height:350px;
    background-color: chocolate;
}
.subnav{
    width:100%;
    height: 50px;
    background-color: darkorchid;
}

CSS 常用操作

对齐操作：
尺寸操作：
分类操作：
导航栏：
图片操作：

对齐操作

1.使用margin属性进行水平对齐

margin：0px auto;<--上下0，左右自适应，这是居中对齐-->

2.使用position属性进行左右对齐

position:right

3.使用float属性进行左右对齐

float:left

在这里插入图片描述

分类操作（都放在css文件中）

在这里插入图片描述

导航栏

导航栏都是列表形式存在
css文件内容

ul{
    list-style-type: none;/*去掉列表项的点*/
    margin :0px;
    padding: 0px;
}
a:link,a:visited{
    text-decoration: none;/*去掉下划线*/
    display: block;/*块元素*/
    background-color: chocolate;
    color: blue;
    width: 50px;
    text-align: center;/*文字居中*/
}
a:active,a:hover{
    background-color: aqua;
}

index.html文件内容

<body>
    <ul>
        <li><a href="#">导航一</a></li>
        <li><a href="#">导航二</a></li>
        <li><a href="#">导航三</a></li>
        <li><a href="#">导航四</a></li>
    </ul>

在这里插入图片描述
这种事垂直列表
变成水平列表项

ul{
    list-style-type: none;/*去掉列表项的点*/
    margin :0px;
    padding: 0px;
}
a:link,a:visited{
    text-decoration: none;/*去掉下划线*/

    background-color: chocolate;
    color: blue;
    width: 50px;
    text-align: center;/*文字居中*/
}
a:active,a:hover{
    background-color: aqua;
}
li{
    display: inline;
}

大雷哥～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习之盒子模型

内容概述盒子模型内容包括：1.margin：外边距2.border：边框3.padding：内边距4.content：内容CSS内边距：CSS边框可以创建效果出色的边框，并可以应用与任何元素边框的样式：border-style：定义了10个不同的非继承样式，包括none1.边框的单边样式：border-top-styleborder-left-styleborder-...
复制链接

扫一扫

专栏目录