06-CSS基础-盒模型

边框属性

边框就是环绕在标签宽度和高度周围的线条。
边框属性的几种格式：

  • 连写
    同时设置四条边
    border: 边框的宽度 边框的样式 边框的颜色;
<style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            border: 5px solid blue;
            /*border: 5px solid;*/
            /*border: 5px blue;*/
            /*border: solid blue;*/
        }
</style>

快捷键:
bd+ border: 1px solid #000;
注意点:

  1. 连写格式中颜色属性可以省略, 省略之后默认就是黑色
  2. 连写格式中样式不能省略, 省略之后就看不到边框了
  3. 连写格式中宽度可以省略, 省略之后还是可以看到边框

  • 按方向连写(分别设置四条边)
    border-top: 边框的宽度 边框的样式 边框的颜色;
    border-right: 边框的宽度 边框的样式 边框的颜色;
    border-bottom: 边框的宽度 边框的样式 边框的颜色;
    border-left: 边框的宽度 边框的样式 边框的颜色;

  • 按要素连写
    分别设置四条边
    border-width: 上 右 下 左;
    border-style: 上 右 下 左;
    border-color: 上 右 下 左;
    注意点:
    同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的。

        div {
            display: inline-block;
        }
        /* 梯形边框 */
        .box2 {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-left: 10px;
            border-top: 20px solid rebeccapurple;
            border-left: 20px solid springgreen;
        }
        .box3, .box4, .box5 {
            width: 0;
            height: 0;
            margin-left: 10px;
        }
        /* 两个三角形 */
        .box3 {
            background-color: antiquewhite;
            border-top: 100px solid hotpink;
            border-left: 100px solid steelblue;
        }
        /* 四个三角形 */
        .box4 {
            border-width: 50px;
            border-style: solid;
            border-top-color: green;
            border-right-color: red;
            border-bottom-color: blue;
            border-left-color: darkorange;
        }
        /* 向下箭头 */
        .box5 {
            border-width: 50px;
            border-style: solid;
            border-top-color: red;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
        .box6 {
            border-top: 100px solid green;
            border-left: 100px solid transparent;
            transform: rotate(135deg);
        }
        /* 设置圆角边框 */
        .box7 {
            margin-left: 30px;
            width: 100px;
            height: 80px;
            background-color: green;
            border: 3px solid red;
            /* 同时设置4个角 */
            border-radius: 10pt;
        }
        /* 圆形边框 */
        .box8 {
            width: 100px;
            height: 100px;
            background-color: steelblue;
            border: 3px solid sienna;
            /* 取值为宽度和高度的一半 */
            border-radius: 50%;
        }
        /* 圆形 */
        .box9 {
            width: 100px;
            height: 100px;
            background-color: lawngreen;
            /* 取值为宽度和高度的一半 有边框要加上边框的宽度*/
            border-radius: 50%;
        }
边框
内边距属性

边框和内容之间的距离就是内边距。
格式：

  • 单独设置四条边
    padding-top: ;
    padding-right: ;
    padding-bottom: ;
    padding-left: ;

  • 同时设置四条边
    padding: 上 右 下 左;

注意点:
1.给标签设置内边距之后, 标签占有的宽度和高度会发生变化
2.给标签设置内边距之后, 内边距也会有背景颜色

<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            border: 3px solid;
        }
        .box1{
            padding-top: 20px;
            padding-left: 30px;
            padding-bottom: 10px;
            padding-right: 20px;
        }
        .box2{
            padding: 30px 10px 20px 30px;
        }
    </style>
</head>
<body>
    <div class="box1">文学是一种语言艺术，是话语蕴藉中的审美意识形态。 诗歌、散文、小说、剧本、寓言、童话等不同体裁，是文学的重要表现形式。</div>
    <br>
    <div class="box2">文学是一种语言艺术，是话语蕴藉中的审美意识形态。 诗歌、散文、小说、剧本、寓言、童话等不同体裁，是文学的重要表现形式。</div>
</body>
外边距属性

标签和标签之间的距离就是外边距
格式：

  • 单独设置四条边
    margin-top: ;
    margin-right: ;
    margin-bottom: ;
    margin-left: ;
<style>
  .box1{
            margin-top:20px;
            margin-right:40px;
            margin-bottom:80px;
            margin-left:160px;
        }
</style>
  • 同时设置四条边
    margin: 上 右 下 左;
<style>
  .box1{
            margin:20px 40px 80px 160px;
            /*margin:20px 40px 80px;*/
            /*margin:20px 40px;*/
            /*margin:20px;*/
        }
</style>

