前端 HTML/CSS （六）

最新推荐文章于 2022-10-25 17:12:52 发布

木森林哥哥

最新推荐文章于 2022-10-25 17:12:52 发布

阅读量232

点赞数

分类专栏： Html/CSS 文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/weixin_47021982/article/details/112062796

版权

Html/CSS 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

问题：

做功能，需求。
课上讲的知识，你得有体系。

你在看的时候。
别钻牛角尖。

元素框

文档中的每个标签都会生成一个矩形框。这个框描述标签在文档布局中所占的空间。

默认的时候渲染出来的元素不会出现重叠，但是如果元素是手动定位的可能会出现重叠。

虽然CSS可以做成三角形、圆形等，其实所有CSS最初生成的框都是矩形框。

整体结构

在这里插入图片描述

内容区域：用来存储内容。
宽度：用来定义内容区的宽度。
高度：用来定义内容区的高度。
内边距：用来定义内容区域和边框的距离。
边框：是围绕内容区域和内边距的一条或多条线。
外边距：定义盒子和盒子之间的距离。

宽度

内容区域左边界到右边界的距离。

格式：width，可以用在块状元素、行内块状元素。

auto，默认值。没有特定的宽度值。

块状元素，宽度默认是父元素的宽度。

行内元素，宽度默认是内容的宽度。
px
em，按到当前字体的大小来进行计算。
%，使用百分比来设置宽度，相对于父元素的宽度来设置。

高度

内容区域的上边界到下边界的距离。

格式：height:value，可以用在块状元素、行内块状元素。

auto，默认值。

没有内容高度为0。

块状元素，有内容看的是行高。

行内元素，有内容。即使设置了行高也不会影响高度（但是会影响文字所在的垂直距离）

宽度、高度的最大值和最小值

元素内容区域可以使用min-width和min-height定义最小值。取值范围和width、height取值相同。
元素的内容区域可以使用max-width和max-height定义最大值。

内边距

适用于所有的元素，元素默认没有内边距。

padding

px像素
em按照当前字体的大小来计算。
%，使用百分比设置内边距，水平和垂直都相对于父元素内容区域的宽度计算。

总共四个值，上、右、下、左，按照顺时针进行计算。

格式2:padding: top/bottom left/right

格式3：padding:top right/left bottom

格式4：padding:top right bottom left

单边内边距

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

行内元素的内边距

行内元素上设置左内边距和右内边距可以正常使用，但是上内边距和下内边距对行高没有影响。

行内块状元素可以设置内边距并且有正常的效果。

边框

边框三要素：

宽度，默认为2px或3px。
样式，默认为none，没有样式。
颜色，默认的边框的颜色，是元素自身的文本的颜色。

边框样式

border-style

none，没有样式为none时不仅没有样式也没有宽度。
solid，实线。
格式：border-style:top/bottom left/right
格式：border-style:top left/right bottom
格式：border-style:top right bottom left
border-top-style
border-right-style
border-bottom-style
boder-left-style

边框宽度

border-width

px
em
边宽宽度设置为 百分比%无效。

border-width:top/bottom left/right

border-width:top right/left bottom

border-width:top right bottom left

border-top-width
border-right-width
border-bottom-width
boder-left-width

边框颜色

border-color

border-color:top/bottom left/right

border-color:top right/left bottom

border-color:top right bottom left

border-top-color
border-right-color
border-bottom-color
boder-left-color

相等：border-color: rgba(0, 0, 0, 0) = border-color: transparent;

简写属性

border-top：width style color

border-right

border-bottom

border-left

注意：

简写属性先看有几个数值，如果有1个数值属性，可以打乱顺序；如果有两个数值或以上，就不能打乱顺序，不然会影响显示或无效果。

整个边框

border:width style color

缺点：定义的样式、宽度、颜色同时应用于4个边。

做一个三角形。

三角形一般用于做气泡对话框，如微信对话框。

行内元素的边框

