web前端之css(盒子模型)

最新推荐文章于 2024-01-22 00:10:20 发布
最新推荐文章于 2024-01-22 00:10:20 发布
阅读量551 收藏 3
点赞数
分类专栏： css 前端 文章标签： web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45378666/article/details/99993833
版权

文章目录

盒子模型

1. 基础概念

​ 盒子模型分别由外边距、边框、内边距和标签内容组成。

在这里插入图片描述

2. 外边距

在这里插入图片描述

  1. 属性：margin

  2. 作用：调整标签与标签之间的距离

  3. 特殊：

    1）margin:0; 取消默认外边距
    2）margin:0 auto;左右自动外边距，实现标签在父标签范围内水平居中
    3）margin:-10px;标签位置的微调

  4. margin:外边距设置(顺时针方向赋值)

    只有一个 值时，这个值会被指定给全部的 四个边.
    两个值时，第一个值被匹配给 上和下, 第二个值被匹配给 左和右.
    三个值时，第一个值被匹配给 上, 第二个值被匹配给 左和右, 第三个值被匹配给 下.
    四个值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序).

  5. 单方向外边距：只取一个值

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

  6. 外边距合并：
    1）垂直相遇

    • 子标签的margin-top作用于父标签上

    • 标签之间同时设置垂直方向的外边距，最终取较大的值

在这里插入图片描述

2）包含合并

  • 当一个标签包含在另一个标签中时，它们的上面和包含上面的父标签
  • 下面和包含下面的外标签的边距之间也会发生合并
  • 条件:标签不能有边框,否则无法合并.p标签不能合并

在这里插入图片描述

3. 边框

1) 边框实现

语法：

border:width style color;

边框样式为必填项，分为：

样式取值含义
solid实线边框
dotted点线边框
dashed虚线边框
double双线边框

2) 单边框设置

分别设置某一方向的边框，取值：width style color;

属性作用
border-top设置上边框
border-bottom设置下边框
border-left设置左边框
border-right设置右边框

3) 网页三角标制作

  1. 标签设置宽高为0
  2. 统一设置四个方向透明边框
  3. 调整某个方向边框可见色
 <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: aqua
        }
        #boxs{
            width: 0;
            height: 0;
            border: solid 150px  black;   (线值为高度或宽度的的一半)
            /* transparent  透明 */
            border-left-color:red; 
            border-right-color:blue; 
            border-bottom-color:blueviolet; 
            border-radius: 50%;
        }
        #boxss{
            width: 300px;
            height: 300px;
            background-color:yellow;
            border-radius: 50%;
            box-shadow: 10px 10px 10px black;
        }
        /* 圆角边框 */
        img{
            border-radius: 50%;
            box-shadow: 10px 10px 10px #666666;
        }
        /* 轮廓线去除 */
        div>input{
            outline: none;
            /* 文本与边框的距离 */
            padding: 10px 8px
        }
        #boxsss{
            border: solid 2px red;
            border-color: blue;
            /* 上下一般为10px,左右一般为8px */
            padding: 10px 8px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="boxs"></div>
    <div id="boxss"></div>
    <img src="../imgs/img02-3.png" alt="">
    <div>
        <input type="text">
    </div>
    <div id="boxsss">
        单方向内边距,只能取一个值
    </div>
</body>

4) 圆角边框

在这里插入图片描述

  1. 属性：border-radius 指定圆角半径
  2. 取值：像素值或百分比
  3. 取值规律：
一个值 	表示统一设置上右下左   (圆:长和宽的一半或者50%)
四个值 	表示分别设置上右下左
两个值 	表示分别设置上下 左右
三个值 	表示分别设置上右下，左右保持一致

5) 轮廓线

  1. 属性：outline
  2. 取值：width style color
  3. 区别：边框实际占位，轮廓不占位
  4. 特殊：取none可以取消文本输入框默认轮廓线

4. 内边距

在这里插入图片描述

  1. 属性：padding
  2. 作用：调整标签内容框与边框之间的距离
  3. 取值：单位是 px 或百分比，但不允许使用负值
