CSS和AJAX阶段学习记录

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伪属性,添加双伪元素。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++项目实战之演讲比赛流程管理系统

演讲比赛流程管理系统 1. 演讲比赛程序需求 1.1 比赛规则 学校举行一场演讲比赛,共有12个人参加。比赛共两轮,第一轮为淘汰赛,第二轮为决赛 每名选手都有对应的编号,如 10001 ~ 10012 比赛方式:分组比赛&#xff0…

C语言之指针进阶篇(1)

目录​​​​​​​ 引言 字符指针 指针数组 数组指针 数组指针的定义 &数组名vs数组名 数组指针的使用 一维数组使用 二维数组使用 一维数组传参 二维数组传参 总结 数组参数 一维数组传参 二维数组传参 指针参数 一级指针传参 二级指针传参 引言 今…

【爬虫练习之glidedsky】爬虫-基础1

题目 链接 爬虫的目标很简单,就是拿到想要的数据。 这里有一个网站,里面有一些数字。把这些数字的总和,输入到答案框里面,即可通过本关。 思路 找到调用接口 分析response 代码实现 import re import requestsurl http://www.…

设计模式——桥接模式

引用 桥我们大家都熟悉,顾名思义就是用来将河的两岸联系起来的。而此处的桥是用来将两个独立的结构联系起来,而这两个被联系起来的结构可以独立的变化,所有其他的理解只要建立在这个层面上就会比较容易。 基本介绍 桥接模式(Br…

【数据结构与算法】普里姆算法

普里姆算法 最小生成树 最小生成树,简称MST。 给定一个带权的无向连通图,如何选取一棵生成树,使树上所有边上权的总和为最小,这就叫最小生成树。N 个顶点,一定有 N - 1 条边半酣全部顶点N - 1 条边都在图中举例说明…

CAS 一些隐藏的知识,您了解吗

目录 ConcurrentHashMap 一定是线程安全的吗 CAS 机制的注意事项 使用java 并行流 ,您要留意了 ConcurrentHashMap 在JDK1.8中ConcurrentHashMap 内部使用的是数组加链表加红黑树的结构,通过CASvolatile或synchronized的方式来保证线程安全的,这些原理…

Ubuntu 20.04(服务器版)安装 Anaconda

0、Anaconda介绍 Anaconda是一个开源的Python发行版本,包含了包括Python、Conda、科学计算库等180多个科学包及其依赖项。因此,安装了Anaconda就不用再单独安装CUDA、Python等。 CUDA,在进行深度学习的时候,需要用到GPU&#xf…

Lnton羚通算法算力云平台在环境配置时 OpenCV 无法显示图像是什么原因?

问题&#xff1a; cv2.imshow 显示图像时报错&#xff0c;无法显示图像 0%| | 0/1 [00:00<…

【java】为什么文件上传要转成Base64?

文章目录 1 前言2 multipart/form-data上传3 Base64上传3.1 Base64编码原理3.2 Base64编码的作用 4 总结 1 前言 最近在开发中遇到文件上传采用Base64的方式上传&#xff0c;记得以前刚开始学http上传文件的时候&#xff0c;都是通过content-type为multipart/form-data方式直接…

易服客工作室:Houzez主题 - 超级房地产WordPress主题/网站

Houzez主题是全球流行的房地产经纪人和公司的WordPress主题。 Houzez Theme是专业设计师创造一流设计的超级灵活起点。它具有您的客户&#xff08;房地产经纪人或公司&#xff09;甚至可能做梦也想不到的功能。 网址&#xff1a;Houzez主题 - 超级房地产WordPress主题/网站 - …

Java请求Http接口-hutool的HttpUtil(超详细-附带工具类)

概述 HttpUtil是应对简单场景下Http请求的工具类封装&#xff0c;此工具封装了HttpRequest对象常用操作&#xff0c;可以保证在一个方法之内完成Http请求。 此模块基于JDK的HttpUrlConnection封装完成&#xff0c;完整支持https、代理和文件上传。 导包 <dependency>&…

[保研/考研机试] KY96 Fibonacci 上海交通大学复试上机题 C++实现

题目链接&#xff1a; KY96 Fibonacci https://www.nowcoder.com/share/jump/437195121692000803047 描述 The Fibonacci Numbers{0,1,1,2,3,5,8,13,21,34,55...} are defined by the recurrence: F00 F11 FnFn-1Fn-2,n>2 Write a program to calculate the Fibon…

基于chatgpt动手实现一个ai_translator

动手实现一个ai翻译 前言 最近在极客时间学习《AI 大模型应用开发实战营》&#xff0c;自己一边跟着学一边开发了一个进阶版本的 OpenAI-Translator&#xff0c;在这里简单记录下开发过程和心得体会&#xff0c;供有兴趣的同学参考&#xff1b; ai翻译程序 版本迭代 在学习…

物联网设备的分类和功能阐述

物联网是将各种物理设备和传感器通过互联网进行连接和交互的网络&#xff0c;物联网的核心思想是让各种设备能够通过互联网实现智能化、自动化和远程控制。物联网设备是指连接到物联网中的各种设备&#xff0c;可以通过传感器、处理器、通信模块等技术实现与互联网的连接和数据…

vue3 简易用对话框实现点击头像放大查看

设置头像悬停手势 img:hover{cursor: pointer;}效果&#xff1a; 编写对话框 <el-dialog class"bigAvatar"style"border-radius: 4px;"v-model"deleteDialogVisible"title"查看头像"top"5px"><div><img src&…

大数据Flink学习圣经:一本书实现大数据Flink自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据Flink学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…

SpringBoot部署到腾讯云

SpringBoot部署到腾讯云 此处默认已经申请到腾讯云服务器&#xff0c;因为本人还没有申请域名&#xff0c;所以就直接使用的ip地址 XShell连接到腾讯云 主机中填写腾讯云的公网ip地址 公网ip地址在下图中找到 接下来填写服务器的用户名与密码 一般centOS用户名为root&#xff…

【设计模式】订单状态流传中的状态机与状态模式

文章目录 1. 前言2.状态模式2.1.订单状态流转案例2.1.1.状态枚举定义2.1.2.状态接口与实现2.1.3.状态机2.1.4.测试 2.2.退款状态的拓展2.2.1.代码拓展2.2.2.测试 2.3.小结 3.总结 1. 前言 状态模式一般是用在对象内部的状态流转场景中&#xff0c;用来实现状态机。 什么是状态…

rabbitmq的消息应答

消费者完成一个任务可能需要一段时间&#xff0c;如果其中一个消费者处理一个长的任务并仅只完成 了部分突然它挂掉了&#xff0c;会发生什么情况。RabbitMQ 一旦向消费者传递了一条消息&#xff0c;便立即将该消 息标记为删除。在这种情况下&#xff0c;突然有个消费者挂掉了…

jvm-类加载子系统

1.内存结构概述 类加载子系统负责从文件系统或网络中加载class文件&#xff0c;class文件在文件开头有特定的文件标识 ClassLoader只负责class文件的加载&#xff0c;至于它是否运行&#xff0c;则由Execution Engine决定 加载的类信息存放于一块称为方法区的内存空间&#xff…