注意点:

  1. 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse(折叠)
    折叠 取两个值中的最大值
  2. 水平方向的margin永远不会合并
  3. 防止margin折叠：只设置一个元素的margin
  • 上下margin的传递
  1. margin-top的传递
    如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。
  2. margin-bottom的传递（用的较少）
    如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素。
  3. 防止上下margin传递
    3.1 给父元素这是padding-top或padding-bottom（很少用）
    3.2 给父元素设置边框
    3.3 触发BFC:设置父元素overflow: hidden;（使用这种方式）
outline 元素的外轮廓

不占空间
默认显示在border外面
应用场景：去除a元素、input元素的focus轮廓效果
outline: 5px solid firebrick;

box-shadow

可以设置一个或多个阴影
<shadow> = inset? && <lenght>{2,4} && <color>
第1个<lenght>:水平方向的偏移，正数往右偏移
第2个<lenght>:垂直方向的偏移，正数往下偏移
第3个<lenght>:模糊半径
第4个<lenght>:延伸距离
<color>:阴影的颜色，如果没有设置，跟随color属性的颜色
inset:外框阴影变成内框阴影

    <style>
        div {
            display: inline-block;
            margin-left: 10px;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: aqua;
            /* 默认阴影颜色为黑色 */
            box-shadow: 5px 5px;
        }
        .box2 {
            background-color: saddlebrown;
            box-shadow: 5px -5px firebrick;
        }
        .box3 {
            background-color: aqua;
            /* 第三个参数表示阴影模糊效果 0表示没有模糊 可以做毛玻璃效果 */
            box-shadow: 5px 5px 3px;
        }
        .box4 {
            background-color: firebrick;
            /* 第四个参数，正数表示向外延伸，负数表示向内延伸 */
            box-shadow: 5px 5px 2px 2px;
        }
        .box5 {
            background-color: forestgreen;
            box-shadow: inset 5px 5px 2px 2px;
        }
    </style>
box-shadow
text-shadow文字阴影

text-shadow: 5px 5px 5px forestgreen;

box-sizing属性

这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变。

box-sizing取值
box-sizing:content-box   元素的宽高 = 边框 + 内边距 + 内容宽高
box-sizing:border-box   元素的宽高 = width/height的宽高

增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度。

盒子模型

CSS盒子模型指那些可以设置宽度高度/内边距/边框/外边距的标签, HTML中的标签都是盒模型。

  1. 内容的宽度和高度：
    就是通过width/height属性设置的宽度和高度
  2. 元素的宽度和高度
    宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框
    高度 = 上边框 + 上内边距 + height + 下内边距 + 下边框
    （增加了padding/border之后元素的宽高也会发生变化
    如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高）
  3. 元素空间的宽度和高度
    宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
    高度 = 上外边距 + 上边框 + 上内边距 + height + 下内边距 + 下边框 + 下外边距
  • 清空默认边距（外边距和内边距）
    在企业开发中，为了更好的控制盒子的宽高和计算盒子的宽高等，编写代码前第一件事就是清空默认边距。
    清空方式(直接网上复制即可)：
<style>
body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin: 0;
            padding: 0;
        }
</style>
  • 行高和字号
/*设置行高*/
line-height: 40px;

注意：
1.行高和盒子高一样时，文字默认是垂直居中的
2.企业开发中经常将盒子的高度和行高设置为一样，这样就可以保证一行文字在盒子中垂直居中
简而言之：要想一行文字在盒子中垂直居中，只需要设置这行文字的行高等于盒子的高度即可。
3.如果一个盒子有多行文字，就只能使用padding来使文字居中。
4.如果一个盒子中存储的是文字，一般以左内边距为基准，因为右内边距存在误差，右边如果放不下一个文字会自动换行。
5.顶部的内边距并不是边框到文字顶部的距离，而是边框到行高顶部的距离。

  • 编写网页顺序
    1.清空所有边距
    2.从外向内，从上至下编写网页
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 如何理解盒模型？
    大家好，我是IT修真院的学员，一位正直纯洁善良的web前端程序员 今天给大家分享一下如何理解盒模型？ 1.背景介绍...
    宁静森林阅读 2,276评论 0赞 0
  • CSS 盒子模型（CSS重点）
    其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通...
    王玉伟的伟阅读 1,194评论 0赞 2
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,730评论 0赞 6
  • 14-CSS基础-盒模型
    盒模型 边框属性 什么边框? 边框就是环绕在标签宽度和高度周围的线条 边框属性的格式 连写(同时设置四条边) bo...
    极客江南阅读 10,100评论 12赞 74
  • 07-CSS盒模型
    边框属性 边框属性的格式连写(同时设置四条边的边框)border: 边框的宽度 边框的样式 边框的颜色;快捷键:b...
    喝酸奶要舔盖__阅读 235评论 0赞 0

友情链接更多精彩内容