Web前端学习（2）

最新推荐文章于 2023-08-03 20:46:44 发布

Alpha205

最新推荐文章于 2023-08-03 20:46:44 发布

阅读量810

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/zj1131190425/article/details/104557567

版权

前端学习专栏收录该内容

19 篇文章 2 订阅

订阅专栏

1. CSS基础语法：

格式：

选择器{属性：值}

在html中，通过标签<style>引入CSS样式：
常用属性：
width: 宽度

height: 高度

background-color: 背景色

表示长度的单位：

1.px 像素

2. % 百分比，由父容器的大小决定

2. 内联样式与内部样式

内联样式：在html标签上直接添加style属性是实现

内部样式：通过style标签引入CSS样式，优点：可以实现代码复用，符合W3C标准，实现样式和结构分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>      <!--内部样式-->
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
   <div>This is a block</div>
</body>
</html>

3. 外部样式

通过引入单独的css文件进行样式控制

属性： rel 引入资源的类型 href: 引入资源的地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/common.css">
</head>
<body>
   <div>This is a block</div>
</body>
</html>

通过@import引入外部资源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="../CSS/common.css">-->
    <style>
        @import "../CSS/common.css";
    </style>
</head>
<body>
   <div>This is a block</div>
</body>
</html>

在实际的开发中，建议通过<link>引入CSS文件

4. CSS中颜色表示法：

1. 单词表示法

2. 十六进制表示法

3. RGB三原色表示法

5.背景样式

background-color: 背景颜色

background-image: 背景图片 (默认水平垂直都铺满背景图)

background-repeat: 背景图片的平铺方式 (reprat-x, repeat-y, repeat, no-repeat) (图片相对于容器的大小)

background-position: 背景图片的位置（x,y) 沿着xy轴移动的距离以及方向 (left, center, right)(top, middle, bottom)

background-attachment: 背景图随滚动条的移动方式 (scroll：基于容器进行移动, fixed基于浏览器进行移动)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/common.css">
</head>
<body>
   <div></div>
</body>
</html>

CSS样式代码：

div{
     width: 300px;
     height: 300px;
     background-color: blue;
     background-image: url("../picture/sun.gif");
     background-repeat: no-repeat;
     background-position: center, center;
     background-attachment: scroll;
 }

练习：利用滚动条移动方式实现视觉差网页

