CSS定位布局流和网络请求引入

布局，定位
1标准流
1.1HTML标签分类：
块级标签（独占一行，可以设置宽高）
行级标签（不独占一行，不能设置宽高）
1.2按照标准流进行排列，块级标签从上到下，行级标签从左到右。

display：
inline（行级）
block（块级）
inline-block（行内块级，能够设置宽高）
none（隐藏，不占空间）
2举例：
2.1针对行级标签,可以通过display改变成块级显示：
Span 设置display为block或inline-block

2.2 针对块级标签，可以修改成行级显示

3 浮动流
float
设置float属性能让标签向左或向右进行浮动，脱离标准流，则标准流中的标签会相应顶上去。
不分块级还是行级都可以设置宽高。
clear：
left right both
能让标签在浮动的过程中不紧贴其他标签。只能影响自己，不影响其他标签。

自己测试span行级标签。

4 定位流
position
4.1 相对定位
relative，结合top right bottom left四个属性确定位置
不会脱离标准流，相对于在标准流的位置进行偏移，所以下面的标签不会顶上来。
4.2 绝对定位
absolute
会脱离标准流，下面标签会顶上来
如果父标签没有定位流（相对，绝对，固定），则绝对定位相对于body标签。
如果父标签有定位流，则绝对定位相对于父标签（就近原则）

绝对定位不分行级或块级，都可以设置宽高。

注意：一般定位准则：“子绝父相”
4.3 固定定位
脱离标准流
Fixed 结合top right bottom left
不区分行级或块级
与绝对相同，唯一不同的是不会随着滚动条的滚动而滚动。常见于网页的广告。

PM:
1 B/S
2 HTTP
3 网络术语：域名，ip，端口号，DNS。。。
4 Servlet技术 form

1 C/S B/S 架构
软件
C/S Client/Server 客户端-服务器 LOL QQ 迅雷等 .exe 安装到本地
B/S Brower/Server 浏览器-服务器大型系统电商类等网站百度，淘宝，京东

外包爱峰科技
软件，一体系一套：
网站，app（android，ios）前端（客户端）
服务器server 后端

2 Server （服务员）
2.1服务器：一台运行服务器软件的电脑。
比如LOL服务器：集群（多台服务器）在腾讯只运行lol服务器软件的一群电脑。

2.2 服务器电脑要求配置非常高 CPU多又强内存够大硬盘够大
2.3 全年无休假刀片机便于存放要求室温地下山里海底
2.4 不需要显示器。只运行服务器软件。
2.5 服务器多为Linux系统 linux命令操作。
将来我们需要将开发的管理系统（网站）部署到linux（Tomcat）系统上。
2.6 对于小型的公司，为了减少服务器的成本，所以采用租服务器空间，比如租用阿里云，腾讯云等云空间。
2.7 服务器软件：
Tomcat web应用服务器—HTTP
Mysql 提供db服务 ---- SQL

3 HTTP 网络协议 TCP/IP FTP
Hypertext Transfer Protocal
超文本传输协议

协议：约定规范

Web应用使用的协议。一般访问网站使用到这个协议，比如访问百度，网址：
https://www.baidu.com/

HTTPS:在HTTP基础之上，增加了SSL（Security Socket Layer）
Secure 安全

3.1组成
3.1.1 请求 request
3.1.2 响应 response

3.2过程

3.3 包含
抓包 Charles（花瓶）
Chrome 自带开发者工具

请求：
请求头 request headers
请求行 request line
请求数据 request body

上图中1代表请求行,组成：
GET / HTTP/1.1
GET 请求方法常用的GET/POST
/ 相当于请求/index.html
HTTP/1.1 HTTP协议版本

上图中2代表请求头：
请求时附带的附属信息

请求数据：如果POST请求，可以发送请求时，封装数据。比如浏览器需要将用户名和密码发送给服务器，则需要将用户名和密码封装成请求数据。
这里我们访问百度服务器，只是想获得百度首页，并不需要发送给百度什么，所以无需封装请求数据。

响应：
响应头 response headers
响应行 response line
响应数据 response body

响应行：
HTTP/1.1 200 OK
HTTP/1.1 协议版本
200 状态码 404
Ok 状态码描述
响应头：
响应的附属信息

响应数据：
百度返回给浏览器的html文件内容。

响应状态码：
1xx 消息
2xx 成功 200
3xx 重定向
4xx 客户端错误请求错误 404
5xx 服务器错误

4 ip 地址
一台设备在网络中的身份证号
局域网：192.168.x.x

由路由器分配动态分配
Ipv4—ipv6（世界上每一粒沙子拥有ip地址）

获得百度网址对应的服务器ip地址，使用ping命令

5域名 domain name
baidu.com
tecent.com
因为比ip好记，一个域名对应多个ip地址。
.cn .net .org .edu
普通用户还可以注册域名(找域名提供商)，将来倒卖。mi.com

6 DNS
Domain name System
域名解析器把域名解析成ip地址

常用DNS：
8.8.8.8 Google
114.114.114.114 国内三大运营商

7 端口号 port 唯一识别服务
3306 mysql服务
8080 web服务

端口是通过端口号来标记的，端口号只有整数，范围是从0 到65535。

8 URL Uniform Resource Locator 统一资源定位符俗称网址链接
jdbc:mysql://localhost:3306/laosun
https://www.baidu.com/index.html
ftp：//ssss
协议://域名ip:端口号

localhost 本地域名
127.0.0.1

CSS定位布局流和网络请求引入相关推荐

一、CSS定位布局[相对定位、绝对定位、固定定位]
一.CSS定位布局选项说明 static 默认形为,属于文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 1.relative 解释:元素在原来的位置开始移动( ...
学习笔记~1.3 CSS 定位布局
1.3 CSS 定位布局笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS.写博客主要是为了加深记忆,以及把自己所学分享.本博客的内容主要为学习笔记,由于自学,其中 ...
兼容微信小程序的流式网络请求库
本项目从属于笔者的Web开发入门与最佳实践之前端开源项目系列.如果对于HTTP协议与规范尚不掌握的建议阅读HTTP 基础与变迁一文.如果对于REST尚不掌握的推荐阅读来自微软的接口设计指南以及来自于P ...
CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
css位置布局,CSS定位布局相关
本文档包括CSS的样式定位框模型如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动.当文档滚动到超过图像的位置时,图像就会消失. 您可以通过 background-p_w_upload ...
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
HTMLCSS Day06 CSS定位布局
文章目录 1.定位布局 - 1.1.静态定位( Static positioning) - 1.2.什么是相对定位?( Relative positioning ) - 相对定位注意点 - 相对定位应 ...
CSS 定位布局 - 相对、绝对、固定三种定位
仅供学习,转载请注明出处文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的 ...
CSS - 弹性布局（flex）
目录传统布局的不足之处:导航栏实现案例说明问题关于单个.一行多个浮动元素的水平居中实现弹性布局弹性容器的主轴和侧轴概念弹性容器的主轴对齐&侧轴对齐(一维布局特性说明) 主轴flexi ...

CSS定位布局流和网络请求引入

CSS定位布局流和网络请求引入相关推荐

最新文章

热门文章