行内元素的边框对于上下边框对行高没有影响，左右边框会将周围的文本推开。

外边距

CSS中可以设置任何元素的外边距。

外边距默认是0。

有些标签默认的时候都会自带一个margin。

外边距设置

margin

px
em
%，百分比相对于父元素的内容的宽度进行计算（上、右、下、左）

margin:top/bottom left/right

margin:top left/right bottom

margin:top right bottom left

注意：元素的外边距可以设置为负值，这有可能使元素框从父元素中跑出来。有可能与其他元素重叠。

body默认的时候是有8px的外边距。

外边距折叠

外边距折叠只有垂直外边距会折叠，左右外边距不会。

情况1：盒子的底部margin和它下一个兄弟的顶部margin

折叠的时候相邻的两个上下外边距会折叠为其中最大的那个外边距。

解决：直接设置上边或下边的外边距或将第一个盒子inline-block;
情况2：盒子的顶部margin和第一个普通子元素的顶部margin。

外边距产生折叠的原因：margin之间直接接触了，没有阻隔。(我就是想让外边距和外边距之间不接触。)

父元素直接设置边框或内边距，隔开就好了。

单边外边距

margin-top，上外边距
margin-right,右外边距
margin-bottom，下外边距
margin-left，左外边距

行内元素的外边距

行内元素上设置的上、下外边距对行高没有影响。
行内元素上设置的左外边距和右外边距可以正常使用。
行内块状元素的上、下、左、右都可以正常使用。

注意：

行边距合并在块状元素中发生。

横向格式化

容纳块：离的最近的块级元素。

默认情况下，块级框各个组成部分的横向尺寸始终等于容纳块的宽度。

容纳块的宽度=子元素的margin-left+子元素的border-left+子元素的padding-left+子元素的width+子元素的padding-right+子元素的border-right+子元素的margin-right。
横向格式化

七个属性只有width、margin-left、margin-right可以设置为auto。其他的属性值只能设置为具体值或者使用默认值（默认值为零）
- 情况一：width、margin-left、margin-right其中两个设置为具体的值，一个设置为auto。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
            width:100px;
            height: 100px;
            margin-left:10px;
            margin-right:auto;/*margin-right的值现在为188*/
            border:1px solid blue;
        }
    </style>
</head>

<body>
    <!-- <div>
        <b>111</b>
    </div> -->
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

显示：
在这里插入图片描述
width、margin-left、margin-right其中margin-left、margin-right都设置为具体的值，width设置为auto。这个时候也需要满足上面所说的公式。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
            width:auto;
            height: 100px;
            margin-left:10px;
            margin-right:10px;
            border:1px solid blue;
        }
    </style>
</head>

<body>
    <!-- <div>
        <b>111</b>
    </div> -->
    <div id="f">
      <div id="z"></div>
    </div>
</body>

</html>

在这里插入图片描述

情况二：width、margin-left、margin-right，三个属性都设置具体的值（这种情况叫过度约束）margin-right看不到效果。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
            width:100px;
            height: 100px;
            margin-left:10px;
            margin-right:10px;
            border:1px solid blue;
        }
    </style>
</head>

<body>
  <!-- <div>
        <b>111</b>
    </div> -->
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

在这里插入图片描述
为什么写上margin-right不好使的问题，因为没有写margin-left时默认值为0，这个时候也是过度约束，所以还是以margin-left为主，所以margin-right不好使。解决这个问题，将margin-left: auto就可以了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
          width:100px;
            height: 100px;
          	margin-right:10px;
            margin-left:auto;
          border:1px solid blue;
        }
    </style>
</head>

<body>

    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

显示：
在这里插入图片描述

情况三：width、margin-left、margin-right，其中两个设置为auto。
1. 如果margin-left和margin-right设置为auto，那么两侧相等。（水平居中块状元素）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
      #f{
            width:300px;
          height: 300px;
            border:1px solid green;
        }
        #z{
            width:100px;
            height: 100px;
            margin-right:auto;
            margin-left:auto;
            border:1px solid blue;
        }
    </style>
