文档流

补充和拓展

隐身守侯 提交于 2019-11-27 03:09:10
1.补充 margin的margin:0 auto;会解决元素的居中 2.CSS层叠的问题 CSS有两个性质   1.继承性   2.层叠性 选择器的是一种选择能力     A,选不中,走继承性(font-color text)继承性的权重性的权重是       a),有多个父级都设置了这样的样式,走就近原则     B,选中       a),权重的问题,权重大,就选谁的样式       b),权重相同,谁在后选谁       c),纯标签和类没有可比性,纯类和id也没有可比性   3.标准文档流   浏览器的排版是根据元素的特征(块和行级),从上到下,从左到右排版,这就是标准文档浏 只要加了float,这个元素就会脱离文档流 第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把它排在第一位,有第一个依然存在。 行级元素加了float,脱离标准流,块不像块,行不像行,能设置宽高,并能排列。Display就会没有任何意义 B,浮动的元素会文字环绕(文字环绕图片一周) 拓展:使元素脱离标准流的方法 C,浮动的元素会紧紧贴靠在一起 a).权重的问题,权重大,就选谁的样式 b).权重相同,谁在后选谁 c).纯标签和类没有可比性,纯类喝id也没有可比性 3.标准文档流 浏览器的排版是根据元素的特征(块和行级),从上到下,从左到右排版

005 (H5*) CSS三大重点之三:定位

南楼画角 提交于 2019-11-27 02:48:55
目录 1:定位模式和边偏移 2:定位模式   静态定位   相对定位: 移动位置:脱标、占位置   绝对定位: 脱标、不占有位置、   拼爹型   子绝父相   固定定位:脱标、占有位置、 3: 定位模式转换 3:z-index 前言 理论 一:元素的定位属性 1:元素的定位属性主要包括定位模式和边偏移两部分。 1.1: 边偏移 | 边偏移属性 | 描述 | | ------ | ----------------------- | | top | 顶端偏移量,定义元素相对于其父元素上边线的距离 | | bottom | 底部偏移量,定义元素相对于其父元素下边线的距离 | | left | 左侧偏移量,定义元素相对于其父元素左边线的距离 | | right | 右侧偏移量,定义元素相对于其父元素右边线的距离 | 2:position属性的常用值 | 值 | 描述 | | -------- | ------------------------ | | static | 自动定位(默认定位方式) | | relative | 相对定位,相对于其原文档流的位置进行定位 | | absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 | | fixed | 固定定位,相对于浏览器窗口进行定位 | 二:静态定位(static) 静态定位是所有元素的默认定位方式

Html定位那些事

情到浓时终转凉″ 提交于 2019-11-27 02:41:50
css定位那些事 1.0css position属性 1.1**static ** 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。 1.2 relative 通俗易懂:参照物为原来的自己 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 1.3**absolute ** 通俗易懂:参照物为父级元素 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 1.4 fixed 通俗易懂:参照物为浏览器窗口 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。 2.0 css相对定位 如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。 #box_relative { position : relative ; left : 30px ; top : 20px ; } 绝对定位 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭

总结CSS基础知识【复习之一】

佐手、 提交于 2019-11-27 01:38:32
知识解析: CSS规定的定位机制有三种: 分别是 标准流、浮动及绝对定位。 W3C标准: 结构化标准语言(HTML和XML)、表现标准语言(CSS)、行为标准语言(DOM和ECMAScript)       倡导结构、样式、行为分离 CSS中,存在3种的定位机制 :标准文档流(Normal flow)、浮动(float)、绝对定位(absolute positioning) 标准文档流 特点: 从上到下,从左至右,输出文档内容    由块元素和行元素组成 块级元素 特点: 从左到右撑满页面,独占一行    触碰到页面边缘时,会自动换行    即块级标签,如div、ul、li、dl、dt、p... 行级元素 特点: 能在同一行内显示 不会改变HTML文档结构 如:span、strong、img、input... 块元素和行级元素都是盒子模型 盒子模型是四种组成: boder+padding+margin+width等于盒子模型尺寸 自动居中——列布局 三个技能点: 标准文档流、块级元素、margin属性 margin:0 auto auto根据浏览器宽度自动设置两边的外边距 原理:(浏览器的宽度-外包含层的宽度)/2=外边距 如果想让你页面自动居中,当设置margin属性为auto的时候,不能再设置浮动或者绝对定位属性。 CSS中规定的第二种定位机制: 能够实现横向多列布局

Css

二次信任 提交于 2019-11-26 22:31:27
/*--> */ /*--> */ css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。 一 css的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。 <p style="background-color: rebeccapurple">hello yuan</p> 2.嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下: <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3 链接式 将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式 将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下: <style type="text/css"> @import"mystyle.css

浮动与定位

六月ゝ 毕业季﹏ 提交于 2019-11-26 18:22:59
<浮动总结: 1.浮动的元素脱离文档流。 2.浮动的元素不能覆盖内联元素。 3.后面的浮动元素不能覆盖前面的元素。如果前面元素不是块级元素会被后面的浮动元素会上移,导致元素向旁边移动。 内联元素:没有width和height,不能设置margin-top和margin-buttom。 内联块级元素:有width和height,可以设置margin 块级元素:有width和height,可以设置margin <定位总结: z-index属性:必须和定位一起用。 相对定位:relative相对于原来的位子进行移动(元素是普通文档流) 绝对定位:absolute相对于最近的以定位的父级元素或最初包含块进行移动(元素脱离普通文档流) 固定定位:fix相对于浏览器边框进行移动(元素脱离普通文档流) BFC:block formatting context(块级格式化上下文) overflow:hidden会触发bfc ①子级margin-top把父级往下带 ②子级浮动会导致父级塌陷 ③子级超出父级影响其他元素 来源: http://www.cnblogs.com/tangchuan/p/6792946.html

