• 06 CSS03

    文章目录


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

    一、PxCook的基本使用

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

    • 1
    • 2
    • 3

    1、PxCook的基本使用

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

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

    （2）常用快捷键

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

    （3）常用工具

    ①量尺寸
    ②吸颜色

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

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

    二、盒子模型

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

    • 1
    • 2
    • 3
    • 4
    • 5

    1、盒子模型的介绍

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

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

    （1）作用

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

    注意：设置border会撑大盒子

    • 1

    （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

    • 1
    • 2
    • 3
    • 4

    4、内边距（padding）

    （1）作用

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

    （2）属性名

    padding

    （3）常见取值

    请添加图片描述

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

    • 1

    （4）单方向设置

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

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

    请添加图片描述
    请添加图片描述

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

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

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

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

    box-sizing：border-box;

    • 1

    5、外边距（margin）

    （1）作用

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

    （2）属性名

    margin

    （3）常见取值

    请添加图片描述

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

    • 1

    （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
③将父元素转换成行内块元素
④设置浮动

    • 1
    • 2
    • 3
    • 4
    border-top:1px solid #000;

    • 1
    padding-top:1px;

    • 1

    （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>Documenttitle>
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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    效果图：
    请添加图片描述

    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>Documenttitle>
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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

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

    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>Documenttitle>
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 Aeticlesh2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，phpa>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> 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    效果：
    请添加图片描述

  • 相关阅读:
    SpringBoot项目实现发布订阅模式，真的很简单
    1972：【15NOIP普及组】推销员
    关闭windows防火墙命令
    QCC51XX---Kymera调节音量
    华为坤灵管理型交换机S300,S500,S310,S210,S220,S200 web端开局配置
    第十四章 Productions最佳实践 - 创建或编辑路由进程
    每日一题 1143最长公共子序列（LCS）（灵神版本）
    Linux —— 进程概念超详解！(持续更新……)
    PTrade获取交易日期——时间相关函数1
    linux内核漏洞（CVE-2022-0847）
  • 原文地址：https://blog.csdn.net/NYX_UNI/article/details/127664395