文档流

css定位属性

由 不问归期 提交于 2020-03-01 16:33:38
定位属性：position 1.static：position的默认值（没有定位）可以用来取消定位. 2.relative：相对定位（以自身为对象开始定位） 特点：不会对布局产生影响，不会脱离文档流，空间会被保留。 left、top、right、bottom是控制定位位置的属性。 absolute : 绝对定位（参照物是祖先元素） 使用了绝对定位后可以发现没有定位的元素上来了，可以得出结论 绝对定位使元素完全脱离了文档流 把定位的元素数值设为0 这个时候发现他是紧靠浏览器的边缘显示的 注： 绝对定位元素会根据包含块进行绝对定位，默认情况下 ，浏览器的可视窗口是一个大的包含块，默认情况下，绝对定位元素会相对浏览器的可视窗口进行定位；如果他的祖先级元素定义了包含块，那他就最近的祖先级元素进行绝对定位。 给祖先级元素添加position：relative/absolute/fixed。 4.固定定位： fixed （始终相对浏览器窗口进行定位 定位之后他是不会动的） 特点：元素会脱离文档流。 不会受浏览器滚动条的影响 ，始终位于你定位的位置。 5.黏性定位: sticky 特点：必须给一个 left、top、right、bottom值之一。 兼容性很差 一般只使用top的黏性定位。 逆战班 来源： CSDN 作者： Surplus233 链接： https://blog.csdn.net

CSS快速入门-定位(position)

由 痴心易碎 提交于 2020-03-01 13:34:54
一、概述 CSS 定位 (Positioning) 属性允许你对元素进行定位。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。 二、CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 三、定位实现 定位是通过使用 position 属性来实现。我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。 position 属性值的含义： static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative 元素框偏移某个距离。 元素仍保持其未定位前的形状，它原本所占的空间仍保留！！ absolute 元素框从文档流完全删除

如何实现两列固定与一列自适应

由 六眼飞鱼酱① 提交于 2020-03-01 13:16:06
【逆战班】 1.flex布局 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。这里我们利用flex布局来实现两列固定一列自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #main{ display: flex;/*设为伸缩容器*/ } #left{ width:200px;/*左侧固定宽度*/ height:400px; background:aqua; } #center{ flex-grow:1; /*填满剩余空间*/ height:400px; background:green;} #right{ width:200px;/*固定右侧宽度*/ height:400px; background:blue; } </style> </head> <body> <div id=

高度塌陷的产生条件和解决方法

由 被刻印的时光 ゝ 提交于 2020-02-26 07:07:44
高度塌陷的产生条件和解决方法 1.首先提到高度塌陷就必须提到一个css属性：float–浮动 float顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，可以让任何竖着排列的标签横过来，我们称设置了float属性的元素为浮动元素。 即如图所示： Html代码如下: css代码如下： 效果图： 2.什么是高度塌陷 通过下面的例子了解什么是高度塌陷。 在页面中设置一个盒子box，其中在嵌套一个子元素小盒子list。box设置边框宽度，而高度不去设置（高度会由内容撑开） Html代码： CSS代码： 效果图： 但是当我们向盒子里面添加内容的时候 <div class="list">a</div> ,就可以发现父元素被撑开了。 在文档流定位中，父元素的高度默认是被子元素撑开的高度。即子元素的高度就是父元素的高度。如下图： 子元素list加入宽，高，背景色 当为父元素中的子元素设置了向左浮动时。比如说为box1设置向左浮动。就会发现子元素的位置没变，但是父元素box发生了高度坍塌。 如下图： 子元素list加float：left；左浮动 得出结论：当为子元素设置浮动的时候，子元素就会完全脱离文档流，此时将会导致子元素无法撑开父元素，导致父元素的高度塌陷。 当再在父元素之下设置一个盒子new，为new设置高度和背景颜色。 按理来说正常情况下，按照文档流排列

CSS-position定位（带例子）

