定位的特殊属性

最新推荐文章于 2022-10-04 19:57:54 发布
最新推荐文章于 2022-10-04 19:57:54 发布
阅读量129 收藏
点赞数
分类专栏： 前端基础 CSS样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Angela_Connie/article/details/110089919
版权

定位的特殊属性

  1. 行内元素添加绝对定位或固定定位，可直接设置宽高，不用设置display：inline-block转换成行内块元素之后再设置宽高
  2. 块级元素添加绝对定位或固定定位，若没有给宽高，则默认宽高是元素内容的大小
    在不设置块级元素的宽高，也不设置定位时，元素的宽度默认和父元素一样宽，高度就是元素撑开盒子的高度，但是设置定位之后，在不设置宽度高度的情况下，元素的宽度和高度就是撑开元素的高度和宽度
  3. 脱标的盒子(浮动，绝对定位，固定定位)不会触发外边距的塌陷
  4. 只有定位的元素才有z-index属性
DangR-Jisoo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中关于定位属性position为fixed的使用记载
09-25
`position: fixed`是一个非常特殊的定位方式，它将元素相对于浏览器窗口进行定位，而不是相对于其正常文档流中的位置。这意味着，无论用户如何滚动页面，固定定位的元素始终保持在屏幕的某个特定位置。例如，许多...
行内元素进行绝对(absolute)，固定(fixed)定位后会变成块级元素·
weixin_30491641的博客
07-01 2156
行内元素进行绝对定位后会变成块级元素· position:absolute; <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* *{ padding: 0; ...
前端学习笔记：定位特殊性
weixin_43339892的博客
12-30 161
绝对定位和固定定位也和浮动类似 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小 脱标的盒子不会触发外边距塌陷 浮动元素、绝对定位和固定定位元素都不会触发外边距合并的问题 绝对定位或者固定定位会完全压住盒子，浮动不会，浮动产生的最初目的是实现文字环绕效果 文字环绕效果（即 图片不会压住文字） 截图来自百度百科，侵删 ...
css定位的特殊特性
lxllxl211的博客
10-04 171
2、块级元素添加绝对或固定定位，如果不给宽度和高度，默认大小是内容 的大小。浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。1、行内元素添加绝对或固定定位，可以直接设置宽度和高度。绝对定位和固定定位也和 浮动 类似。3、脱标的盒子不会触发外边距塌陷。
定位属性介绍
chencyxcyx的博客
03-01 3321
定位属性为position，常用的属性值有static，relative,absolute,fixed，sticky。 static：代表默认值，没有定位，也可以用来取消之前设置的定位值。 relative：相对定位，它的参照物是自己本身，可以通过left、top、right、bottom设置偏移值。它并没有脱离文档流，所以原来所占的位置依然会保留。相对定位并不会影响其他元素的布局。 absol...
移动端三种布局方式之流式布局-移动端京东首页
JadeDu_的博客
08-18 799
结果图 思路解析及注意点 1. 顶部 头部通栏的大盒子宽度是100%，里面划分成四个小盒子，用ul li排列 四个li高度相同 设置不同宽度，让四个盒子里的内容垂直居中 为了代码规范，图片都要放在盒子里，改动盒子内图片大小直接设置就可以。 .app ul li:nth-child(1){ width: 8%; } /* 图片可以直接改宽，等比例缩放*/ .app ul li:nth-child(1) img{ width: 10px; } .app ul li:nth-child(2){
div style常用属性介绍及使用示例
09-25
- - `static` 不做特殊定位，遵循正常文档流。 - - `relative` 相对定位，元素相对于其正常位置进行偏移，不影响其他元素的位置。 - - `absolute` 绝对定位，元素相对于最近的非 `static` 定位的祖先元素进行定位...
全面了解css 属性选择器
09-24
这些属性选择器大大增加了CSS的灵活性，使得我们可以更精确地定位和应用样式。理解并熟练运用这些选择器，可以帮助开发者编写更加高效和可维护的CSS代码，提高网页设计的效率。在实际开发中，可以根据需求选择合适的...
利用边框border属性做小符号
09-25
在网页设计中，有时我们可能需要创建一些特殊的图形或符号，而这些并不总是需要通过插入图像来实现。正如你所提到的，利用CSS中的边框(border)属性，我们可以巧妙地构造出各种形状和符号。这种方法既简洁又灵活，...
CSS解决链接锚点定位偏移的代码
09-25
总的来说，解决CSS锚点定位偏移的问题，主要依赖于对CSS布局的理解和巧妙运用，包括调整`margin`、`padding`、`border`，以及合理设置`z-index`和`position`属性。通过这些技巧，我们可以让锚点链接准确地跳转到期望...
定位后的行内元素设置宽高
阳光下的冷静的博客
06-05 1406
相对定位之后的行内元素是依然不可以设置宽高的，需要加display:block设置；但是绝对定位后的行内元素就可以直接设置了。（这里说的设置是指width生效，而不是单纯的写上了而已） 注：html中有一类元素比较特殊，虽然他们属于行内元素，但是他们是可以设置宽高的，如img|input|select|textarea|button|label等，他们被称为可置换元素（Replaced elem...
绝对定位对元素宽度的影响
weixin_34360651的博客
10-19 626
一、问题来源 自己编写轮播图切换的时候前一幅图滑动时后边出现空白直到前一幅图全部滑出后第二幅图才出现。刚开始出现问题到网上搜发现有的说定时器动画可能会造成这种情况，于是我在代码调试里注释掉了定时器，让图片只走一步就停下来，发现后边还是有空白，所以确定不是定时器的问题。于是我查看了一下盒模型，发现包裹img的容器宽度div#main并不是我理想中六张图片宽度的总和，原来是我没有显式...
CSS定位的特殊特性
m0_46744635的博客
08-21 187
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS定位的特殊特性</title> <style> span{ ...
定位的特殊特性，【绝对定位会使行内元素具有行内元素的特点，行内元素的宽高由内容决定】
weixin_43837268的博客
10-09 380
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位.
前端学习（188）:浏览器内核和浏览器前缀
歌谣的博客
12-23 288
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
绝对定位的特殊性质
第三食堂
05-06 531
代码中，外面的盒子没有设置position属性，内部的盒子设置了绝对定位，但是只在垂直方向指定了偏移量，没有指定水平方向的偏移量，此时内部的盒子则因为设置了绝对定位属性，而外层div没有position属性，所以的它的定位基准是浏览器窗口。但是又由于在水平方向上没有设置偏移属性，因此在水平方向它仍然会保持原来应该在的位置，它的左侧与外层盒子的左侧对齐。因为在垂直方向上设置了“top:70px”，所
HTML中meta标签的作用
DangR_Jisoo的博客
04-15 2448
HTML中meta标签的作用 首先，meta标签是一个自结束标签，其格式为<meta…/ >，下面介绍meta标签的作用： 1. 规定字符集 <meta charset="utf-8"> HTML规定解码字符集为UTF-8， 此句为了防止乱码，UTF-8字符集支持 地球上所有的文字，而中文系统默认编码是GB2312，产生乱码的根本原因是编码和解码采用的字符集不同。...
取消＜input＞与＜textarea＞默认属性outline和resize
DangR_Jisoo的博客
11-24 1649
取消与默认属性 在我们点击文本框<input>时，文本框默认边框会加黑加粗，影响了视觉效果，我们可以使用outline：none属性来取消默认样式 未设置outline：none属性之前的效果如下图所示： 鼠标未聚焦之前： 鼠标聚焦之后： 很清楚的发现轮廓加粗加黑了，使文本框变得很不美观 但是加了outline：none属性之后，文本框样式与没有聚焦一样 input{ outline: none } 2. 我们在页面写入一个文本域时，文本域的大小可以随意用鼠标拖动来设置大小，一般情
表单相关属性(详解)
DangR_Jisoo的博客
11-24 1615
表单相关属性(详解) 一. 表单组成元素： 表单=表单标签+表单元素(表单域)+表单按钮 表单标签 <form action='http://127.0.0.1:8000/' method='post' name='form1'></form> 功能：用于申明表单，定义采集数据的范围，也就是和里面包含的数据将被提交到服务器或者电子邮件里 action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址 method=get或post指明提交
前端各个定位属性的区别
最新发布
06-13
在前端中，常见的定位属性有相对定位、绝对定位、固定定位和粘性定位。它们之间的区别如下： 1. 相对定位（relative）：相对定位是相对于...固定定位和粘性定位通常用于实现一些特殊效果，如固定导航栏、悬浮广告等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值