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

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

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

相关文章

音视频技术开发周刊 | 307

每周一期,纵览音视频技术领域的干货。 新闻投稿:contributelivevideostack.com。 “视象新生”火山引擎视频云&AIGC技术大会邀你踏入新“视界” 8月22日,火山引擎视频云&AIGC技术大会即将开启!本次大会以“视象新生”为主…

第 359 场 LeetCode 周赛题解

A 判别首字母缩略词 签到题… class Solution { public:bool isAcronym(vector<string> &words, string s) {string pf;for (auto &s: words)pf.push_back(s[0]);return pf s;} };B k-avoiding 数组的最小总和 贪心&#xff1a;从 1 1 1开始升序枚举&#xff0c…

第七次作业 运维高级 docker容器进级版

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 (1)拉取相应镜像 docker pull mysq:5.6 docker pull owncloud:latest(2)运行mysql&#xff1a;5.6容器 docker run --name mysql -e MYSQL_ROOT_PASSWORD12345 -d mysql:5.6(3)运行owncloud容器 docker run…

如何安装指定版本node.js,安装旧版本node

1、查看当前是否安装node&#xff0c;如果安装了需要先卸载当前版本node 搜索控制面板 -> 找到程序/卸载程序 -> 在里面找到node -> 然后右击卸载 2、卸载完成后就要安装其他版本得node.js 找到想要安装的对应版本&#xff0c;安装.msi格式的安装包 注&#xff…

华为云开发工具CodeArts IDE for C/C++ 开发使用指南

简介 CodeArts IDE是一个集成开发环境&#xff08;IDE&#xff09;&#xff0c;它提供了开发语言和调试服务。本文主要介绍CodeArts IDE for C/C的基本功能。 1.下载安装 CodeArts IDE for C/C 已开放公测&#xff0c;下载获取免费体验 2.新建C/C工程 CodeArts IDE for C/…

AUTOSAR规范与ECU软件开发(实践篇)5.1 ETAS ISOLAR-A工具简介

前言 如前所述, 开发者可以先在系统级设计工具ISOLAR-A中设计软件组件框架, 包括端口接口、 端口等, 即创建各软件组件arxml描述性文件; 再将这些软件组件描述性文件导入到行为建模工具, 如Matlab/Simulink中完成内部行为建模。 亦可以先在行为建模工具中完成逻辑建模, 再…

分布式核心知识

文章目录 前言一、分布式中的远程调用1.1RESTful接口1.2RPC协议1.3区别与联系 二、分布式中的CAP原理 前言 关于分布式核心知识详解 一、分布式中的远程调用 在微服务架构中&#xff0c;通常存在多个服务之间的远程调用的需求。远程调用通常包含两个部分&#xff1a;序列化和通…

JVM详解

文章目录 一、JVM 执行流程二、类加载三、双亲委派模型四、垃圾回收机制&#xff08;GC&#xff09; 一、JVM 执行流程 程序在执行之前先要把java代码转换成字节码&#xff08;class文件&#xff09;&#xff0c;JVM 首先需要把字节码通过一定的方式 类加载器&#xff08;Clas…

Python“牵手”拼多多商品评论数据采集方法,拼多多API申请步骤说明

拼多多平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c;拼多多API接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问拼多多平台的数据&#xff0c;包括商品信息、店铺信息、物流信息&#xff0c;评论数据等&a…

推荐一款好用的开源视频播放器(免费无广告)

mpv是一个自由开源的媒体播放器&#xff0c;它支持多种音频和视频格式&#xff0c;并且具有高度可定制性。mpv的设计理念是简洁、高效和功能强大。 软件特点&#xff1a; 1. 开源、跨平台。可以在Windows\Linux\MacOS\BSD等系统上使用&#xff0c;完全免费无广告。Windows版解压…

[语音识别] 基于Python构建简易的音频录制与语音识别应用

语音识别技术的快速发展为实现更多智能化应用提供了无限可能。本文旨在介绍一个基于Python实现的简易音频录制与语音识别应用。文章简要介绍相关技术的应用&#xff0c;重点放在音频录制方面&#xff0c;而语音识别则关注于调用相关的语音识别库。本文将首先概述一些音频基础概…

Unity Android 之 使用 HanLP 进行句子段落的分词处理(包括词的属性处理)的简单整理

Unity Android 之 使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 目录 Unity Android 之 使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 一、简单介绍 二、实现原理 三、注意事项 四、效…

Git+Gitee使用分享

GitGitee快速入门 创建仓库 ​ ​ ​ 初始化本地仓库 验证本地git是否安装好 打开cmd窗口&#xff0c;输入git ​ 这样就OK。 Git 全局设置:(只需要设置一次) 这台电脑如果是第一次使用git&#xff0c;就需要这样初始化一下&#xff0c;这样才知道是谁提交到仓库了。 git confi…

贝锐蒲公英助力建设工程咨询企业,高效安全远程访问数据档案库

随着数字信息化进程的加深&#xff0c;数字化转型已成为企业实现业务流程自动化、提高工作效率、降低成本和提高用户满意度的重要手段。其中&#xff0c;档案工作的标准化、规范化是信息化建设的前提和必要条件&#xff0c;对于建设工程咨询企业而言&#xff0c;一个完善的数字…

服务器感染了.360勒索病毒,如何确保数据文件完整恢复?

引言&#xff1a; 随着科技的不断进步&#xff0c;互联网的普及以及数字化生活的发展&#xff0c;网络安全问题也逐渐成为一个全球性的难题。其中&#xff0c;勒索病毒作为一种危害性极高的恶意软件&#xff0c;在近年来频频袭扰用户。本文91数据恢复将重点介绍 360 勒索病毒&a…

使用vscode编写插件-php语言

https://blog.csdn.net/qq_45701130/article/details/125206645 一、环境搭建 1、安装 Visual Studio Code 2、安装 Node.js 3、安装 Git 4、安装生产插件代码的工具&#xff1a;npm install -g yo generator-code 二、创建工程 yo code 选择项解释&#xff1a; 选择编写扩…

js中的正则表达式(一)

目录 1.什么是正则表达式 2.正则表达式在JavaScript中的使用场景: 3.正则表达式的语法&#xff1a; 1.什么是正则表达式 正则表达式(Regular Expression&#xff09;是用于匹配字符串中字符组合的模式。在JavaScript中&#xff0c;正则表达式也是对象通常用来查找、替换那些符…

YOLOX在启智AI GPU/CPU平台部署笔记

文章目录 1. 概述2. 部署2.1 拉取YOLOX源码2.2 拉取模型文件yolox_s.pth2.3 安装依赖包2.4 安装yolox2.5 测试运行2.6 运行报错处理2.6.1 ImportError: libGL.so.1: cannot open shared object file: No such file or directory2.6.2 ImportError: libgthread-2.0.so.0: cannot…

MySQL 字符集概念、原理及如何配置 — 图文详解

目录 一、字符集概念 1、字符&#xff08;Character&#xff09; 2、字符编码 3、字符集&#xff08;Character set&#xff09; 二、字符集原理 1. ASCII字符集 2、GB2312 3、GBK 4、GB18030 5、BIG5 6、Unicode 编码 三、字符序 四、MySQL字符集 & 字符序 …