06 CSS03

NYX_UNI

已于 2023-06-12 15:14:05 修改

阅读量295

点赞数

分类专栏： CSS 零基础前端文章标签： css 前端 html

于 2022-11-08 17:02:00 首次发布

本文链接：https://blog.csdn.net/NYX_UNI/article/details/127664395

版权

零基础前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

文章目录

一、PxCook的基本使用
- 1、PxCook的基本使用
二、盒子模型
三、综合案例

目标：
1、PxCook的基本使用
2、盒子模型
3、综合案例

一、PxCook的基本使用

1、打开设计图
2、常用快捷键
3、从psd文件中直接获取数据

1、PxCook的基本使用

（1）通过软件打开设计图

①打开软件②拖拽入设计图③新建项目

（2）常用快捷键

①放大设计图：ctrl + +
②缩小设计图：ctrl + -
③移动设计图：空格按住不放，鼠标拖动

（3）常用工具

①量尺寸
②吸颜色

（4）从psd文件中直接获取数据

①切换到开发界面，直接点击获取数据

二、盒子模型

1、盒子模型的介绍
2、内容区域的宽度和高度
3、边框（border）
4、内边距（padding）
5、外边距（margin）

1、盒子模型的介绍

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型。

2、内容区域的宽度和高度

（1）作用

利用 width 和 height 属性默认设置是盒子内容区域的大小

注意：设置border会撑大盒子

（2）属性

width/height

（3）常见取值

数字+px

3、边框（border）

（1）作用

给设置边框粗细、边框样式、边框颜色效果

（2）单个属性

请添加图片描述

（3）连写形式

eg：border：10px solid red
快捷键：bd+tab

（4）单方向设置

· 场景：只给盒子的某个方向单独设置边框
· 属性名：border-方位名词
· 属性值：连写的取值

border-bottom:10px solid red
border-top
border-left
border-right

4、内边距（padding）

（1）作用

设置边框与内容区域之间的距离，会撑大盒子。

（2）属性名

padding

（3）常见取值

请添加图片描述

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的

（4）单方向设置

· 场景：只给和盒子的某个方向单独设置内边距
· 属性名：padding-方位名词
· 属性值：数字+px

（5）盒子实际大小终极计算公式

请添加图片描述

（6）不会撑大盒子的特殊情况

· 块级元素
a.如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
b.此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

（7）自动内减（CSS3盒模型）

· 作用：使width和height的实际值即为设置的值
· 属性名：box-sizing
· 属性值：border-box

box-sizing：border-box;

5、外边距（margin）

（1）作用

设置边框以外，盒子与盒子之间的距离

（2）属性名

margin

（3）常见取值

请添加图片描述

记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的

（4）单方向设置

· 场景：只给和盒子的某个方向单独设置外边距
· 属性名：margin-方位名词
· 属性值：数字+px

（5）清楚默认内外边距

· 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清楚这些标签默认的margin和padding，后续自己设置。
比如：body标签默认有margin、
比如：p标签默认有上下的margin
比如：ul标签默认由上下的margin和padding-left

（6）外边距正常情况

· 场景：水平布局的盒子，左右的margin正常，互不影响
· 结果：最终两者距离为左右margin的和

（7）外边距折叠现象-①合并现象

· 场景：垂直布局的块级元素，上下的margin会合并
· 结果：最终两者距离为margin的最大值
· 解决方法：避免就好，只给其中一个盒子设置margin即可

（8）外边距折叠现象-②塌陷现象

· 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
· 结果：导致父元素一起往下移动
· 解决方法：

①给父元素设置border-top或者padding-top（分隔父子元素的margin-top）
②给父元素设置overflow：hidden
③将父元素转换成行内块元素
④设置浮动

border-top:1px solid #000;

padding-top:1px;

（9）行内元素的margin和padding无效情况

· 场景：给行内元素设置margin和padding时
· 结果
水平方向的margin和padding布局中有效
垂直方向的margin和padding布局中无效

三、综合案例

1、综合案例1

1.1新浪导航

（1）布局顺序
从外往内，从上到下
（2）每一个盒子的样式
· 宽高
· 辅助的背景颜色
· 盒子模型的部分：border、padding、margin
· 其他样式：color、font-、text-、…

<!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>Document</title>
</head>
<style>
    * {
        /* 清除标签默认的margin和padding - 左右间隙 */
        padding: 0;
        margin: 0;
    }

    .box {
        /* 不设置宽度，块级元素默认会沾满一行 */
        height: 40px;
        /* background-color: skyblue; */
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
    }

    .box a {
        width: 80px;
        height: 40px;
        display: inline-block;
        /* background-color: pink; */
        text-decoration: none;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
    }

    .box a:hover{
        background-color: #edeef0;
        color: #ff8400;
    }
</style>
<body>
    <div class="box">
        <a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a>
    </div>
</body>
</html>

效果图：
请添加图片描述

1.2 新浪导航（优化）

（1）问题：若标签中的文字过多时，会影响布局。
（2）解决办法：
· 取消width属性-使宽度随文字自然撑开
· 设置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>Document</title>
</head>
<style>
    * {
        /* 清除标签默认的margin和padding - 左右间隙 */
        padding: 0;
        margin: 0;
    }

    .box {
        /* 不设置宽度，块级元素默认会沾满一行 */
        height: 40px;
        /* background-color: skyblue; */
        border-top: 3px solid #ff8500;
        border-bottom: 1px solid #edeef0;
    }

    .box a {
        display: inline-block;
        /* width: 80px; */
        height: 40px;
        /* 通过内边距设置边框与内容的间距 (若数值为0，单位可删除)*/
        padding: 0 20px;
        /* background-color: pink; */
        text-decoration: none;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
    }

    .box a:hover{
        background-color: #edeef0;
        color: #ff8400;
    }
</style>
<body>
    <div class="box">
        <a href="#">新浪导航</a><a href="#">新浪导航新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航</a>
    </div>
</body>
</html>

效果展示：
请添加图片描述

2、综合案例2-网页新闻列表

<!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>Document</title>
</head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 去掉行高带来的默认间隙，完成精准布局 */
            line-height: 1;
        }

        .box {
            width: 500px;
            height: 400px;
            /* background-color: pink; */
            border: 1px solid #ccc;
            padding: 41px 30px 0;
            /* 自动内减 */
            box-sizing: border-box;
        }

        .box h2 {
            height: 41px;
            /* background-color: pink; */
            border-bottom: 1px solid #ccc;
            /* 自动内减 */
            box-sizing: border-box;
            font-size: 30px;
        }

        .box ul {
            list-style: none;
        }

        .box ul li {
            height: 50px;
            padding-left: 30px;
            border-bottom: 1px dashed #ccc;
            line-height: 50px;
        }

        .box li a {
            text-decoration: none;
            font-size: 18px;
            color: #666;
        }
    </style>
<body>
    <div class="box">
        <h2>最新文章/New Aeticles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验JavaScript的魅力</a></li>
            <li><a href="#">jquery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jquery中的链式编程是什么</a></li>
        </ul>
    </div>
</body>
</html>