由 99封情书 提交于 2020-02-23 10:56:18
position定位概念 定义 ：CSS position属性用于指定一个元素在文档中的定位方式（说白了就是控制这个元素在网页中的什么位置显示）； 属性值：top，right，bottom 和 left决定了这个元素的（坐标）最终位置。 5种定位类型 1、static 静态定位（默认值） 没有定位，元素出现在正常的文本流中（不识别top、right、z-index等属性值） 2、absolute 绝对定位（脱离文档流、不占据空间） 通过绝对定位，元素可以放置到页面上的任何位置 例（1） 按照已经有定位的父元素进行位置的变化 例（2）如果当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。 例：代码如下 例：代码运行如下 绝对定位 的框与文档流无关，所以它们可以覆盖页面上的其它元素，通过设置 z-index 属性来控制这些框的堆放次序 例：代码如下 例：代码运行如下 3、relative 相对定位（ 始终占据空间，不会破坏文档流） 以自身默认的位置作为参照物 例：代码如下 例：代码运行如下 4、fixed 固定定位（脱离整个文本流，不占据空间） 以浏览器窗口为参照物 例：代码如下 例：代码运行如下 5、sticky 黏性定位（relative和fixed的结合） 如果页面没超出窗口范围，按照relative 执行 如果内容超出窗口位置，按照fixed执行 例：代码如下

HTML CSS元素浮动