实现保持背景图像不移动，容器进行移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sec1{
            width: 1980px;
            height: 800px;
            background-image: url("../picture/timg1.jpg");
            background-attachment: fixed;
        }
        .sec2{
            width: 1980px;
            height: 800px;
            background-image: url("../picture/timg2.jpg");
            background-attachment: fixed;
        }
        .sec3{
            width: 1980px;
            height: 800px;
            background-image: url("../picture/timg3.jpg");
            background-attachment: fixed;
        }
        table{
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="sec1">
        <table border="1" cellspacing="3" cellpadding="5">
            <caption>课程价格表(详细)</caption>
            <!--table head-->
            <thead>
            <tr align="center" valign="center">
                <th>班次名称</th>
                <th>科目</th>
                <th>授课内容</th>
                <th>增值服务</th>
                <th>课时</th>
                <th>价格</th>
                <th>试听</th>
                <th>购买</th>
            </tr>
            </thead>
            <!--table body-->
            <tbody>
            <tr align="center" valign="center">
                <td rowspan="3">真题精解班</td>
                <td>行测.申论</td>
                <td>全科历年真题精解</td>
                <td rowspan="3">课后赠两套模拟卷，24小时以内答疑</td>
                <td>48</td>
                <td>1200&#65509;</td>
                <td><img src="../picture/rain.gif" alt=""></td>
                <td><img src="../picture/rain.gif" alt=""></td>
            </tr>

            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>行测</td>
                <td>行测历年真题精解</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>32</td>
                <td>980&#65509;</td>
                <td><img src="../picture/rain.gif" alt=""></td>
                <td><img src="../picture/rain.gif" alt=""></td>
            </tr>

            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>申论</td>
                <td>申论历年真题精解</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>16</td>
                <td>580&#65509;</td>
                <td><img src="../picture/rain.gif" alt=""></td>
                <td><img src="../picture/rain.gif" alt=""></td>
            </tr>

            <tr align="center" valign="center">
                <td rowspan="3">高分技巧班</td>
                <td>行测.申论</td>
                <td>全科技巧强化</td>
                <td rowspan="3">入学试卷测评，24小时以内答疑</td>
                <td>32</td>
                <td>980&#65509;</td>
                <td><img src="../picture/sun.gif" alt=""></td>
                <td><img src="../picture/sun.gif" alt=""></td>
            </tr>

            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>行测</td>
                <td>行测速解技巧强化</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>18</td>
                <td>680&#65509;</td>
                <td><img src="../picture/sun.gif" alt=""></td>
                <td><img src="../picture/sun.gif" alt=""></td>
            </tr>

            <tr align="center" valign="center">
                <!--<td>真题精解班</td>-->
                <td>申论</td>
                <td>申论速解技巧强化</td>
                <!--<td>课后赠两套模拟卷，24小时以内答疑</td>-->
                <td>14</td>
                <td>580&#65509;</td>
                <td><img src="../picture/sun.gif" alt=""></td>
                <td><img src="../picture/sun.gif" alt=""></td>
            </tr>

            </tbody>
            <!--table foot-->
            <tfoot>

            </tfoot>
        </table>
    </div>
    <div class="sec2"></div>
    <div class="sec3"></div>
</body>
</html>

实际效果：

6. 边框样式：

border-style: 边框的样式（solid, dotted, dashed）

border-width: 边框的宽度

: 边框的颜色

同时也可以正对某一条边进行单独设置。 border-xxx-color(其中xxx可以为left, right, top, bottom)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .sec1{
           width: 100px;
           height: 80px;
           border-style: dashed;
           border-width: 3px;
           border-color: red;
           border-left-style: dot-dash;    /*<!--针对特定的边-->*/
       }
    </style>
</head>
<body>
    <div class="sec1"></div>
    <div class="sec2"></div>
</body>
</html>

7. CSS文字样式

font-family: 字体类型（字体类型中有空格的时候，需要用引号，如果没有空格，则不需要引号）

1. 英文字体

2. 中文字体

3. 衬线体与非衬线体

font-size: 字体大小（默认大小16像素）

1. 使用像素大小直接表示‘（字体大小一般用偶数表示，为了对齐，大小除以2是整数）

2. 使用单词(large, small, medium)表示

font-weight: 字体的粗细

1. 表示方法（bold, norm....）

2. 写法 number （100， 200， .... 900，每隔100）

font-style: 字体样式正常/斜体

color: 字体的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           font-family: 华文楷体;
           font-size: large;
           font-style: italic;
           font-weight: bold;
           color: deeppink;
       }
    </style>
</head>
<body>
    <div>前端开发</div>
</body>
</html>

8. CSS段落样式

text-decoration: 文本修饰

1. 下划线： underine

2. 删除线 : line-through

3. 上划线: overline

text--transform: 文本大小写

1. 大写 uppercase

2. 小写 lowercase

