CSS元素定位笔记

最新推荐文章于 2024-08-25 21:41:11 发布
最新推荐文章于 2024-08-25 21:41:11 发布
阅读量93 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47683287/article/details/109321446
版权

CSS元素定位

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <!-- 定位(position)属性：规定元素的定位类型
			      可选值：relative:相对定位
			          absolute:绝对定位
			             fixed:绝对定位
			            static:无定位
			  定位的开启：position的值为static以外的值时，定位开启
             定位的偏移量值为：left right top bottom 

            相对定位：position：relative
                    1、开启相对定位，不设置相对偏移量，在界面中不发生变化。
                    2、设置相对定位的偏移量可选值：left ：相对于原本定位位置，向左偏移
                                                right ：相对于原本定位位置，向右偏移
                                                top ：相对于原本定位位置，向上偏移
                                                bottom ：相对于原本定位位置，向下偏移
                    设置的值，可理解为，在一个坐标系里面，从（0,0）点（表示原本自身位置为起点）到其他坐标的变化
                        比如left：200px，理解为（200，0）进行了平面移动。	
                    3、相对定位不会脱离文档流，保留原本的位置大小。
                    4、不会改变元素的类型，块还是块，内联还是内联

            绝对定位：position：absolute
			 特点：1、脱离文档流
			      2、不更改设置，不发生变化
			      3、相对于它最近的祖先元素开启定位，进行定位的，如果所有祖先元素没有开启定位，则相对于浏览器窗口进行定位
			      4、改变元素性质，内联元素变成块元素
                  5、提升一个层级
                  6、一般给父元素开始相对定位一起使用
				  
			开启固定定位position:fixed
			   特定：1、大部分特点与绝对定位一样
			       2、永远相对浏览器窗口进行定位
			       3、固定在浏览器窗口的某个位置，不会随滚动条改变（小广告等） 
				   
				   
			开启粘性定位position：sticky	 
				特点：在页面正常显示时，相当于开启的relative定位，无变化，但是，当滚动条滚动，移出当前内容时，被开启元素像
                     fixed定位一样固定在页面某处，需要有触发条件（left、right、top） 
                     
            开启浮动float(横向布局使用)
		      设置元素的浮动，脱离文档流
              可选值：left、right、none
              清除浮动：clear：both
              
            设置元素层级z-index：值

            使元素居中对齐可使用margin：
		 -->
             
        -->
			
        
        <script src="" async defer></script>
    </body>
</html>
胡先生的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webdriver元素定位笔记
11-06
webdriver 元素定位笔记 WebDriver 是一个自动化测试工具，它可以模拟用户的行为来与网页交互。要想使用 WebDriver 进行自动化测试，需要首先定位到网页上的元素，然后才能对其进行操作。元素定位是 WebDriver 中...
使用css 绘制笔记本电脑
09-08
总之，使用CSS绘制笔记本电脑是一个综合运用选择器、定位、盒模型、边框、渐变、阴影和伪元素等技巧的过程。通过熟练掌握这些技术，你可以创造出各种各样的视觉效果，提升网站的用户体验。同时，不断地实践和学习新...
CSS元素定位（学习笔记）
m0_68637281的博客
03-18 812
规定元素的堆叠顺序,取值越大，层级越往上。
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS——前端笔记
qq_48721706的博客
04-21 1640
css前端笔记
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1338
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
CSS定位和元素的隐藏和显示
2302_77099705的博客
04-25 613
以上效果，标准流或者浮动都无法快速实现，此时需要定位来实现。
CSS笔记
m0_73844340的博客
07-22 1020
标签选择器
Web网页开发-CSS定位-笔记
编程在手天下我有的博客
01-03 709
CSS的三种布局 四种定位模式及元素居中的两种情况 嵌套型盒子的外边距合并问题的解决方案
css定位笔记
胖达cd的博客
08-10 959
css定位 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。 定位的值以及对应的属性如下表所示： 值 属性 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 relative 生成相对定位的元素，相对于其正常位...
xpath、css定位元素
aa111234306的博客
05-22 433
从根节点开始的定位路径，以开头。：定位到<html>标签下的<body>标签下的<div>标签。<input>（可直接复制xpath路径）
CSS基础_css_笔记
09-23
在CSS中，我们通过选择器来指定要应用样式的元素。基本的选择器包括： 1. **元素选择器**：通过元素名，如`p`，选择所有`<p>`元素。 2. **类选择器**：使用`.`后跟类名，如`.myClass`，选择具有该类名的元素。 3. *...
css笔记
04-02
1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID选择器（`#myID`）等。 2. **属性**：CSS的属性定义了元素的样式，例如`color`（颜色）、`font-size`（字体大小）、`...
学习CSS基础过程笔记
03-26
学习 CSS 基础过程笔记是前端开发者的必备技能之一，本笔记总结了 CSS 的基础知识点，涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...
PHP 实战：动态更改 CSS 值
Rverdoser的博客
08-21 331
这段代码演示了如何在PHP中动态设置CSS变量的值，并在HTML文档中使用这些变量。它使用CSS自定义属性（也称为CSS变量），然后通过。选择器在文档的任何地方使用它们。这样做可以让你在不修改CSS文件的情况下，根据用户的不同或其他上下文来改变样式。
CSS的table显示值：布局艺术的幕后推手
2402_85758936的博客
08-25 375
CSS（层叠样式表）是构建网页布局的核心技术之一。是CSS中一个强大的属性，它允许元素表现得像HTML表格一样。本文将深入探讨table显示值如何影响元素的布局，包括其子元素如何按照table-row和table-cell的方式进行布局，并提供实际的代码示例来展示其效果。将元素的display属性设置为table会使得该元素表现得像一个HTML表格。它允许我们使用表格的布局特性，但不需要使用实际的标签。
Tailwind CSS的介绍和使用
mq1314520_zhl的博客
08-21 367
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
高亮你的文字：CSS ::selection 伪元素的魔法
最新发布
2401_85342379的博客
08-25 270
伪元素用于设置用户通过鼠标或键盘操作选中的文本的样式。这包括改变选中文本的背景色、文字颜色等。它是一个非常实用的工具，用于增强网页的视觉效果和交互性。
java selenium笔记元素定位
10-18
好的，关于 Java Selenium 元素定位，常用的方法有以下几种： 1. 通过 ID 定位元素： ```java WebElement element = driver.findElement(By.id("elementId")); ``` 2. 通过 Name 定位元素： ```java WebElement element = driver.findElement(By.name("elementName")); ``` 3. 通过 Class Name 定位元素： ```java WebElement element = driver.findElement(By.className("elementClassName")); ``` 4. 通过 Tag Name 定位元素： ```java WebElement element = driver.findElement(By.tagName("elementTagName")); ``` 5. 通过 Link Text 定位元素： ```java WebElement element = driver.findElement(By.linkText("elementLinkText")); ``` 6. 通过 Partial Link Text 定位元素： ```java WebElement element = driver.findElement(By.partialLinkText("elementPartialLinkText")); ``` 7. 通过 CSS Selector 定位元素： ```java WebElement element = driver.findElement(By.cssSelector("elementCssSelector")); ``` 8. 通过 XPath 定位元素： ```java WebElement element = driver.findElement(By.xpath("elementXPath")); ``` 以上是常用的元素定位方法，具体使用哪种方法需要根据实际情况来选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值