Web前端学习(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文件进行样式控制

<link>标签: 当前页面与外部资源的引入关系

属性: 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>

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值