CSS和AJAX阶段学习记录

news2025/1/17 15:23:16

1、AJAX的工作原理:

如图所示,工作原理可以分为以下几步:

    网页中发生一个事件(页面加载、按钮点击)

    由 JavaScript 创建 XMLHttpRequest 对象

    XMLHttpRequest 对象向 web 服务器发送请求

    服务器处理该请求

    服务器将响应发送回网页

    由 JavaScript 读取响应

由 JavaScript 执行正确的动作(比如更新页面)

2、AJAX(Asynchronous JavaScript And XML)的作用:

    不刷新页面更新网页

    在页面加载后从服务器请求数据

    在页面加载后从服务器接收数据

    在后台向服务器发送数据

3、CSS的三大特性:层叠性、继承性、优先级。

层叠性:主要用于解决样式冲突的问题,相同的选择器设置相同的样式,此时一个样式会覆盖(层叠)掉另一个冲突的样式。

继承性:子标签会继承父标签的某些样式,如文本颜色和字号。可以用于简化代码,降低CSS样式的复杂性。比如子元素可以继承父元素的样式(text- font- line- color)这些元素开头的属性可以继承。

优先级:同一个元素指定多个选择器,就会有优先级的问题,即权重。选择器相同,执行层叠性,选择不同则根据选择器权重执行。

选择器权重如下:

注意:

  1. 权重有4位数字组成,但并不是二进制的,也不会有进位产生。
  2. 类选择器的权重大于标签选择器,id选择器的权重大于类选择器。
  3. 等级判断从左往右比较,如果相同,则比较下一位。
  4. 继承的权重是0,如果该元素没有直接选中,不论父元素的权重多高,子元素得到的权重都是0.
  5. 可以在一个属性值后面加一个!important,表示优先级最高。

4、网页布局的本质:

网页元素基本都是盒子模型,可以先利用CSS设置好盒子的样式,摆放在相应的位置。最后往盒子里边装内容即可。其本质就是利用CSS摆盒子。

5、盒子模型:

把HTML页面中的布局元素看作一个盒子,装元素的容器,CSS盒子模型本质上是一个盒子,将边框、外边距、内边距和实际内容封装在一起。

边框:border可以设置元素的边框  eg:border: 1px solid red;

相邻盒子的边框合并在一起。border-collapse:表示相邻边框合并在一起。注意边框会影响实际盒子的大小,边框会额外增加盒子的实际大小,因此在测量盒子大小的时候,不测量边框,如果测量的时候包含了边框,需要将width/height减去边框宽度。

内边距:padding属性用于设置内边距,即边框与内容之间的距离。设置好以后,内容与边框间有了距离,添加了内边距,并且影响了盒子的实际大小。

可以简写:

外边距:margin用于设置外边距,即盒子与盒子之间的距离。

让块级盒子水平居中的两个条件:盒子必须指定了宽度以及盒子左右的外边距都设置为了auto.

Margin:0 auto;

外边距合并:使用margin来定义块元素的垂直外边距时,可能会出现外边距的合并。在存在两个嵌套关系的块元素时,父元素有上外边距同时子元素也有上外边距,父元素会塌陷较大的外边距的值。

解决方案如下:

6、清除内外边距:

网页元素很多都带有默认的内外边距,不同的浏览器默认的也不一致,因此需要先清除网页元素的内外边距。

* {

Padding:0;

Margin:0

}

7、圆角边框:

border-radius属性用于设置元素的外边框圆角。

Border-radius:length;

8、盒子阴影:

使用box-shadow来添加阴影。

9、浮动(float):

需要用标准流来将多个盒子水平排成一行。浮动的元素会脱离标准流,成为脱标。浮动的元素不再保留预先的位置,会一行内显示并且元素顶部对齐,具有行内块元素的特性。

标准流:标签按照规定好的默认方式排列。

块级元素会独占一行,从上往下来排列。行内元素会按照顺序,从左到右的顺序来排列,碰到父元素会自动换行。

10、浮动特性:

如果多个盒子都设置了浮动,会按照属性值一行内显示并且顶端对齐排列。若宽度达不到要求,则会另起一行对齐。