3.首字母大写 captialize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .sec1{
           width: 300px;
           /*text-decoration: underline;*/
           /*text-decoration: overline;*/
           text-decoration: line-through;
       }
        .sec2{
            /*text-transform: capitalize;*/
            /*text-transform: uppercase;*/
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="sec1">
        古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。他在座谈会现场
        回答新华社记者提问时说，为了有效防控新冠肺炎疫情，很多中国人无法过上正常生
        活。“我要向所有目前生活在中国的人、那些无法过上正常生活的人表达感激之情”。中国
        人民为防控疫情做出了巨大牺牲，“他们正在为全人类做出贡献”。
    </p>

    <p class="sec2">
        this is a test paragraph.
    </p>
</body>
</html>

text-indent: 文本缩进

1. 缩进固定大小的px

2.缩进em单位，em是一个相对单位，一个em等于一个字体的大小，所以不用设定具体的像素

text-align：文本对齐方式：

1. left : 左对齐
2. center：中间对齐

3. right：右对齐

4. justify：两端点对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .sec1{
           width: 300px;
           text-indent: 2em;
           /*text-align: left;        !*左对齐*!*/
           /*text-align: right;*/
           /*text-align: center;*/
           text-align: justify;
       }
    </style>
</head>
<body>
    <p class="sec1">
        古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。他在座谈会现场
        回答新华社记者提问时说，为了有效防控新冠肺炎疫情，很多中国人无法过上正常生
        活。“我要向所有目前生活在中国的人、那些无法过上正常生活的人表达感激之情”。中国
        人民为防控疫情做出了巨大牺牲，“他们正在为全人类做出贡献”。
    </p>

</body>
</html>

line-height: 定义行高（行高包括：字体大小，上边距，下边距，一行文字的高度，上边距与下边距是等价关系）

1.取值 px

letter-spacing: 定义字间距，单位：像素

word-spacing: 定义词间距 (针对英文段落)

针对英文单词进行折行：

word-break: break-all 强制折行 (强烈)

word-wrap: break-word 强制折行（不那么强烈，会产生空白区域）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .sec1{
           width: 300px;
           text-indent: 2em;
           /*text-align: left;        !*左对齐*!*/
           /*text-align: right;*/
           /*text-align: center;*/
           text-align: justify;
           line-height: 25px;
           letter-spacing: 2px;
       }
    </style>
</head>
<body>
    <p class="sec1">
        古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。他在座谈会现场
        回答新华社记者提问时说，为了有效防控新冠肺炎疫情，很多中国人无法过上正常生
        活。“我要向所有目前生活在中国的人、那些无法过上正常生活的人表达感激之情”。中国
        人民为防控疫情做出了巨大牺牲，“他们正在为全人类做出贡献”。
    </p>

</body>
</html>

9.CSS复合样式

1. 一个CSS属性只控制一种样式，叫做单一样式

2. 一个CSS属性控制多种样式，叫做复合样式 ,通过空格将属性值分隔

例如，复合样式：

background, border, font

10.CSS选择器

1. id选择器

html：id="xxx"，为标签创建id （标签的id是唯一的）

css: #xxx{ } , css按照id选择标签

xxx的命名方法：
(1). 驼峰命名法 xxxYyyy

(2). 下划线命名法 xxx_yyy

(3). 短线命名法 xxx-yyy （推荐）

-------------------------------------------------------------

2. class选择器

html: class="xxx" ，为标签创建属性 (属性可以不唯一，且一个标签可以有多个属性)

css: .xxx{ }，css按照class选择标签

选择具有特定属性的某一标签：例如div.box1{ ... }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #sec1{
           width: 300px;
           height: 80px;
           line-height: 20px;
           text-align: justify;
           text-indent: 2em;
           background-color: #fff517;
           word-spacing: 2px;
       }

       #sec2{
           width: 300px;
           height: 100px;
           line-height: 20px;
           text-align: justify;
           text-indent: 2em;
           background-color: #ff383d;
       }

        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        div.box1{                           /* 选择具有box1属性的div标签 */
            background-image: url("../picture/sun.gif");
        }

    </style>
</head>
<body>
    <p id="sec1">
        古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。
    </p>

    <p id="sec2">
        古特雷斯当日造访日内瓦世卫组织总部，并与世卫组织各部门负责人举行座谈。
    </p>

    <div class="box1"></div>

</body>
</html>

3. 标签选择器（Tag选择器）
使用场景：
去掉某些标签的默认行为；使用在复杂的选择器中，如层次选择器

群组选择器：可以将不同的标签，属性，id写道一起，设置相同的CSS样式，达到CSS代码的复用

通配选择器：*{ }，给所有的标签添加统一的样式。（不推荐）

层次选择器：（包括）

后代 M N

父子 M>N

兄弟 M~N M标签下面的N标签

相邻 M+N M下面相邻的N标签

4. 属性选择器

只对带有某种特定属性的标签设置CSS样式：

例如：

div[class]: 所有含有class属性的div标签

div[class=xxx]：class属性为xxx的div标签 (完全匹配)

div[class*=xxx]: class属性包含xxx的div标签 (部分匹配)

div[class^=xxx]: class属性起始包含xxx的div标签 (起始匹配)

div[class$=xxx]: class属性结束包含xxx的div标签 (结束匹配)

div[class][id]: 既有class又有id的div标签（组合匹配）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[class]{                /* 选择具有class属性的div标签*/
            background-color: aquamarine;
        }

        div[class=search]       /*只有class属性为"search"的标签才能被选中*/
        {
            border-style: dashed;
        }

        div[class*=search]     /*仅仅选中class属性中含有search的标签*/
        {
            border-left-color: red;
        }
    </style>
</head>
<body>
    <div>aaaaaaa</div>
    <div class="search">bbbbbb</div>
    <div class="search-box">ccccc</div>
    <div class="search-button">ddddd</div>
</body>
</html>

5. hover等伪类选择器：

css伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用伪类来添加。

:link 访问签的样式（只针对<a>标签）

:visited 访问后的样式（只针对<a>标签）

:hover 鼠标移入后的样式

:active 鼠标按下时的样式

:after 通过伪类的方式给标签中的元素元素添加一个文本内容

:before 通过伪类的方式给标签中的元素元素添加一个文本内容