20px;					一个值表示统一设置上右下左
20px 30px;				两个值表示分别设置(上下) (左右)
20px 30px 40px;			三个值表示分别设置上右下，左右保持一致
20px 30px 40px 50px;	表示分别设置上右下左
  1. 单方向内边距,只能取一个值：
padding-top
padding-right
padding-bottom
padding-left

5. 盒阴影

在这里插入图片描述

  1. 属性：box-shadow
  2. 取值：h-shadow v-shadow blur spread color;
  3. 使用：不管是浏览器窗口还是标签自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向
h-shadow 	取像素值，阴影的水平偏移距离,值越大,阴影向右移动越多
v-shadow 	取像素值，阴影的垂直偏移距离,值越大,阴影向下移动越多
blur 		取像素值，表示阴影的模糊程度，值越大越模糊
spread 		选填，取像素值，阴影的尺寸
color 		设置阴影颜色,默认为黑色

e.g.
	div{
            width: 800px;
            height: 35px;
            /* border: solid 1px blue; */
            background-color: white;
            box-shadow: 1px 1px 2px #666666;
            margin: 0 auto;
        }

6. 盒模型概念

  1. 在模型中，它规定了标签处理内容、内边距、边框和外边距的方式
  2. 最内是内容，包围内容的是内边距，内边距的边缘是边框
  3. 边框以外是外边距，外边距默认是透明的

7. 标签最终尺寸的计算

  1. 盒模型相关的属性会影响标签在文档中的实际占位，进而影响布局

  2. 标签设置width/height指定的是内容框的大小

  3. 最终尺寸 = width/height+padding+border+margin

8. 浮动

  1. 浮动方向

    float  	浮动
左浮动	:从左至右排列	left     
右浮动	:从右至左排列	right
清除浮动:	clear:both

  2. 包裹浮动