任何元素都可以浮动,如果没有对浮动的元素设置宽度,则默认为父亲盒子的宽度,在添加浮动以后,宽度则跟内容的大小来调整。浮动的盒子中间是没有空隙的,默认紧挨在一起的。

11、浮动元素经常与标准流父级元素搭配使用。先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置。如果一个子盒子浮动了,那么其余的子盒子也应该浮动,否则会影响后面的标准流盒子的位置,但是不影响前面的标准流盒子的位置。

12、清除浮动的理由:由于父盒子在很多情况下不方便给高度,会随着放入的子盒子的数量会随时进行调整,此时,如果子盒子设置了浮动,那么父盒子的高度为0,这时会影响后面的标准流盒子的位置。因此需要清除浮动。其本质是清除浮动元素脱离标准流后带来的影响。

清除的方法:额外标签法,给父盒子设置overflow属性或者after伪属性,添加双伪元素。

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

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

相关文章

openpnp - 板子上最小物料封装尺寸的选择

文章目录 openpnp - 板子上最小物料封装尺寸的选择概述END openpnp - 板子上最小物料封装尺寸的选择 概述 现在设备调试完了, 用散料飞达载入物料试了一下. 0402以上贴的贴别准, 贴片流程也稳, 基本不需要手工干预. 0201可以贴, 但是由于底部相机元件视觉识别成功率不是很高…

“Spring管理JavaBean的过程及Bean的生命周期“

目录 引言1.弹簧容器2. Bean的生命周期2.1 配置javaBean2.2. 解析Bean的定义2.3 检查是否需要添加自己的功能2.4 初始化2.5 实现Aware接口2.6 扩展2.7. 销毁 3. 单例模式和原型模式3.1. 单例模式3.2. 原型模式 4. 总结 引言 Spring框架是一个非常流行的Java应用程序框架&#…

Java之抽象类

Java之抽象类 抽象类概念抽象类如何使用抽象类的特性 作者简介: zoro-1,目前大一,正在学习Java,数据结构等 作者主页:zoro-1的主页 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖&#x1f49…

Redis持久化:RDB和AOF机制详解

目录 1.Redis持久化简介 2.RDB持久化 2.1 什么是 RDB 持久化? 2.2 触发方式 2.3 Redis.conf中配置RDB 2.4 RDB 更深入理解 2.5 RDB优缺点 3.AOF持久化 3.1 什么是 AOF 持久化? 3.2 如何实现AOF 3.3 Redis.conf中配置AOF 3.4 深入理解AOF重写 4.RDB和…

Linux命令200例:zip和unzip用于压缩和解压文件(常用)

🏆作者简介,黑夜开发者,全栈领域新星创作者✌。CSDN专家博主,阿里云社区专家博主,2023年6月csdn上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师,项目技术负责人。 &…

案例: 用户消费数据分析--Pandas

1. 数据读入 2. 数据处理–日期处理 3. 用户整体消费趋势分析 4. 用户个体消费分析 4.1 用户消费数量与消费金额关系的散点图 4.2 每位用户消费金额分布 4.2.1 消费金额贡献度折线图 用户贡献度折线图 4.2.2 消费金额占比前80%的客户,消费分布直方图 4.3 消费时…

【管理运筹学】第 5 章 | 整数规划 (2,割平面法及 0-1 变量的特性)

文章目录 引言三、割平面法四、0-1 型整数规划4.1 0-1 变量的特性4.1.1 投资问题4.1.2 约束条件满足个数问题 写在最后 引言 前文我们介绍了整数规划的一种求解方法——分支定界法,可以求解纯整数和混合整数规划问题。现在我们来学习另一种整数规划求解方法——割平…

【Java 动态数据统计图】动态数据统计思路案例(动态,排序,containsKey)五(117)

需求:前端根据后端的返回数据:画统计图; 1.动态获取地域数据以及数据中的平均值,按照平均值降序排序; 说明: X轴是动态的,有对应区域数据则展示; X轴 区域数据降序排序;…

CloudQuery:更好地管理你的 OceanBase 数据库