由 半城伤御伤魂 提交于 2020-02-23 01:39:14
前端页面设计元素浮动是会经常用到的，今天简单的整理一下在 逆战班 学到的浮动知识点。 CSS元素浮动：使块元素在页面中水平排列，脱离文档流。 使用float来使元素浮动，从而脱离文档流 可选值 1.left 元素立即脱离文档流 向页面左侧浮动 2.right元素立即脱离文档流 向页面右侧浮动 3.none默认 在文档流中排列 当为一个元素设置浮动以后非none，元素立即脱离文档流，它下边的元素会立即向上移动，左上或右上浮动，直到遇到父元素的边框或者其他的浮动元素。 示例：先设置3个块元素div <div class="box1 "></div> <div class="box2 "></div> <div class="box3 "></div> 在css中没有浮动的样式是 .box1{width: 200px;height: 200px;background-color: red; .box2{width: 200px;height: 200px;background-color: blue;} .box3{width: 200px;height: 200px;background-color: green;} 当给每一个div添加浮动后 .box1{width: 200px;height: 200px;background-color: red;float: left;

开始学习HTML,并记下笔记

由 隐身守侯 提交于 2020-02-21 19:23:14
开始学习HTML,并记下笔记。 外边距（不影响可见框大小，影像盒子位置） margin-top(上) right（右） bottom（下） left（左） “外边距也可以为一个负值，元素会反方向移动” margin还可以设置为auto，auto一般只设置给水平方向的margin. 如果只指定，左边距或右边距的margin为auto则会将外边距设置为最大值 如果两侧同时设置，则两侧的外边距会设置为相同的值。 就可以使元素自动在父元素中居中，所以通常左右同事设置auto,以使子元素在父元素中水平居中。 （垂直方向设置auto，则外边距默认就是0） margin-left:auto; 垂直外边距的重叠 在网页中相邻的垂直方向的外边距会发生外边距的重叠（指兄弟元素之间的相邻外边距会取最大值而不是取和） ！可在两个元素间加一个a而使他们外边距相加 如果父子元素的垂直边距相邻了，则子元素的外边距会设置给父元素。（可在两个元素间加一个a而使他们外边距相加“不建议使用”） ！可谓子元素设置一个上边框:设置Padding-top:1px; !可谓父元素设置一个上边距Padding-top:100px;（将父元素的高降低100px） 浏览器默认样式 浏览器为了在页面没有样式时，也可以有一个比较好的显示效果， 所以为很多元素都设置了一些默认的margin和padding，（不需要使用

CCS标准文档流

由 时间秒杀一切 提交于 2020-02-14 07:09:01
常用的word文档就是一个经典的标准呢文档流。内容必须是从上往下，从左往右书写；前面的文档内容或大小发生变化，后面的内容也会跟着一些位置变化。制作的html网页就是夜歌标准文档流。 1.从微观上有特殊的性质 1.html文本之间有空白折叠现象。 2.文字，图片，表单元素等这些文本类型的元素有一个特点：高矮不起，底边对齐。 3.文字在盒子内如果一行书写完毕会自动换行。 2.块级元素和行内元素。 标准文档流将html标签分成了: 块级标签，行内标签。 块级标签：所有的容器级标签都是块级标签。文本级标签也是一个块级标签。 行内标签：除了p标签以外所有文本级标签。 块级标签：body，div，h1 , p , ul , ol , li , dl , dt , dd , table , tr , td 行内标签：a，span，img，input，等 块级元素特点： 1.独占一行，同行不会出现其他同级标签。 2.可以设置宽高。 3.嵌套关系中，子盒子不设置宽度，会自动继承父盒子100%。 行内元素特点： 1.不可以独占一行，可以与其它行内元素并排一行。 2.不可以设置宽高，其他内边距，边框，外边距可以设置。 3.宽高只能用内容撑开。 行内块标签 可以设置宽高，可以并排一行。 来源： CSDN 作者： 上上谦507 链接： https://blog.csdn.net/weixin

CSS布局(四) float详解

由 北战南征 提交于 2020-02-14 03:31:37
一、float设计初衷 因为float被设计出来的初衷是用于——文字环绕效果。即，一个图片一段文字，图片float:left之后，文字会环绕图片。 <div style="width: 100px;height: 100px"> <img src="image/1.jpg" style="width: 50px;height: 50px;float: left">阿斯利康大家啊胜利大街拉速度来喀什建档立卡结算单 </div> 二、float多个特性 2.1. 破坏性 　　首先大家来看两个demo，如下图。第一个demo是一个简单不过的例子，显示效果也很正常。第二个demo，唯一的区别就在于<img>加了float:left，上层的<div>却出现了“坍塌”现象。 　　 　　不过，这就是float的“破坏性”——float破坏了父标签的原本结构，使得父标签出现了坍塌现象。导致这一现象的最根本原因在于：被设置了float的元素会脱离文档流。 　　初次接触“脱离文档流”的朋友可以这样理解：div是父亲，img是它的儿子，原本好好的父子关系，原本爷俩可以体面的展示一个包含关系的效果。直到有一天，img被设置了float。老天爷（浏览器）规定，任何float元素都不允许再呆在自己的家族中，于是img被逐出家门，断绝和div父子关系。于是乎，div没有了img儿子

CSS_05

由 那年仲夏 提交于 2020-02-10 08:05:24
一.元素的显示方式 display 取值： 1.block 让元素的表现和块级一致 2.inline 与行内元素一致 3.inline-block 与行内块元素一致 4.table 与table一致 5.none 不显示元素，隐藏 块级：独占一行，可以设置尺寸，上下外边距有效 行内：共用一行，尺寸无效，上下外边距无效 行内块：共用一行，可以设置尺寸，上下外边距有效 table：独占一行，可以设置尺寸，尺寸以内容为主 二.显示效果 visibility 取值：1.visible 默认值，可见 2.hidden 隐藏不可见 问题：visibility:hidden和display:none区别 visibility:hidden；隐藏，元素不脱离文档流，在当前页面不可见，但是占据位置 display:none；隐藏，元素脱离文档流，隐藏后不占位置，后面元素上前补位 三.透明度 opacity 取值：0~1 值越小越透明 问题：opacity和rgba的区别 rgba只会改变当前颜色的透明度 opacity，元素内部只要元素相关的颜色都会跟着透明 四.垂直对齐方式 vertical-align 使用场合 1.表格中 td/th 取值 top/middle/bottom 2.img与文字的排版 改变的是img与前后文本的对齐方式 取值 top/middle/bottom
订阅 文档流