前端入门教程(六)

最新推荐文章于 2024-03-04 17:45:50 发布

李元芳芳芳

最新推荐文章于 2024-03-04 17:45:50 发布

阅读量368

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_51164450/article/details/119712484

版权

前端专栏收录该内容

19 篇文章 3 订阅

订阅专栏

1.盒子模型

网页布局要学习三大核心，盒子模型，浮动和定位，学习好盒子模型能非常好的帮助我们布局页面
1.1 看透网页布局的本质
在这里插入图片描述
网页布局过程：
1.先准备好相关的网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容
网页布局的核心本质：就是利用CSS摆盒子
1.2 盒子模型(Box Model)组成
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容
在这里插入图片描述
1.3 边框（border）
CSS边框属性允许我们指定一个元素边框的样式和颜色
border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色
语法：

border : border-width || border-style || border-color

边框粗细：单位是px
边框样式：solid 实线边框 dashed 虚线边框 dotted 点线边框
边框简写：

border: 1px solid red; 没有顺序

边框分开写法：

border-top: 1px solid red; /*只设定上边框，其余同理*/ 
border-bottom//下边框
border-left
border-right

1.4 表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框

border-collapse:collapse;

collapse单词是合并的意思
border-collapse:collapse;表示相邻边框合并在一起
1.5 边框会影响盒子实际大小
1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框，则需要width/height 减去边框宽度
1.6 内边距(padding)
padding属性用于设置内边距，即边框与内容之间的距离
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
padding属性（简写属性）可以有一到四个值

padding: 5px;
1个值，代表上下左右都有5像素内边距

padding: 5px 10px;
2个值，代表上下内边距是5像素，左右内边距是10像素；

padding: 5px 10px 20px;
3个值，代表上内边距5像素，左右内边距10像素，下内边距20像素

padding: 5px 10px 20px 30px;
4个值，上是5像素 右10像素 下20像素 左是30像素，顺时针

以上4种情况，我们实际开发都会遇到
当我们给盒子指定padding值之后，发生了2件事情：
1.内容和边框有了距离，添加了内边距
2.padding影响了盒子实际大小
也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子，我们需要修改盒子宽度
解决方案：
如果保证盒子跟效果图大小保持一致，则让width/height 减去多出来的内边距大小即可。
padding应用-----新浪导航栏

<!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>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }
        
        .nav a {
            display: inline-block;
            /*行内块元素*/
            height: 16px;
            font-style: 12px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0, 20px;
        }
        
        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>

</html>