前言:作为 OceanBase 的生态合作伙伴,CloudQuery(简称“CQ”) 最新发布的社区版 2.2.0 新增了 OceanBase 数据库,为企业使用 OceanBase 数据库提供全面的支持。包括连接与认证、查询与分析、数据安全与权限管理&#x…

同伦问题与同伦算法

同伦问题 据我所知,这篇博客是CSDN上少数几篇讲同伦算法的博客之一考虑同伦算法的目的 扩大初值选取范围解决非线性代数方程组的全部解计算问题 同伦算法中的基本概念 考虑求的解人为地引入参数t,构造一个函数族使得 同时假设的解已知,从出发可以求解对…

Matplotlib数据可视化(三)

目录 1.绘图的填充 1.1 曲线下方区域的填充 1.2 填充部分区域 1.3 两条曲线之间的区域填充 1.4 直接使用fill进行填充 1.绘图的填充 绘图的填充可以调用fill_between()或fill()进行填充。 1.1 曲线下方区域的填充 x np.linspace(0,1,500) y np.sin(3*np.pi*x)*np.exp…

Python功能制作之3D方块

介绍 用python写一个黑窗口,窗口里面有一个白色的3D方块,左键按下后移动可以旋转以各个视角来看方块。 当然有需要的话,可以自己在代码中去更改颜色,直接通过RBG的参数进行更改即可。 做了两个函数:init[初始化]和d…

坦克大战-kotlin

坦克大战 游戏需求👇核心玩法👇👇界面原型👇👇成品演示👇 游戏开发1.代码实现 源码下载 专栏简介 💒个人主页 📰专栏目录 点击上方查看更多内容 📖心灵鸡汤&#x1…

<CodeGeeX>基于大模型的全能AI编程助手

CodeGeex官网 智谱AI官网 CodeGeex是由清华大学 KEG 实验室和智谱 AI 公司于2023共同训练的代码生成模型 CodeGeeX 开发的AI助手。它基于深度学习技术,能够针对用户的问题和要求提供适当的答复和支持。CodeGeex的功能包括代码生成、自动添加注释、代码翻译以及智能问…

Unity制作一个简单的登入注册页面

1.创建Canvas组件 首先我们创建一个Canvas画布,我们再在Canvas画布底下创建一个空物体,取名为Resgister。把空物体的锚点设置为全屏撑开。 2.我们在Resgister空物体底下创建一个Image组件,改名为bg。我们也把它 的锚点设置为全屏撑开状态。接…

看完这篇文章,被这个学习技巧狠狠吸引了!

思政课程的学习不仅仅是课堂知识的传授,更是培养学生全面发展和积极参与社会的能力的过程。学生应该认真学习思政课程,积极思考,结合自己的实际情况,形成独立的思考和判断。 通过思政通学习小程序的多样化知识,学生可以…

剑指Offer37.序列化二叉树 C++

1、题目描述 请实现两个函数,分别用来序列化和反序列化二叉树。你需要设计一个算法来实现二叉树的序列化与反序列化。这里不限定你的序列 / 反序列化算法执行逻辑,你只需要保证一个二叉树可以被序列化为一个字符串并且将这个字符串反序列化为原始的树结…

利用css动画和定时器setTimeout,实现上传图片进度条

思路 利用css动画和js定时器&#xff08;setTimeout&#xff09;&#xff0c;实现简单的进度条。 优势 不使用 setInterval&#xff0c;减少js代码量&#xff0c;业务代码更加简洁。 示意图 上传中上传成功上传失败 代码 html <!-- img-wrap有两种状态&#xff1a;u…

【O2O领域】Axure外卖订餐骑手端APP原型图,外卖配送原型设计图

作品概况 页面数量&#xff1a;共 110 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;外卖配送、生鲜配送 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本品为外卖订餐骑手端APP原型设计图&#x…

以太网(一):PoE供电

一、定义&#xff1a; PoE系统包括供电端设备&#xff08;PSE&#xff09;和受电端设备&#xff08;PD&#xff09;两部分PoE&#xff08;Power over Ethernet&#xff09;&#xff1a;​是一种可以在以太网中透过双绞线来传输电力与数据到设备上的技术PSE&#xff08;Power S…