通过after以及before伪类可以为文本添加额外的文本以及CSS样式

div:before{ content: "xxx"; color: red }

----------------------------------------------------------------------

:checked, :disabled, :focus都是针对表单元素的

checked: 当表单被选中时呈现出特定的样式

disabled: 当表单被禁止后具有的CSS样式

focus: 当表单被点击后具有的CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div:hover     /*设置鼠标移入后的样式*/
        {
            background-color: blue;
        }
        div:active
        {
            background-color: bisque;
        }

        /*设置<a>标签的样式*/
        a
        {
            color: red;
            font-style: italic;
        }
        a:visited
        {
            color: gray;
            font-style: normal;
        }

        p:before
        {
            content: "world";      /*添加到hello的前面* , 且可以单独进行样式的设置/
            color: blue;
        }
        p:after{
            content: "world";       /*添加到hello的后面*/
            color: aqua;
        }

        :checked
        {
            width: 15px;
            height: 15px;
        }

        :disabled
        {
            width: 8px;
            height: 8px;
        }

        :focus
        {
            background-color: red;
        }

    </style>
</head>
<body>
    <div></div>
    <a href="https://www.baidu.com/index.php?tn=monline_3_dg" target="_self">
        访问百度
    </a>
    <p>hello</p>

    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox" disabled>
    <input type="text">

</body>
</html>

结构伪类选择器：

nth-of-type 控制列表的第n项

first-of-type 控制第一项

last-of-type 控制最后一项

only-of-type 列表只有一项的时候，控制这唯一的一项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
       li:nth-of-type(3)
       {
           background-color: red;
       }
        */
        /*参数可以为1，2，3...   还可以为n, 代表1，2，3，4...无穷大*/
        /*实现隔行换色可以写为(2n)或者(2n+1)*/
        li:nth-of-type(2n){            /*偶数行*/
            background-color: red;
        }
        li:nth-of-type(2n+1){          /*奇数行*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

</body>
</html>

11. CSS样式继承：

文字相关的样式可以被继承，布局相关的样式不能被继承

例如下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;      /*布局相关的样式*/
            height: 300px;
            border: red solid 3px;
            font-size: 25px;    /*文字相关的样式*/
            font-style: italic;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a paragraph</p>
        <p>This is another paragraph</p>
    </div>
</body>
</html>

上面的div标签的样式设置中，既有关于布局的CSS样式，又有关于文字的CSS样式，div的子标签<p>只是继承了文字的CSS样式，没有继承关于布局的CSS样式

布局的css样式默认是不能被继承的，如果需要继承，需要设置继承属性。(设置inhereit值)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;      /*布局相关的样式*/
            height: 300px;
            border: red solid 3px;
            font-size: 25px;    /*文字相关的样式*/
            font-style: italic;
            font-weight: bolder;
        }
        p{
            border: inherit;     /*文字继承布局样式*/
        }
    </style>
</head>
<body>
    <div>
        <p>This is a paragraph</p>
        <p>This is another paragraph</p>
    </div>
</body>
</html>

12.CSS优先级

相同样式的优先级：

当设置相同样式时，后面的优先级较高，但不建议重复设置样式的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        div{
            color: blue;     /*当样式相同时，后写的优先级高*/
        }
    </style>
</head>
<body>
    <div>
       This is a block.
    </div>
</body>
</html>

内部样式与外部样式：

内部样式与外部样式优先级相同，如果设置了相同的样式，那么后写的引入方式优先级高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS/common.css">    <!--外部样式-->
    <style>                                             /* 内部样式  后引入的，优先级更高*/
        div{
            color: blue;     /*当样式相同时，后写的优先级高*/
        }
    </style>
</head>
<body>
    <div>
       This is a block.
    </div>
</body>
</html>

单一样式优先级：
style行间 > id > class > tag(标签) > * > 继承

13. import群组等级优先：

是一种提升样式优先级的手段，是非规范型写法（不推荐）

例如，按照但一样是的优先级的规则，红色的优先级更高：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           color: blue;
       }
    </style>
</head>
<body>
    <div id="elem" style="color: red">
       This is a block.
    </div>
</body>
</html>

为了提高蓝色的优先级，可以使用important提升其优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           color: blue !important;      /*important可以提高样式的优先级*/
       }
    </style>
</head>
<body>
    <div id="elem" style="color: red">
       This is a block.
    </div>
</body>
</html>

优先级：标签+类 > 单类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div.elem          /*标签+类的优先更高*/
       {
           color: blue;
       }
        .elem
        {
            color: red;
        }
    </style>
