CSS常用属性

最新推荐文章于 2022-03-16 14:10:38 发布
最新推荐文章于 2022-03-16 14:10:38 发布
阅读量69 收藏
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51877577/article/details/111461300
版权

CSS常用属性

尺寸

在这里插入图片描述

边框与背景

背景

在这里插入图片描述

边框

在这里插入图片描述

字体与文本

字体

在这里插入图片描述

文本

在这里插入图片描述

列表与表格

列表

在这里插入图片描述

表格

在这里插入图片描述

定位

html中的任何元素在浏览器显示时都会遵循默认的文档流进行摆放，文档流即从左往右（行内元素），从上往下（块元素）；但是在css中可以通过定位的方式将元素脱离正常的文档流，css中定位主要包含以下属性：

  • position：设置定位方式

    • relative:相对定位(不会导致元素脱离文档流)
    • absolute:绝对定位(元素会脱离正常的文档流)
    • fiexd:固定定位(脱离正常文档流)
    • static(默认值)

  • z-index：层叠顺序（必须配合绝对定位一起使用，数值越大越置顶）

  • left：元素与父容器左边的距离

  • right：元素与父容器右边的距离

  • top：元素与父容器上边的距离

ZyKun、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
position定位
weixin_43795084的博客
12-02 202
1.static(没有定位，不能偏移，也就是left等不生效) 所有的元素如果不进行定位，默认都为static 2.absloute（绝对定位） 设置为absolute，它需要向上找一个定位的父元素（也就是被设置了除static以外的值）为基准来定位， 如果没有，则就会以浏览器窗口为基准定位。 3.relative(相对定位) 相对的意思就是相对于其正常的位置(也就是为static)的时候，以它为基准，进行偏移 fixed（绝对定位） 以浏览器窗口为基准进行定位 inherit(继承)
浅谈CSS中【position（定位）】中的relative和absolute
qq_45104588的博客
08-16 426
Author：天添豆浆 计算机科学与技术专业，迷摇滚的理科男 新手村码农，第六篇博客，感觉CSS中position的概念略模糊，梳理一下 position概述 Position，这个属性定义建立元素布局所用的定位机制。——搜狗百科 tips：下面z-index、top、right、bottom、left、clip都要配合position才能使用 背景 html中的任何元素在浏览器显示时都会遵循默认的文档流进行摆放，文档流即从左往右（行内元素），从上往下（块元素）；但是在css中可以通过定位的方式将元素.
ie8中 position:relative定义的层不能正常显示
仰望者！
03-10 350
无意打开IETester在IE8下测试了一个页面，突然发现一个父级position:relative;子级position:absolute;的样式焦点轮播的时候在IE8下居然是错位的。仔细看了一下，发现IE8居然不认父级的相对定位，直接就是在屏幕上显示绝对定位。 在我的系统中IE6,IE7下显示正常，解决办法 将 <meta http-equiv="Content-Type" con...
绝对定位不设置元素高宽居中的方法
sunshinemin的博客
03-16 472
父元素 position:relative; 子元素： position:absolute; top:50%; left:50%； transform:translate(-50%, -50%);
absolute绝对定位的元素显示不出来的可能原因
hzxOnlineOk的博客
08-07 1万+
在父元素position: relative相对定位后 对子元素position: absolute绝对定位，如果没有指定width，会显示空白，当然，如果同时设置left和right，相当于会默认计算一个width，所以也可以正常显示 <View style={{ position: 'absolute', width: '100%', left: 0, // r
css常用属性
11-19
在此，三岁收集了css的许多常用属性，包括文字属性、边框空白、符号属性、背景样式、指定背景位置、连接属性、边框一览表、表单运用、边界样式等，非常适合新手学生等。
CSS常用属性大全
08-31
CSS是层叠样式表(英文全称：Cascading Style Sheets)的简称，简单来说，就是网页布局的样式元素，网页界面的视觉效果，就是CSS做出来的。 目前，网页架构的标准版本是html5+CSS3，CSS的最新版也是CSS3，任何网页都...
absolute如果找不到定位父元素那么会相对于谁进行定位_position 定位
weixin_39861054的博客
11-24 456
position 属性规定元素的定位类型。position 有四个属性值：static（默认值）、relative（相对定位）、absolute和fixed（统称为绝对定位）。static，没有定位，元素出现在正常的流中（忽略 top、bottom、left、right 或者是 z-index 声明）。relative，生成相对定位的元素，相对于原来位置移动，元素设置属性之后会出在文档流中不影响其...
position属性absolute与relative 详解 不为人知的（fixed）绝对定位(fixed相对于浏览器窗口=不动的div)
服务好姐qa
12-02 9663
From：http://www.cnblogs.com/wiseblog/articles/4352007.html 总结： 当一个标签打上position：absolute绝对标签后，当我们使用TRBL属性时，他所参照的对象是带有absolute或relative标签的父级（无限），如果所有父级都没有absolute或relative打上标签，则以BODY左上角点为参照（一句
CSS 定位 元素的显示与隐藏
qq_43522419的博客
01-19 396
CSS定位 为什么需要定位？ 浮动可以让多个块级盒子没有缝隙的排列显示，经常用于横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子 定位定义 定位：将盒子定在某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。 定位 = 定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 定位模式 定位模式决定定位的方式，它通过css的position属性来设置，其值可以分为四个： 值 语义 sta
页面滚动条固定到最底部
LH990226的博客
10-16 869
项目中遇到的需求,具体可以用来实现 聊天室发送消息后使最后发的消息展示在页面上等, 方法亲测有效 在想要定位的位置添加一个空的div盒子,给一个绝对定定位,父级盒子记得子绝父相,然后给一个id做标识 <div style="position:absolute" id="onbottom"></div> 然后在需要定位的时候调用 document.getElementById("onbottom").scrollIntoView(); ...
CSS position: absolute、relative定位问题详解
weixin_34235135的博客
08-31 246
CSS2.0 HandBook上的解释：　　设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。 TRBL属性（TOP、RIGHT、BOTTOM、LEFT）　　当设定position:absolute　　如果父级（无限）没有设定positio...
css清除定位影响,总结CSS的position定位属性在使用的一些重点
weixin_29437633的博客
08-04 2521
关于CSS定位，有人很多时候都是随便用用，符合自己的要求就行。但是CSS中的position等属性确实有很多需要认真考究的地方。1.position:staticstatic属性是position的默认值，也就是说，当一个元素没有为其设定position属性时，它的默认值就是static。2.position:absolute这是一个经常会被用到的position属性值。如果为某个元素设定了abs...
CSS position属性 中absolute和relative的相互作用的测试与总结
weixin_40312266的博客
10-04 497
本文目标：官方文档对相关功能的说明总是那么难以理解的，我们只好自己研究出规律。在本文，我们将测试出position属性 中absolute和relative作为父与子元素的属性的之间的相互作用，以此来理解relative和absolute的真正作用。 1，父元素relative，子元素relative 测试代码：一个relative属性的div包含着两个 relative属性的h2和两个re...
css中position:absolute与position:relative的使用问题
08-27 3559
问题描述： “如果用position来布局页面，父级元素的position属性必须为relative” 这一段经常在网上看到，一开始以为是官方标配，后面在学习的过程中有些疑问，故特意拿出来研究学习了下，发现并非如此，先说结论： 绝对定位的父级节点只要是relative、fixed、absolute其中一个即可实现容器内相对布局，以下是找到的资料印证的。（特别说明，两个position：abs...
一张图看懂css的position里的relative和absolute的区别
dbfgefai009910的博客
02-12 293
position有以下属性：static、inherit、fixed、absolute、relative 前三个好理解好区分：static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。inherit：从父元素继承 position 属性的值。fixed：生成绝对定位的元素，相对于浏览器窗口进行...
CSS常见问题及解决（五） position定位中的absolute
baizaozao的博客
03-21 2420
参考资料：https://www.jianshu.com/p/a3da5e27d22b 两个结论 absolute不一定要与relative同时出现 当没有设置父元素或者某个祖先元素为relative时，absolute的 left，right，top，bottom属性是相对于body而言的 当设置父元素或者爷爷元素，为relative时，absolute的 left，right，...
css中的relative（相对位置）和absolute(绝对位置)
热门推荐
yangxiaonawzy的专栏
06-20 2万+
  这几天在看div+css，在网上找到了很多的资料，我都不知道选择哪一个了。这两天在看>，感觉还可以。把今天学习过程中遇到的问题和知识点，给记录下来。 首先学习到的是css中的相对定位和绝对定位。定位标签：position包含属性：relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位
css position: absolute、relative详解
shilu89757的专栏
04-03 621
在看CSS的时候遇到了position: absolute、relative的问题，一直比较迷糊，今天终于搞清楚了。CSS2.0 HandBook上的解释：设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁( margin )，
CSS常用属性与动画特效 (可以完成旋转照片墙，或者其他相关CSS效果)
最新发布
05-25
CSS是一种用于网页设计的样式表语言，它可以控制网页的布局、字体、颜色、大小、背景、边框、动画等方面。下面是一些常用的CSS属性和动画特效： 1. 属性 - background-color：设置元素的背景色。 - color：设置元素的文字颜色。 - font-size：设置元素的文字大小。 - border：设置元素的边框。 - padding：设置元素的内边距。 - margin：设置元素的外边距。 - display：设置元素的显示方式，如block、inline、inline-block等。 - position：设置元素的定位方式，如relative、absolute等。 - z-index：设置元素的堆叠顺序。 - transform：设置元素的变换效果，如旋转、缩放、平移等。 2. 动画特效 - transition：设置元素的过渡效果，如颜色、大小、位置等属性的变化过渡。 - animation：设置元素的动画效果，如旋转、移动、闪烁等。 - keyframes：定义动画的关键帧，即动画从哪个状态到哪个状态。 例如，实现旋转照片墙可以使用以下CSS代码： ```css .photo-wall { display: flex; flex-wrap: wrap; justify-content: center; } .photo { width: 200px; height: 200px; margin: 10px; border: 1px solid #ccc; transition: transform .5s ease-in-out; } .photo:hover { transform: rotateY(180deg); } ``` 其中，.photo-wall是照片墙的容器，.photo是每张照片的样式，当鼠标悬停在照片上时，会触发transform属性的变化，从而实现照片的旋转效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值