Web网页开发-CSS定位-笔记

一、CSS的三种布局
(1) 标准流
块级元素:一行一个
行内元素:一行多个,margin上下无效
行内块元素:一行多个
(2) 浮动
让元素同处一行
(3) 定位
让元素在浏览器中任何位置,并且覆盖住其他元素,能够固定死在浏览器上的某个位置,不随滚动条滚动
对于定位的元素,默认堆叠值为0,z-index:数值越大越靠上
边偏移:决定了元素的位置,top: 表示与上面的距离,bottom: 表示与下面距离,left: 表示与左边距离,right: 表示与右边距离

二、四种定位模式及元素居中的两种情况
(1) 静态定位static: 没有任何作用,仍然保持标准流
(2) 绝对定位absolute: 可以定位浏览器的任何位置
      位置取决与有定位的父盒子,原来的位置不再保留,后面元素会自动补位,自动转成行内块
      当父盒子有定位时:子盒子在父盒子内移动[子绝父相]
      当父盒子没有定位时,子盒子在浏览器内移动
(3) 相对定位relative:相对于原来的位置进行移动,原来的位置仍然保留
(4) 固定定位fixed:固定浏览器的某个位置,自动转成行内块,只认浏览器,不随滚动条滚动

浮动、绝对定位、固定定位:都不在占据原来的位置,后面的元素自动补位,自动转成行内块
float: left;
position: absolute;
position: fixed;

元素居中的两种情况:

1.设置绝对定位或者固定定位的元素水平居中
   left: 50%;
   margin-left:负的盒子宽度的一半;
2.设置绝对定位或者固定定位的元素垂直居中
   top:50%;
   margin-top: 负的盒子宽度的一半;

三、嵌套型盒子的外边距合并问题的解决方案
1.给父盒子添加overflow:hidden属性
2.给父盒子边框border、内边距padding
3.设置子盒子浮动
4.设置子盒子绝对定位或固定定位

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/602341.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++面对对象编程进阶(1)

