10.CSS边距

开局签到Python基础

已于 2022-02-17 17:31:39 修改

阅读量1.6k

点赞数

分类专栏： CSS 1.前端文章标签： css css3 html

于 2021-12-09 08:31:59 首次发布

风

本文链接：https://blog.csdn.net/qq_46137324/article/details/121784854

版权

1.前端同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

文章目录

1.边框属性

1.1介绍

边框：环绕在标签的宽度和高度周围的线条。

1.2属性&值

border: 边框的宽度 边框的样式 边款的颜色。设置的样式四边都一样.

值:
边框的宽度： 数值px;
边框的样式：
    solid 实线
    dashed 虚线
    dotted 圆点
    double 双线
    none 没有边框
边框的颜色: 颜色单词,三基色...

颜色可以省略,省略之后默认还是黑色。

快捷键：
bd1+tab: border: 1px;

1.3演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同时设置四边</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box1 {
            border: 3px solid aqua;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

1.4分别设置边框

1.按边框位置设置

border-top:    上边框的···                   bdt+ +tab boder-top: 1px solid #000;   
border-bottom: 下边框的···                   bdb+ +tab ···
border-left: ···                            bdl+ +tab ···
border-right: ···                           bdr+ +tab ···

连写格式中：
颜色可以省略,省略之后默认还是黑色。
样式不能省略,省略之后就看不见边框。
宽度可以省略,省略之后还能看见边款。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按边框位置设置</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box1 {
            border-top: 3px solid orange;
            border-right: 4px dashed blue;
            border-bottom: 5px dotted black;
            border-left: 6px double aqua;
        }


    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

2.分别设置样式

按顺时针赋值给边框。
	border-width: 上 右 下 左;
	border-style：上 右 下 左;
	border-color: 上 右 下 左;

省略规律：
    上 右 下 》 左边取值和右边一样
    上 右 》    左边取值和右边一样, 下边取值和上边一样。
    上 》       右下左取值和上边一样。
border-width: 3px;
border-style: solid;
border-color:orange;

简写：
border: 3px solid orange;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分别设置样式</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box1 {
            border-width: 3px 4px 5px 6px;
            border-style: solid dashed dotted double;
            border-color: orange blue black aqua;
        }

        .box2 {
            border-width: 3px 4px 5px;
            border-style: solid dashed dotted;
            border-color: orange blue black;
        }

        .box3 {
            border-width: 3px 4px;
            border-style: solid dashed;
            border-color: orange blue;
        }

        .box4 {
            border-width: 3px;
            border-style: solid;
            border-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
    <hr>
    <div class="box3"></div>
    <hr>
    <div class="box4"></div>
</body>
</html>

3.单独设置每条边框

设置四边12条代码几乎不用。      快捷键：
boder-top-width:3px;        btw+tab boder-top-width:; 
boder-top-style:solid;      bts+tab boder-top-style:; 
boder-top-color:red;	   bts+tab boder-top-color:; 
···

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单独设置每条边框</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background: red;
        }

        .box1 {
            border-top-width: 3px;
            border-top-style: solid;
            border-top-color: orange;

            border-right-width: 4px;
            border-right-style: dashed;
            border-right-color: blue;

            border-bottom-width: 5px;
            border-bottom-style: dotted;
            border-bottom-color: black;

            border-left-width: 6px;
            border-left-style: double;
            border-left-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

4.练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
  <style>
    div {
      height: 100px;
      width: 100px;
    }

    .box1 {
      border:5px solid black;
    }

    .box2 {
      border: 5px solid;
      border-color: red yellow blue green;
    }

    .box3 {
      border: 5px red;
      border-style: solid dashed solid solid;
    }

    .box4 {
        border: 5px red;
        border-style: solid dashed;
    }

    .box5 {
        border: 5px solid black;
        border-bottom-style: none;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
    <hr>
    <div class="box3"></div>
    <hr>
    <div class="box4"></div>
    <hr>
    <div class="box5"></div>
</body>
</html>

1.5边框制作图形

图片占用一定的资源,利用边框样式制作简单的图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框设置图形</title>
  <style>
    div {
      width: 0;
      height: 0;
    }
    .box1 {
      border:30px solid;
      border-color: red yellow blue green;
    }

    .box2 {
      border: 30px solid;
      border-color: red yellow white green;
    }

    .box3 {
      border: 30px solid;
      border-color: red yellow blue green;
      border-bottom-style: none;
    }

    .box4 {
      border: 30px solid;
      border-color:red white white;
      border-bottom-style:none;
    }
    .box5 {
      width: 0;
      height: 20px;
      border:30px solid;
      border-color: red yellow blue green;
    }

    .box6 {
      width: 20px;
      height: 0;
      border:30px solid;
      border-color: red yellow blue green;
    }

    .box7 {
      width: 20px;
      height: 0;
      border:30px solid;
      border-color: red white white white;
      border-bottom-style:none;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <hr>
    <div class="box2"></div>
    <hr>
    <div class="box3"></div>
    <hr>
    <div class="box4"></div>
    <hr>
    <div class="box5"></div>
    <hr>
    <div class="box6"></div>
    <hr>
    <div class="box7"></div>
    <hr>
</body>
</html>

1.6圆形边框

1.属性&值

长宽一致:圆
width: 100px;
height: 100px;
border-radius: 100px; 四个边角半径范围
border-radius: 10%; 四个圆角。
border-radius: 50%; 50%就是圆。

长宽不一致:椭圆
width: 200px;
height: 100px;
border-radius: 100px;


border-top-left-radius:   上左
border-top-right-xxx      上右
border-bottom-right-xxx   下右
border-bottom-left-xxx    下左

2.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS练习</title>
    <style>
        .c1 {
            background-color: greenyellow;
            width: 50px;
            height: 50px;
            border: 1px solid;
            border-top-left-radius: 20px;  /*左上角*/
        }
        .c2 {
            background-color: greenyellow;
            width: 60px;
            height: 60px;
            border: 1px solid;
            border-radius: 30px;  /*四边*/
        }
        .c3 {
            background-color: greenyellow;
            width: 60px;
            height: 100px;
            border: 1px solid;
            border-radius: 20px;  /*四边 */
        }
    </style>
</head>

<body>
    <div class="c1">1</div>
    <br>
    <div class="c2">2</div>
    <br>
    <div class="c3">3</div>
</body>
</html>

2.边距

2.1padding内边距

1.介绍

padding 内边距:边框和内容之间的距离。

2.属性&值

 设置内边距格式：（单位px）
 1.非连写：
 padding-top:;   
 padding-right:;
 padding-bottom:;
 padding-left:;
 2.连写
 padding: 上 右 下 左；
 省略规律：
    上 右 下 》 左边取值和右边一样
    上 右 》    左边取值和右边一样, 下边取值和上边一样。
    上 》       右下左取值和上边一样。
 
 注意：
 1.给标签设置内边距之后,标签占有的宽度和高度会增加。（原本的大小 + 设置的边距）
 2.内边距也会有背景颜色

3.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid aqua;
      background-color: yellow;

    }
    .box1 {
      padding-top:30px;  /* 向下移动30px */
    }

    .box2 {
      padding-right:30px;  /* 向左移动30px */
    }

    .box3 {
      padding-bottom:30px;  /* 向上移动30px */
    }

    .box4 {
      padding-left:30px;  /* 向右移动30px */
    }

    .box5 {
      padding:30px 40px 50px 60px;
    }
  </style>
</head>
<body>
    <div class="box1">今天的天气真好,适合出门玩耍！开始召唤自己的伙伴···</div>
    <hr>
    <div class="box2">今天的天气真好,适合出门玩耍！开始召唤自己的伙伴···</div>
    <hr>
    <div class="box3">今天的天气真好,适合出门玩耍！开始召唤自己的伙伴···</div>
    <hr>
    <div class="box4">今天的天气真好,适合出门玩耍！开始召唤自己的伙伴···</div>
    <hr>
    <div class="box5">今天的天气真好,适合出门玩耍！开始召唤自己的伙伴···</div>
</body>
</html>

4.注意点

padding设置 内容到边框的距离。
一般设置上左边距就好了,右下有些情况设置了是没有效果的边.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS练习</title>

    <style>
        p{
            border: 3px solid red;
            padding-left: 10px;
            padding-top: 10px;
            padding-right: 10px;   /* 块级标签,右边距看不出效果 */
            padding-bottom: 10px;
            /* padding 0;*/
        }
        span{
            border: 3px solid red;
            padding-left: 10px;
            padding-top: 10px;
            padding-right: 10px;   /* 行级标签,右边距看的出效果 */
            padding-bottom: 10px;
            /* padding 0;*/
        }
    </style>
</head>
<body>
    <p>我是一个正经的人。</p>
	<span>我是一个正经的人。</span>
</body>
</html>

2.2margin外边距

1.介绍

标签和标签之间的距离。

2.属性&值

 设置外边距格式：（单位px）
 1.非连写
 margin-top;     
 margin-right;
 margin-bottom;;
 margin-left;
 
 2.连写
 magin: 上 右 下 左；
  省略规律：
    上 右 下 》 左边取值和右边一样
    上 右 》    左边取值和右边一样, 下边取值和上边一样。
    上 》       右下左取值和上边一样。

值:
margin: px px; 

特殊:
margin: 0 auto; 
水平方向上可以使用auto,会自动计算外边距的值,居中于父标签,
垂直方向不能使用auto,只能使用像素值居中。


注意：
body标签默认有8px的外边距。
外边距没有背景颜色。

3.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
  <style>
    body {
      margin:0;
    }
    span {
      display:inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
      background: red;
    }

    div {
      height: 100px;
      border: 1px solid black;
    }

    .box1 {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 30px;
      margin-left: 40px;
    }

    .box3 {
      margin: 10px 20px 30px 40px;
    }

  </style>
</head>
<body>
    <span class="box1">你好</span>
    <span class="box2">你好</span><span class="box3">你好</span><span class="box4">你好</span>
    <div></div>
</body>
</html>

4.空格问题

span标签之间不是内间距,span是行级属性,enter换行 换行符被当做为一个空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距</title>
  <style>
    span {
      display:inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
    <span class="box1">你好</span>
    <span class="box2">你好</span>
    <span class="box3">你好</span>
</body>
</html>

5.水平方向

水平方向外边距合并现象:
在水平方向设置外边框,标签之间的外边框会叠加。(蓝色线标注)

快捷方式：
span.box${span$标签}*3    （注意不会要换行！）
<span class="box1">span1标签</span><span class="box2">span2标签</span><span class="box3">span3标签</span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象(水平方向)</title>
    <style>
        span {
            display: inline-block;
            height: 100px;
            width: 100px;
            border: 1px solid red;
        }

        .box1 {
            margin-right: 10px;
        }

        .box2 {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <span class="box1">span1标签</span>
    <span class="box2">span2标签</span>
</body>
</html>

6.垂直方向合并

外边框在垂直方向注意点：（称为：塌陷现象,将小的边距忽略掉,使用大的边距。）
在垂直方向设置外边框,标签之间的外边框不会叠加,谁的外边距大就以谁的以准。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距合并现象(垂直方向)</title>
    <style>
        div {
            height: 100px;
            border: 1px solid red;
        }

        .box1 {
            margin-bottom: 100px;
        }

        .box2 {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box1">div1标签</div>
    <div class="box2">div2标签</div>
</body>
</html>

3.盒子模型

3.1介绍

CSS盒子模式是一个形象比喻,HTML中所有的标签比喻成一个盒子。

一个元素占有空间的大小由四个部分构成,
1.元素的外边距（margin）
	外边距 == 盒子与盒子之间的距离。
2.元素的边框（border）
	边框   == 盒子厚度（壳）。
3.元素的内边距（padding）,
	内边距 ==  内容到盒子的间隙。
4.其中包括元素的内容（content）,
	宽/高  == 存放内容的区域。

3.2开发者工具查看模型

内容宽高
	通过标签的width/height设置的宽度和高度。
元素宽高
	宽 = 左/右边框+左/右内边距 + width
	高 = 上/下边款+上/下内边距 + height
元素空间宽高
	宽 = 左/右外边距 + 左/右边框 + 左/右内边距 + width
	高 = 上/下外边距 + 上/下边框 + 上/下内边距 + height

3.3演示

1.内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        span, a, p {
            display: inline-block;
            height: 100px;
            width: 100px;
            border: 1px solid red;

            padding: 20px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <span>span标签</span>
    <a href="">a标签</a>
    <p>p标签</p>
</body>
</html>

2.内容宽高

代码要求内容宽高100px;
通过标签的width/height设置的宽度和高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容宽高</title>
  <style>
    div {
      height: 100px;
      width: 100px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div>div标签</div>
</body>
</html>

3.元素宽高

代码要求元素宽高100px;
宽 = 左/右边框+左/右内边距 + width
高 = 上/下边款+上/下内边距 + height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素内容宽高</title>
  <style>
    div {
      width: 86px;
      height: 86px;
      border: 2px solid red;
      padding: 5px;
    }
  </style>
</head>
<body>
<div>div标签</div>
</body>
</html>

4.元素空间宽高

代码要求元素空间宽高100px;

宽 = 左/右外边距 + 左/右边框 + 左/右内边距 + width
高 = 上/下外边距 + 上/下边框 + 上/下内边距 + height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素空间宽高</title>
    <style>
        div {
            width: 76px;
            height: 76px;
            border: 2px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>div标签</div>
</body>
</html>

3.4box-sizing属性

1.介绍

box-sizing属性 设置元素宽高的计算方式。CSS3新增。

2.值

1. content-box; 默认值 ,没有效果。（设置浮动后,当前行无法显示,会换到下一行去显示。）
	
2. border-box; 元素宽高不变。 （设置浮动后,锁定在当行显示。）
	元素宽高 ≡ 内容宽高  （恒等 ≡）
    元素的宽高不变,增加padding 和 border, width与height对应的减去.

float属性：浮动 
float: left; 浮动到左边
float:right; 浮动到右边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-sizing属性</title>
    <style>
        .content { 
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .aside {
            width: 100px;
            height: 200px;
            background: aqua;
            float: left;
        }

        .article {
            width: 200px;
            height: 200px;
            background: orange;
            float: right;

            padding: 20px;

            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="aside"></div>
        <div class="article"></div>
    </div>
</body>
</html>

3.5盒子模型练习

大盒子 500px * 500px 
小盒子 100px * 100px  
小盒子在大盒子内居中。

1.方式一

修改大盒子的内边距。
增加大盒子的padding的时候,元素空间就会变大,
使用box-sizing: border-box;来现在元素空间大小不变,在增加padding的时候减少内容框高.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型练习1</title>
  <style>
    .big {
      height: 500px;
      width: 500px;
      background-color: red;
      box-sizing: border-box;
      padding:200px;

    }
    .small {
      height: 100px;
      width: 100px;
      background-color: aqua;
    }
  </style>
</head>
<body>
<div class="big">
  <div class="small"></div>
</div>
</body>
</html>

2.方式二

修改小盒子的外边距。
注意：
如果盒子是嵌套关系,那么设置里面一个盒子顶部的外边距,外面一个盒子也会被顶下来。
如果外面的盒子不想被一起顶下来,给外面的盒子设置边框属性或添加文本信息。
在开发中：
控制嵌套关系盒子的之间的距离,首先考虑使用padding,其次在考虑margin。
padding 本质上用于控制父子标签之间的间隙。
margin  本质上用于控制兄弟标签之间的间隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型练习2</title>
    <style>
        .big1 {
            height: 500px;
            width: 500px;
            background-color: red;
        }

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

            margin: 200px;
        }

        .big2 {
            height: 498px;
            width: 498px;
            background-color: red;
            border: 1px solid black
        }

        .small2 {
            height: 100px;
            width: 100px;
            background-color: aqua;
            margin: 200px;
        }
    </style>
</head>
<body>
    <div class="big1">
        <div class="small1"></div>  <!--上面没有边框的时候-->
    </div>
    <hr>
    <div class="big2">
        <div class="small2"></div>  <!--上面有边框的时候-->
    </div>
    <hr>
    <div class="big1">
        1
        <div class="small2"></div>  <!--上面有文本信息-->
    </div>
</body>
</html>

一般设置上左边距就好了 右下边距不要设置,不要会将其他的标签给挤出去。
第一个块标签设置了右下边距直接将第二个块给挤出去了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS练习</title>
    <style>
        .c1 {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        .c2 {
            width: 50px;
            height: 50px;
            border: 1px solid greenyellow;
            background-color: aqua;
            margin: 38%; /*不要设置四边*/
            /*
            单独设置            
            margin-top: 75px;
            margin-left: 12px;
            */
        }
        .c3 {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
        <div class="c2 c3"></div>
    </div>
</body>
</html>

3.方式三

修改小盒子的外边距.
margin: 0 auto;  auto自动计算外边距的值,让标签水平居中于父标签.

水平方向上可以使用auto自动居中,垂直方向不能使用auto,只能使用像素值居中。

margin: 200px auto;  垂直/水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型练习3</title>
    <style>
        .big {
            height: 498px;
            width: 498px;
            background-color: red;
            border: 1px solid black;
        }

        .small {
            height: 100px;
            width: 100px;
            background-color: aqua;
            margin: 200px auto;  /**/
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>
</html>

4.方式四

修改小盒子的外边距.
设置margin: xx%; 左上角的点距离边框的距离.(上 右的值一致的时候使用)

值计算:
1.在移动的时候是以左上角的点做移动,
	500 / 2 = 250 
2.移动之后还需要回退小盒子的1/2的大小的px.
	250 - 100 / 2 = 250 - 50 = 200 
3.百分比计算
	200 / 500 = 0.40 = 40%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型练习3</title>
    <style>
        .big {
            height: 498px;
            width: 498px;
            background-color: red;
            border: 1px solid black;
        }

        .small {
            height: 100px;
            width: 100px;
            background-color: aqua;
            margin: 40%; 
        }
    </style>
</head>
<body>
    <div class="big">
        <div class="small"></div>
    </div>
</body>
</html>

3.6内容居中与盒子居中的区别

1.区别

texr-align:center; 设置盒子中内 文字/图片居中
margin 与 padding 设置盒子居中的

2.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子居中vs内容居中</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    .text_center {
      text-align:center;
    }

    .div_center {
        height: 100px;
        width: 100px;
        background-color:blue;
        margin: 41%;  /*auto自动居中,中能在水平方向上使用*/
    }
  </style>
</head>
<body>
<div class="text_center">
  我居中
  <br>
    <img src="https://s2.loli.net/2022/02/16/dMpgZnxFSe93kL1.png" alt="">
    <div class="div_center"></div>
</div>
</body>
</html>

3.7清除默认边距

1.默认边框

某些便签默认有内/外边距。在开发中为了更好的控制盒子的宽高和计算盒子的框高等···
编写代码之前第一件事情,就是清空默认的边距。

2.清除默认边距方式

方式1:
    清除所有默认边宽：
    * {
    pading:0;
    margin:0;
    }
    注意：
    * 通配符 选择器会遍历当前页面的所有的便签,所以性能不好。
    
方式2:(开发中使用)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

3.演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除默认边距</title>
    <style>
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,
        form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0
        }

        p, ul {
            height: 50px;
            width: 200px;
            background-color: #00fd2b;
            border: 1px solid #000000;
        }
    </style>
</head>
<body>
    <p>学习如逆水行舟,不进则退！</p>
    <ul>
        <li>x1</li>
    </ul>
</body>
</html>

4.行高

4.1介绍

行高：每行内容的高度。CSS中所有的行都有自己的行高。
	注意：
	行高和盒子(标签)的高度不是同一个概念。
	文字在行高默认是垂直居中的。

4.2属性&值

line-height	属性设置行高。

值：(单位px)
数值;

应用：
在开发中,
设置一行文字垂直居中于盒子中,将行高的值设置为盒子的高,默认就垂直居中。
设置多行文字垂直居中与盒子中,设置padding属性。

在没有设置标签高度的时候,所有行高相加 等于 标签的高。

4.3行内容垂直居中(单行)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内容垂直居中</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        你好! 你好！
    </div>
</body>
</html>

4.4行内容垂直居中(多行)

padding-top 值计算： 标签高 - 所有行高  / 2
padding-top 需要搭配box-sizing属性,增加padding 不能让元素的空间变大.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内容垂直居中(多行)</title>
    <style>
        div {
            width: 100px;
            height: 80px;
            border: 1px solid black;
            line-height: 20px;

            padding-top: 20px;
            box-sizing: border-box;  /*增加padding 不能让元素的空间变大*/
        }
    </style>
</head>
<body>
    <div>
        你好！你好！你好！你好！
    </div>
</body>
</html>

5.还原页面

使用 Adobe Fireworks CS6 工具

5.1框高边框字体···

颜色使用取色器。

5.2左右内边距测距

注意：
如果一个盒子存储的是文字,一帮情况下会以盒子左边的内边距为基准,不会以右边的内边距为基准,因为存在误差。
ps:
误差是如何存在的?
因为右边如果放不下个一个文字就会换行显示,所以文字和内边距之间的距离就有误差。通常测试的距离比实际的大。
标签框 100px, 一个文字就26px 这个行就只能完整的现实三个字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体大小</title>
  <style>
    div {
      width: 100px;
      border: 1px solid red;
      font-size:26px;
    }
  </style>
</head>
<body>
<div>
  你好啊哈哈哈哈哈
</div>
</body>
</html>

5.3上下内边距

注意：
  每行都有行高,字默认在行高中垂直居中。
  上内边距就是 标签顶部到行高顶部。

5.4还原代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面还原</title>
  <style>
    div {
      box-sizing: border-box;
      width: 610px;
      height: 110px;
      background-color:#cdcdcd;
      border:1px solid #000;
      font-family: "黑体";
      line-height: 40px;
      font-size: 20px;
      color: #67676d;
      padding-left: 10px;
      padding-top:20px;
    }
  </style>
</head>
<body>
<div>葬爱:非主流文化的常用词,是当今网络流行术语.且流行于非主流杀马特之中,葬,即埋葬,爱即爱情,翻译成外语就bury love</div>
</body>
</html>

6.文章界面

从外往内,从上往下的制作网页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字界面</title>
    <style>
            body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,
    form,fieldset,legend,input,textarea,p,blockquote,th,td
    {
        margin:0;padding:0
    }
      body {
          background-color: #efefef;
      }
      div {
          box-sizing: border-box;
          width: 372px;
          height: 232px;
          border: 1px solid #666;
          margin: 0 auto;

          padding: 15px;
      }
    h1 {
        font-family: "微软雅黑";
        font-size:18px;
        border-bottom-style: solid;

    }
    span {
        font-size: 14px;

    }
    ul {
        list-style:none;
        padding-top: 10px;
    }
    li {
        border-bottom-style: dashed;
        font-family:"微软雅黑";
        font-size:12px;
        line-height:30px;
        padding-left: 20px;
    }

    </style>
</head>
<body>
<div>
    <h1>最新文章<span>/Article</span></h1>
    <ul>
        <li>问中国：经济新活力篇 治国理政 长征</li>
        <li>问中国：民生保障不是"清谈馆"国平 国庆节</li>
        <li>不忘棚户区改造10日至12日将视察澳门</li>
        <li>监督中央部委五大抓手：关键少要加码</li>
        <li>李江南老师免费公开课H5+跨平台教学视频</li>
    </ul>

</div>
</body>
</html>

开局签到Python基础

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
10.CSS边距

文章目录1.边框属性1.1同时设置四边1.2分别设置边框(方式一)1.3分别设置边框(方式二)1.4分别设置边框(方式三)1.5练习1.6边框制作图形2.边距2.1内边距2.2外边距1.注意2.外边距合并现象(水平方向)3.外边距合并现象(垂直方向)3.盒子模型3.1内容宽高3.2元素内容宽高3.3元素空间宽高3.4盒子box-sizing属性3.5盒子模型练习1.方式一2.方式二3.方式三3.6盒子居中与内容居中3.7清除默认边框4.行高4.1行内容垂直居中(单行)4.2行内容垂直居中(多行)5.还原页面
复制链接

扫一扫