</head>

<body>

    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

显示：
在这里插入图片描述
某一边和width设置为auto。外边距为auto的那个值将会等于0，width会被设置为填满容纳块所需的值。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8" />
 	<style>
       body{
           margin:0;
       }
       #f{
           width:300px;
           height: 300px;
           border:1px solid green;
       }
       #z{
           width:auto;
           height: 100px;
           margin-right:10px;
           margin-left:auto;
           border:1px solid blue;
       }
    </style>
    </head>
     <body>
         <div id="f">
       		<div id="z"></div>
         </div>
     </body>
</html>

显示：

在这里插入图片描述
情况四：三个属性都为auto。两边为零，width要多宽有多宽。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
            width:auto;
            height: 100px;
            margin-right:auto;
            margin-left:auto;
            border:1px solid blue;
        }
    </style>
</head>
<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>
</html>

显示：
在这里插入图片描述

纵向格式化

容纳块的宽度=margin-top + border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom

情况一：height、margin-top、margin-bottom，其中两个值设置为具体值，一个设置为auto。块级框的margrin-top或margin-bottom设置为auto时，二者自动计算为0。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
            width:100px;
            height: 100px;
            margin-top:auto;
            margin-bottom:auto;
            border:1px solid blue;
        }
    </style>
</head>

<body>

    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

在这里插入图片描述
height、margin-top、margin-bottom其中margin-top和margin-bottom设置为具体值，height设置为auto，这个情况下高度不会被自动拉开。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
            width:100px;
            height: auto;
            margin-top:10px;
            margin-bottom:10px;
            border:1px solid blue;
        }
    </style>
</head>

<body>

    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

显示：
在这里插入图片描述

情况二：height、margin-top、margin-bottom三个都设置为auto之外的值。这个时候设置的是多少就是多少。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            margin:0;
        }
        #f{
            width:300px;
            height: 300px;
            border:1px solid green;
        }
        #z{
            width:100px;
            height: 100px;
            margin-top:10px;
            margin-bottom:10px;
            border:1px solid blue;
        }
    </style>
</head>

<body>

    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

显示：
在这里插入图片描述

调整宽度和高度的计算方式

默认情况下，块级框的宽度（width）是不包括padding，我们可以使用box-sizing来进行调整。

box-sizing：适用于所有可以设定width和height的元素。

content-box:默认值，内容区域的宽度等于width，高度等于height，内边距、边框都在这个尺寸上面增加。（w3c盒子模型的计算方式。）
border-box：宽度、高度等于内容区域+内边距+边框，相应的内容区域将会被缩小（IE盒子模型这种计算方式也叫怪异盒子模型）。

背景

前景色：文本、边框，可以通过color和border-color来进行设置。

背景色：前景后面的颜色。元素背景将会延伸到元素边框的外边界终止。

背景色

background-color

图片可以有背景色。

背景图

背景图：background-image

url(图片地址)

背景颜色和背景图可以同时使用，但是背景图将会盖在背景颜色上面。

背景图和盒子大小没关系。

背景图片（background-image）和图片（img）的区别：

背景图片是一个CSS属性你能在上面写东西。

图片是网页中的元素，你插入的img是没有办法在上面写东西的。

木森林哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端 HTML/CSS （六）

问题：做功能，需求。课上讲的知识，你得有体系。你在看的时候。别钻牛角尖。元素框文档中的每个标签都会生成一个矩形框。这个框描述标签在文档布局中所占的空间。默认的时候渲染出来的元素不会出现重叠，但是如果元素是手动定位的可能会出现重叠。虽然CSS可以做成三角形、圆形等，其实所有CSS最初生成的框都是矩形框。整体结构内容区域：用来存储内容。宽度：用来定义内容区的宽度。高度：用来定义内容区的高度。内边距：用来定义内容区域和边框的距离。边框：是围绕内容区域和内边距的一条
复制链接

扫一扫