</head>
<body>
    <div class="elem">
       This is a block.
    </div>
</body>
</html>

群组优先级：群组选择器和单一选择器优先级相同，与引入的先后位置有关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div,p          /*群组选择器*/
       {
           color: blue;
       }
        div          /*单一选择器，与引入的位置先后有关*/
        {
            color: red;    
        }
    </style>
</head>
<body>
    <div class="elem">
       This is a block.
    </div>
    <p>This is a paragraph</p>
</body>
</html>

14. CSS盒子模型

组成：

由内而外： content->padding->border->margin

padding,margin内外填充，既可以写一个数值，对四个方向进行相同的填充，也可以进行单独某个方向的填充

padding-top, padding-bottom,padding-left,padding-right

margin-top,margin-bottom,margin-left,margin-right

注：
1. 背景颜色会填充到margin以内的区域

2. 文字会在content区域

3. padding不能出现负值，margin可以出现负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #box{
           width: 200px;
           height: 200px;
           background-color: red;
           border-width: 10px;
           border-style: solid;
           border-color: black;
           padding: 10px;
           margin: 20px;
       }
        #box1{
            width: 200px;
            height: 200px;
            border-width: 10px;
            border-style: dashed;
            border-color: transparent;
            padding: 0px;
            margin: 20px;
            background-image: url("../picture/map.jpg");
        }
    </style>
</head>
<body>
    <div id="box">这是一个盒子模型</div>
    <div id="box1"></div>
</body>
</html>

box-sizing改变盒子模型的展示形态：

box-sizing 允许以特定的方式定义匹配某个区域的特定元素，取值为： 1. content-box(默认值) 2. border-box

1. content-box(默认值) ：

width, height是针对于content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #box{
           width: 200px;
           height: 200px;
           background-color: red;
           border-width: 10px;
           border-style: solid;
           border-color: black;
           padding: 10px;
           margin: 20px;
           box-sizing: content-box;      /*width, height只针对于content*/
       }

    </style>
</head>
<body>
    <div id="box">这是一个盒子模型</div>
</body>
</html>

盒子模型的尺寸：

2. border-box

width, height是针对于content，padding，margin, 即content+padding+margin=width(height)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       #box{
           width: 200px;
           height: 200px;
           background-color: red;
           border-width: 10px;
           border-style: solid;
           border-color: black;
           padding: 10px;
           margin: 20px;
           box-sizing: border-box;      /*width, height只针对于content*/
       }

    </style>
</head>
<body>
    <div id="box">这是一个盒子模型</div>
</body>
</html>

盒子模型尺寸：

盒子模型之margin叠加问题：

1. margin叠加：

当给两个盒子同时加上上下margin的时候，就会出现叠加问题，但是左右不存在这种叠加问题，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
        }

        #box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

上面盒子的margin-bottom 20px和下面盒子的margin-top 20px是会重叠在一些，所以上下只相距20px,且如果上下的外边距不同的话，则按照较大的边距进行重叠。

解决方案：

1. BFC规范：

2. 只给一个元素添加外边距（只给上面或者下面加）

盒子模型之margin传递问题：
margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题

子容器的margin-top变化会影响父容器的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

当给box2(子容器) 添加margin-top之后，box1(父容器)的位置会发生变化

解决方案：
1. BFC规范

2. 给父容器加边框

3. margin换成padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 1px transparent solid;
        }

        #box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>

CSS盒子模型扩展

1. margin自适应居中：左右自适应会左右居中，但是不能上下自适应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;
            height: 100px;
            background-color: red;
            margin-left: auto;        /*相当于左右居中*/
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

2. 不设置content的现象，即width,height不设置的时候对盒子模型的影响

div标签在不设置width的条件下会充满整个父容器，即使再增加border和margin的条件下不会超过父容器的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #box2{
            /*width: 100%;*/
            height: 100px;     /*如果写了width的尺寸，box2就会超出父容器的大小*/
            background-color: blue;
            color: aliceblue;
            border: solid 10px black;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            This is content.
        </div>
    </div>
</body>
</html>

---------------------------------------------------------------------------------------------------

Alpha205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习（2）

1. CSS基础语法：格式：选择器{属性：值}在html中，通过标签<style>引入CSS样式：常用属性：width: 宽度height: 高度background-color: 背景色表示长度的单位：1.px 像素2. % 百分比，由父容器的大小决定2. 内联样式与内部样式内联样式：在html标签上直接添加style属性...
复制链接

扫一扫

专栏目录