麻辣灬香蕉
关注
专栏目录
web前端-CSS-盒子模型
jinchenpeng的博客
05-29 824
外边距合并： 给一个边框才可以移动蓝色块 怪异盒子： 定义200px 200px 弹性盒子 针对移动端 父元素中声明弹性盒子 网页放大缩小不影响显示 垂直布局
前端学习之CSS——盒子模型
Jane_xxxxxy的博客
07-29 344
1、网页布局的本质 网页布局的核心本质： 就是利用 CSS 摆盒子。 网页布局过程： 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 利用 CSS 设置好盒子样式，然后摆放到相应位置。 往盒子里面装内容 2、盒子模型（Box Model）组成 盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容 3、边框（border） 3.1、边框的使用
Web前端 | CSS盒子模型
哦 卷！
08-21 699
文章目录一、盒子模型1. 基础概念2. 外边距3. 边框1) 边框实现2) 单边框设置3) 网页三角标制作4) 圆角边框5) 轮廓线2. 内边距3. 盒阴影4. 盒模型概念5. 标签最终尺寸的计算5. 标签最终尺寸的计算 一、盒子模型 1. 基础概念 ​ 盒子模型分别由外边距、边框、内边距和标签内容组成。 [外链图片转存失败(img-t8QHMoga-1566298152236)(assets\盒...
WEB前端-CSS盒子
Arui_0的博客
08-21 323
1.盒子模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin） 2.border，设置元素的边框，属性（边框三要素）：宽度、样式、颜色，这也是通常border属性值的书写顺序（非严格要求） 单独书写：border-width（宽度，默认3px）、border-style（样式，默认none）、border-color（颜色，默认黑色） border-style属性值：dotted（点状）、solid（实线）、double（双实线）、dashed（
Web前端之盒模型
花&败
10-23 2567
兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理。
web前端-CSS盒子模型
qq_53584660的博客
06-08 2008
1.盒子的概念页面中的每一个标签，都可以看做是一个盒子，通过盒子的视角更方便的进行布局浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子2.盒子模型CSS中规定每个盒子分别由 内容区域（content）、 内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是 盒子模型3.记忆：可以联想现实中的包装盒（电脑包装做类比，电脑+填充泡沫+外包装盒） 如果是两个内容： 想让两个内容之间有间距，代码应该加margin：外边距
Web前端----CSS盒子模型教学总结
软件测试的坑，让我来踩吧
08-08 772
此文章是对CSS盒子模型进行的一些学习，一看就懂，一学就会。
Web前端——CSS盒模型
qq_25592087的博客
09-21 478
元素选择器{ /* 选中要修改地元素 */属性名:属性值;/* 属性名：修饰语法*/属性名:属性值;/* 属性值：属性的取值*/}
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
web前端之CSS盒子模型
weixin_46820017的博客
05-06 1347
盒子模型 前言 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 border：边框。 margin：外边距。 盒子模型的示意图： 代码演示
flex弹性盒子布局:
qq_60839348的博客
11-30 632
flex弹性盒子布局:
前端之盒模型
weixin_46372074的博客
03-06 1358
前端之盒模型盒模型块级盒子 和 内联盒子块级盒子（Block box）内联盒子（Inline box）弹性布局 flex 盒模型 在 CSS 中，所有HTML元素都可以看作盒子，由内而外表示为——内容 内边距 边框 外边距。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 块级盒子 和 内联盒子 用display 属性的进行设置，比如 inline（内联盒子） 或者 block（块级盒子）。 块级盒子（Block box） Block box会扩展并占据父容器的所有空间，所以在绝大数的情况下
前端入门——盒子模型
qq_44213733的博客
09-25 106
一、web前端开发入门之2.4css盒子模型
m0_52766105的博客
08-03 193
css盒模型
Web前端开发——CSS布局与定位之盒子模型（Ⅰ）
wq_ocean_的博客
02-04 938
1. 盒子模型 1.1 盒子概念 页面当中所有元素都可以看成一个盒子，每个盒子都占据着定的页面空间。它可以指的是页面上的个区域，或者是图片，导航栏、列表、表格等等段落 1.2 盒子组成 盒子模型首先要有内容，也就是盒子里面装着的东西，这个内容我们用content来表示 ； 内容占有一定的页面空间，我们通常用height它的高度，还有width他的宽度来表示，比如说当前的盒...
前端基础：盒子模型
qq_48959845的博客
05-24 388
在网页中：一切皆盒子 盒子 CSS处理网页时，他认为每个元素都包含在一个不可见的盒子里。 为什么要想象成盒子呢？因为我们如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于在摆盒子。 我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局 内容区CONTENT 内容区指的是盒子中放置内容的区域，也就是元素的文本内容，子元素都是存在内容区的。 如果元素没有设置内边距和边框，则内容大小默认和盒子大小是一致的 通过width和height两个属性可以设置内容区大小 width和height属
【Web前端开发基础】CSS的盒子模型
最新发布
m0_62611367的博客
01-22 1100
盒子的概念页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子盒子模型内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin ）构成，这就是盒子模型记忆：可以联想现实中的包装盒。
web前端 之 CSS盒模型
mao871863224的博客
11-04 300
CSS盒模型题目：谈谈你对CSS盒模型的认识基本概念：标准模型+IE模型这两者的区别（计算高度和宽度的不同）CSS如何设置这两种模型JS如何设置获取盒模型对应得高和宽实例题（根据盒模型解释边距重叠）BFC（边距重叠解决方案）： 题目：谈谈你对CSS盒模型的认识 基本概念：标准模型+IE模型 盒模型包括margin、border、padding、content（由外向里） 盒模型包括标准模型和IE模...
Web前端 弹性盒子
m0_72686628的博客
08-11 381
四周对齐，子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。* align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）justify-content 属性：设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,默认值，主轴顶端对齐。...
web前端css盒子
11-17
CSS盒子模型是Web前端开发中非常重要的概念，它描述了一个HTML元素在页面中所占据的空间。盒子模型由四个部分组成：内容区域、内边距、边框和外边距。以下是CSS盒子模型的详细介绍： 1. 内容区域：指的是HTML元素的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值