css盒子模型及定位

最新推荐文章于 2024-10-19 23:37:41 发布
最新推荐文章于 2024-10-19 23:37:41 发布
阅读量278 收藏 2
点赞数
分类专栏： # html 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hawk199/article/details/109990140
版权

盒子模型

  • margin 元素之间的距离
  • padding:元素与边框之间的距离
  • border :边框

在这里插入图片描述
padding、border可以让元素向外拓展

元素定位

只有定位元素才有left、right、top、bottom属性

固定定位

  • 脱离文档流
  • 以网页（浏览器窗口）为参照
  • 不占用起始位置
  • 如文档有滚动条，不随文档一起滚动，固定在浏览器窗口某个位置上
    在这里插入图片描述

相对定位

  • 以起始位置为参照，相对起始位置偏离
  • 占用起始位置
    在这里插入图片描述

绝对定位

  • 脱离文档流
  • 如果有定位父元素，则以父元素为参照，否则以文档位置为参照（子绝父相）
  • 不占用起始位置
  • 如文档有滚动条，随文档一起滚动
  • 绝对定位参照文档或父元素，固定定位是参照浏览器视窗
    在这里插入图片描述
心静自然亮
关注
专栏目录
前端简单入门第五讲 CSS基础(二)——盒子模型、浮动与位置
李阿昀的博客
01-03 1273
盒子模型 CSS里面有句话叫万物皆盒子，所以在这一小节要简单介绍一下CSS中的盒子模型。 盒子模型的基本要素 以下图中的按钮为例， 在Chrome浏览器中查看这个元素，结果是这样的： 蓝色部分（28 x 32 ）是button的content，绿色的是padding，黄色的是border，深黄色是margin。盒子模型很简单，其实就这4个概念。因此，一个元素在页面上的宽高就是由这四个部分共同影...
盒子模型的布局
weixin_55770237的博客
05-10 935
HTML中标签
盒子模型的定位
安卓学习之路
12-08 425
1、CSS定位 CSS定位（Positioning） 属性允许你对元素进行定位。 CSS为定位和浮动 提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 CSS定位机制 CSS有三种基本的定位机制：普通流，浮动流和绝对定位。 除非有专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在（X
盒子模型， 定位
我的小屋的博客
07-17 2900
盒子模型 Margin：外边距 Margin-top、margin-right、margin-bottom、margin-left 使用方式 （1）      margin：30px；表示上下左右外边距都为30px （2）      margin-left：30px：单独设置上下左右外边距 （3）      margin：10px、20px、30px、40px、:分别设置上下左右四个边
CSS盒子模型、浮动、定位
qq_42227428的博客
06-01 3783
一、盒子模型1、css背景（background）：css可以添加背景颜色和背景图片来进行图片的设置，比如给一个div盒子，那么div盒子相关背景的属性可以设置以下：背景颜色：div {background-color: red;}，给div盒子设置一个红色背景颜色。背景图片：div {background-image: url(图片路径);}，给div盒子设置一个背景图片，背景图片我们一般给小背...
CSS盒子模型及定位属性（position)
Chico_D的博客
06-01 913
CSS盒子模型之定位属性（position) #CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： emmm…把它想象成一幅画可能好理解一点，画框和画。 不同部分的说明： • Margin(外边距) - 清除边框外的区域
CSS下盒子模型定位浅析.pdf
10-04
【CSS盒子模型定位浅析】 CSS（层叠样式表）是一种强大的样式控制工具，它使得网页设计者可以精细地控制页面元素的外观和布局。盒子模型是CSS布局的核心概念，它将HTML元素视为一个个具有内容(content)、内边距...
CSS 盒子模型，绝对定位和相对定位
邪人君子的博客
05-18 1678
盒子模型 什么是盒子模型 在HTML文档中，每个元素都有盒子模型。由外到内分别为最外边距区域(margin area)，边框区域(border area)，内边距区域(padding area)和内容区域(content area)。 一个简单的例子： <div class="content"></div> .content { width: 200px; height: 200px; margin: 50px; border: 25px solid
css盒子模型 css margin 外边框合并
09-25
CSS盒子模型是Web开发中非常基础且核心的概念之一，它定义了元素框处理内容、内边距、边框和外边距的方式。了解和掌握CSS盒子模型，对于进行前端开发和网页布局至关重要。 首先，CSS盒子模型由四个部分组成：内容...
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍盒子模型的基本概念，...
盒模型与定位
Coder
09-25 262
   一直认为css很难掌握，所以一直有所畏惧， 不过最近由于工作上需要了解它，硬着头皮看了下，发现其实没有想象的难。 整理一下CSS中相对比较重要的 盒模型 与定位相关的比较。     盒模型：      每个元素类似于一个盒子， 由 内容，内边距、 边框、外边距 四个部分组成。      其中，外边距是透明的，但是其也控制元素的大小。      通过ff的firebug可以很清晰的...
CSS中的盒子模型和定位
锦鲤姑娘的博客
02-28 893
一、盒子模型（Box Model） 1、盒子的组成 2、 浅析盒子模型的CSS属性 二、定位（Positioning） 1、了解浮动 2、块级格式化上下文BFC（Block Formating Context） 3、了解定位
CSS-盒子模型之定位
weixin_52724250的博客
09-28 1338
一：定位的定义 定位可以让盒子自由地在另一个盒子的内部移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子。 二：定位使用方式 定位=定位模式+边偏移 2.1：定位模式 1.静态定位static 2.相对定位relative 3.绝对定位absolu 4.固定定位fixed 2.2：边偏移 top属性 bottom属性 left属性 right属性 三：使用定位 3.1静态定位static 2.默认定位方式，无定位的意思，无实际含义 选择器{position：stati
盒子的模型及定位
zheshuidingdezhu的博客
10-26 2165
盒子的模型及定位 盒子的模型： 两种盒子模型 1.content-box盒模型 这个盒子模型会自我膨胀，盒子的外边距/内边距/盒变框是不占据盒子的宽高的，所以，当给这个盒子定义margin/padding/border时，盒子的大小也会跟着这些属性而改变！ 2.border-box盒模型 这个盒子模型不会自我膨胀，盒子的内边距/盒子的边框是会占据刚开始设置盒子的宽高的，所以，当给这个盒子定义padding/border时，盒子的大小不会变，但盒子的内容会被挤压！ 盒子的定位： 盒子有五种定位方式 1.绝对定
盒子模型以及获取元素位置
胡振涛
03-16 576
前言 这几天接触获取元素位置的信息比较多，感觉有点混淆了，感觉位置有好多种的获取方式，而且每一种的获取方式的使用范围和作用范围都是有一点区别的，为了能够区分的好一点，于是做一个小小的总结，能够有所收获。 盒子模型 此模型在使用CSS进行网页布局的时候会用到的一个模型。里面装有HTML元素的一些内容。一个盒子由外到内分别由四部分组成：margin（页边距）...
CSS—盒子模型+定位（详细解析，附有案例）
lerrel1的博客
07-22 3324
盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。定位是用来控制元素在浏览器中的位置
css的盒子模型（相对位置，绝对位置）
wyqwilliam的博客
11-05 4149
&lt;html&gt; &lt;head&gt; &lt;title&gt;CSS的定位和盒子模型&lt;/title&gt; &lt;meta charset="UTF-8"/&gt; &lt;!--声明css代码域--&gt; &lt;style type="text/css"&gt; #showdiv{ border
CSS中的常见的盒子定位：相对定位！
最新发布
CH040708的博客
10-19 376
定位方式 position 属性中包含 静态定位（static）、相对定位(relative)、绝对定位(absolute)、固定定位(fixed) 4种不同类型的定位方式其中改变左右、上下位置改变方向；水平方向：left right 垂直方向：top bottom宽高度：width、height ，最小高度（min-height：auto | length）可见性（visibility:inherit | visible | collapse | hidden ）
css文档布局——盒子定位
GQ
08-09 1193
最近在系统学习css，看到了定位这一部分，发现之前对这些概念还有点模糊，所以觉得有必要在这里详细的记录一下。 定位可以分为广义上的定位和狭义上的定位，广义上的定位就是把元素放在某个位置，这种定位操作可以通过任何css规则来完成。这里要说的是狭义上定位操作，在css中有一个position属性，它包含4个值，下面分别列出来： 1、static：这是默认的属性值，就是盒子按照标准流布局，包括浮动方
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值