【CSS属性#2】 -- 2019-08-08 17:58:03

夙愿已清 提交于 2019-11-26 13:49:41
原文: http://106.13.73.98/__/30/ 目录 一、盒子模型 二、外边距 margin 三、内填充 padding 四、浮动 float 五、清除浮动 clear 六、溢出 overflow 七、定位 position 1. 无定位 static 2. 相对定位 relative 3. 绝对定位 absolute 4. 固定 fixed 八、 层叠顺序 z-index 九、透明度 opacit 一、盒子模型 margin :用于控制元素与元素之间的距离;最基本的用途就是控制元素周围空间的间隔,从视觉上达到相互隔开的目的 padding :用于控制内容与边距之间的距离 Border :边框,围绕在内边距和内容外的边框 Content :盒子的内容,显示文本和图像 ![在这里插入图片描述](http://106.13.73.98/media/ai/2019-03/3820234e-236e-4ff2-af57-94cab2575a05.png) 二、外边距 margin 属性 描述 margin-top 上方外边距 margin-right 右方外边距 margin-bottom 下方外边距 margin-left 左方外边距 简写: ![在这里插入图片描述](http://106.13.73.98/media/ai/2019-03/a92c753d-e79f

HTML CSS整理笔记(三)

早过忘川 提交于 2019-11-26 07:36:09
今天跟小常来给大家继续说一下HTML CSS整理笔记吧! 一起来跟我继续学习复习下吧,一起加油吧! 小常说一下: 命运要你成长的时候,总会安排一些让你不顺心的人或事刺激你.这是规律. 今天让我们从定位网页元素来继续说起!一起来看一下吧! ————8 定位网页元素———— 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置。 (1)static 默认无定位,元素按照标准文档布局。 (2)relative相对定位 a.特性: 1.以标准文档流排版为基础,相当于它在原来位置偏移指定的距离。 2.元素位置偏移后,仍会保留原位置。 3.层级提高,可以遮盖标准文档流元素和浮动元素。 b.使用场景: 相对定位可以不设偏移量,让后面的绝对定位以它为祖先元素作基准定位。 c.语法 position:relative,指定偏移量时:水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如 div{ position: relative; top:-20px; left:20px; } (3)absolute绝对定位 a.特性: 1.以已定位的祖先元素作基准定位,如果没有定位的祖先元素,则以浏览器窗口为基准定位。 2.元素位置偏移后,不保留原位置(其他元素可以用它原来的空位) 3.层级提高,可以遮盖标准文档流元素和浮动元素。

知识积累

陌路散爱 提交于 2019-11-26 02:48:00
互联网两年多的思考,希望能和各位探讨。 http请求应该首先打在堡垒主机的Nginx(运行docker拉取的镜像,还需要指定挂载的配置文件,容器运行时会读取这些配置文件,就像是JAVA类中属性设置初始值,方法调用时可以访问该属性)上然后基于某种随机轮询或客户端地址hash的方式请求落在springboot内置的tomcat上面(在这个过程中优先执行过滤器的一些操作),提供该web服务应该是运行的jar或者war包.web服务将注入eureka注册中心提供的来自各分布式节点提供的微服务。如果是dubbo则使用zk注册中心提供的来自各分布式节点提供的微服务。控制层一般作为服务消费者调用注册中心的服务,响应页面过来的请求,服务提供者一般是连接了数据库的jar包。 前后端数据交互使用http请求做json数据交互基本足够了,一些文档流类型的传输可以使用mongodb提供副本集群上传下载文档流的服务。做分布式缓存使用redis提供相应的服务(是否需要使用集群模式?分布式大牛与redis设计者何去何从)。分布式事务解决方案可以设计并使用本地消息表或者使用消息中间件。使用spring整合各种中间件都是一贯的料性(配置相关中间件的套接字访问方式)。 微服务读取套接字地址使用springcould的配置中心或者zk提供的配置文件读取方式均可。配置文件和源码应该在git库分别创建不同的文件夹用于分离

CSS总结

荒凉一梦 提交于 2019-11-25 22:27:40
一、CSS的四种引入方式 1. 行内式 行内式是在标记的style属性中设定CSS样式。(没有体现CSS优势) <body> <p style="color: #cc3399; background-color: greenyellow"> hello yuan </p> </body> 2. 嵌入式 嵌入式是将CSS样式 集中写在网页的标签对中的标签对中。以对应的标签名开头。格式如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS1</title> <style> p{ color: #cc3399; background-color: greenyellow; } </style> </head> <body> <p> hello yuan </p> </body> </html> 3. 链接式 将一个.css文件引入到HTML文件中,目的是允许多处使用这个.css 文件。 例如: css1.css中: ``` p{ color: #cc3399; background-color: greenyellow; } ``` css.html中: ``` CSS1 hello yuan ``` 网页: ![在这里插入图片描述](https://img-blog.csdnimg.cn