面对对象编程进阶(1) 1.初始化列表2.类的继承3.深挖公有、私有及保护4.友元类5.类指针 1.初始化列表 C中类的初始化列表应用于构造函数初始化类的成员变量。其具体应用方法为: class Student {public:int age;string name;Student():age(0)…

G4周:CGAN,手势生成

本文为🔗365天深度学习训练营 中的学习记录博客 原作者:K同学啊|接辅导、项目定制 我的环境: 1.语言:python3.7 2.编译器:pycharm 3.深度学习框架Pytorch 1.8.0cu111 一、CGAN介绍 条件生成对抗网络(…

Crow:路由局部插件1 设置插件

Crow:Middlewares的使用-CSDN博客 介绍了Crow中关于插件的使用,其实除了这种通用插件外,Crow还提供了为个别路由使用的局部插件。 先看例子: //examples/example_middleware.cpp struct SecretContentGuard : crow::ILocalMiddleware {struct context{};void before_hand…

Qt基础-属性系统详解

目录 一、定义 二、属性的使用 三、类的附加信息 四、实例演示 一、定义 Qt提供了一个Q_PROPERTY(

Visio导出eps格式图片

Visio导出eps格式图片 文章目录 Visio导出eps格式图片1. Visio中使用Adobe Acrobat虚拟打印2. Adobe Acrobat中裁剪并另存为eps格式 如何使用Visio绘图然后导出.eps格式的图片呢?这个过程需要用到Adobe Acrobat,使用Adobe Acrobat的虚拟打印功能&#xf…

ssm基于JAVA的驾校信息管理系统设计论文

摘 要 信息数据从传统到当代,是一直在变革当中,突如其来的互联网让传统的信息管理看到了革命性的曙光,因为传统信息管理从时效性,还是安全性,还是可操作性等各个方面来讲,遇到了互联网时代才发现能补上自古…

马克思主义基本原理笔记

马克思主义哲学、政治经济学、科学社会主义理论 哲学 马克思主义中国化的理论成果:毛泽东思想、邓小平理论、三个代表重要思想、科学发展观 物质和意识哪个是本原,是哲学的基本问题 辩证法认为世界上的事物都是相互联系的、运动发展的,形…

Docker:docker exec命令简介

介绍 docker exec [OPTIONS] 容器名称 COMMAND [ARG...] OPTIONS说明: -d,以后台方式执行命令; -e,设置环境变量 -i,交互模式 -t,设置TTY -u,用户名或UID,例如myuser:myu…

Java HashMap 面试题(一)

HashMap 面试题(一) 文章目录 HashMap 面试题(一)3.3 面试题-说一下HashMap的实现原理?面试题-HashMap的put方法的具体流程hashMap常见属性源码分析 3.3 面试题-说一下HashMap的实现原理? HashMap的数据结…

篇三:让OAuth2 server支持密码模式

由于Spring-Security-Oauth2停止维护&#xff0c;官方推荐采用 spring-security-oauth2-authorization-server&#xff0c;而后者默认不支持密码授权模式&#xff0c;本篇实战中采用的版本如下&#xff1a; <dependency><groupId>org.springframework.security<…

84. 柱状图中最大的矩形 -- 单调栈

84. 柱状图中最大的矩形 class LargestRectangleArea:"""时间复杂度&#xff1a;O(N)空间复杂度&#xff1a;O(N)84. 柱状图中最大的矩形https://leetcode.cn/problems/largest-rectangle-in-histogram/description/"""def solution(self, heigh…

1-02VS的安装与测试

一、概述 对于一名C语言程序员而言&#xff0c;进行C语言程序的开发一般需要一个文本编辑器加上一个编译器就足够了。但为了方便起见&#xff0c;我们选择使用集成开发环境——Visual Studio&#xff08;简称VS&#xff09;。安装Visual Studio 下面讲一下如何安装VS&#xff0…

【AI视野·今日Sound 声学论文速览 第三十八期】Mon, 1 Jan 2024

AI视野今日CS.Sound 声学论文速览 Mon, 1 Jan 2024 Totally 5 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers The Arrow of Time in Music -- Revisiting the Temporal Structure of Music with Distinguishability and Unique Orientability as the …

金和OA C6 MailTemplates.aspx SQL注入漏洞复现

0x01 产品简介 金和OA协同办公管理系统软件(简称金和OA),本着简单、适用、高效的原则,贴合企事业单位的实际需求,实行通用化、标准化、智能化、人性化的产品设计,充分体现企事业单位规范管理、提高办公效率的核心思想,为用户提供一整套标准的办公自动化解决方案,以帮助…

【DevOps-07-3】Jenkins集成Sonarqube

一、简要说明 Jenkins安装Sonarqube插件Jenkins安装和配置Sonar-Scanner信息Jenkins打包项目中,增加Sonar-Scanner代码质量扫描二、Jenkins安装Sonarqube插件 1、登录Jenkins管理后台,搜索安装Sonar-Scanner插件 Jenkins管理后台示例:http://192.168.95.131:8080/jenkins/

Oracle数据库新手零基础入门,Oracle安装配置和操作使用详解

一、教程描述 本套教程是专门为初学者量身定制的&#xff0c;无需任何Oracle数据库基础&#xff0c;课程采用循序渐进的教学方式&#xff0c;从Oracle数据库的基础知识开始讲起&#xff0c;并不会直接涉及到一项具体的技术&#xff0c;而是随着课程的不断深入&#xff0c;一些…

docker部署mysql主从复制篇

环境准备&#xff1a;docker服务安装&#xff0c;mysql镜像 配置文件方式&#xff1a;可以挂载目录&#xff0c;也可以写好配置文件&#xff0c;利用docker cp 到容器内&#xff0c;这里直接在启动镜像创建容器时候挂载目录方式服务器上配置文件内容(下图标红路径)&#xff1a…

WEB 3D技术 three.js 顶点缩放

本文 我们来说 顶点缩放 我们官网搜索 BufferGeometry 下面有一个 scale 函数 例如 我们先将代码写成这样 上面图片和资源文件 大家需要自己去加一下 import ./style.css import * as THREE from "three"; import { OrbitControls } from "three/examples/j…

Maven的心脏:深入解析settings.xml配置文件

Maven作为Java世界中最著名的构建工具之一&#xff0c;其灵魂所在无疑是那些配置文件。在这些配置文件中&#xff0c;settings.xml扮演着至关重要的角色。今天&#xff0c;我们就来深入剖析这个Maven的心脏部件&#xff0c;看看它如何为我们的项目搏动生命。 一、Maven settin…

分布式事务相关问题及答案(2024)

1、什么是分布式事务&#xff0c;它与单机事务有何区别&#xff1f; 分布式事务是一种跨多个网络分布的计算机节点和资源管理系统的事务。它确保了即便在不同的物理和逻辑分区中&#xff0c;这些操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而保持了事务的原子性。…