css排版之-标准文档流

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.HTML文档中的元素可以分为两大类:行内元素和块级元素. 1.行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域.它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的. 2.块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排.盒子在标准流中的定位原则margin控制的是盒子与盒子之间的距离,…

CSS层叠的问题、标准文档流、伪类选择器

一.层叠的问题 CSS有两个性质: 1.继承性 2.层叠性:选择器的一种选择能力,谁的权重大就选谁层叠性又分为: 1).选不中:走继承性 (font.color.text.) 继承性的权重是0 若有多个父级都设置了样式,走就近原则 2).选中了 a.权重的问题,权重大,就选谁的样式 b.权重相同,谁在后,选择谁 *纯标签和类没有可比性,纯类和ID也没有可比性二.标准文档流 1.含义:浏览器的排版是根据元素的特征(快和行级),从上往下,从左到右排版,这就是标准文档流 2.浮动 float:l…

css标准文档流

css标准文档流所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性空格产生折叠当在代码中存在多个空格的时候,空格会出现折叠现象. 2.元素默认底边对齐当多个元素并排显示的时候,默认会采用底边对齐. 3.文字自动换行当在一行范围内去输出文字的时候,当一行的宽度不够时,文字会发生自动换行. 块级元素和行内元素在标准文档流当中,元素分为块级元素和行内元素. 如果想…

CSS标准文档流块级元素和行内元素

标准文档流什么是标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画空白折叠现象: 多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 高矮不齐,底边对齐文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器…

前端css盒模型及标准文档流及浮动问题

1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重点学习标准模型. 盒模型示意图: 盒模型属性: width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离基本写法: <!DOCTYPE html> <html…

浅谈，html\css脱离标准文档流相关

(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相安无事,可突然有一天某个元素心想啊,我那么优秀,不该出现在这里啊,于是它成精了,它发现了一道大门走向另一个空间BFC. BFC:直译为"块级格式化上下文",这是一个独立的区域,这个区域与外部没有关系了,互不招惹,个人常用的会开启BFC空间的方式有 1.float的值不是none 2.pos…

Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

一. 什么是标准文档流文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个属性可以将元素从文本流脱离出来显示. 标准文档流的围观现象有3种: 1.空白折叠现象:多个空格或者换行会被折叠成一个. 2.高矮不齐,底边对齐. 3.自动换行,一行写不完,自动换行. <!DOCTYPE html> <html lang="en"> <head…

页面标准文档流、浮动层、float属性（转）

CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素…

python全栈开发 * 继承性层叠性盒模型标准文档流 * 180809

---恢复内容开始--- 一继承性 1.继承: 给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 2. 可继承: color . font-*(size). text-*(decoration:underline).line-*(height) 行高等可以继承(主要是文本级的标签元素) (a比较特殊) 3.不可继承 :但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承. 二.层叠性层叠性 : 权重大的标签覆盖掉了权重小的标签 (数 id…

day 41 标准文档流浮动

一.标准文档流什么是标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画标准文档流下有哪些微观现象? 1.空白折叠现象多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 2.高矮不齐,底边对齐文字还有图片大小不一,都会让我们…

python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 a LoVe HAte 必须要遵循这个准则 “爱恨准则” nth-child(3n+1) first-child last-child 继承性和层叠性继承性: 文本的属性: color text-*,line-*,font-* 盒子属性定位布局的元素层叠性: 1.先看标签元素有没有被选中,如果选中…

{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index

03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 margin的用法九文本属性和字体属性十超链接导航栏案例十一 background(背景) 十二定位十三 z-index 一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.…

padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 盒模型示意图盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离如果让你做一个宽高402*402的盒子,您如何来设计呢? 答案有…

11-[CSS]-标准文档流，display，浮动，清除浮动，overflow

1.标准文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ font-size: 50px; } </style> </head> <body> <d…

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Co…

前端基础-CSS如何布局以及文档流

一. 网页布局方式二. 标准流三. 浮动流四. 定位流一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流二. 标准流标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. 1…

css盒子模型、文档流、相对与绝对定位、浮动与清除模型

一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. html元素一般分为块级元素和行内元素块级元素:块级元素排斥其他元素与其位于同一行,可以设定宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素, 常见的块级元素有div, p ,h1~h6,ul,table,form,hr等. 每一个块元素都可以分为cont…

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. <!DOCTYPE html> <html> <head> <meta c…

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont…

Css问题 margin float 文档流背景图底部充满

今天来整理一下做网页遇到的问题吧 1.插入背景图片并使图片居于div底部充满整个行. <style> background:url(xxx.jpg) no-repeat; background-position:bottom; background-size:100%; </style> 属性: background-position:背景位置属性用于设置背景图像的位置,这个属性只能应用于块级元素和替换元素.其中替换元素包括img.input.textarea.select. 语法…

CSS的布局之文档流，与行内/块级元素的延伸

文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> <form> <table> <p> ... ·行内元素 <span> <title> <strong> <input> <select> <img> <a> ... 此处延伸文档流中块级…

CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位

1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描述:有两个盒子,一个盒子浮动,一个盒子不浮动.浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象. 1.1.2 大概描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了.所有浮动的标签不会去区分行内标签和块…

HTML+CSS基础块级元素div分析文档流脱离文档流的方法

块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+padding-left+padding-right 文档流元素从上到下(主要说块级元素),从左到右(主要说行级元素)的一种排列方式, 我们把它叫标准文档流.他是浏览器天生具有的一种功能. 在实际开发中,我们在遵循文档流原则的情况下,还得脱离文档流的约束,让元素不受文档流的控制. 脱…

前端-CSS-7-标准文档流&行内元素和块级元素转换

1.什么是标准文档流  2.行内元素和块级元素转换 HTML中标签元素三种不同类型:块状元素,行内元素,行内块状元素. 常用的块状元素: <div> <p> <h1&…

CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来. 行内框在一行中水平布置.可以使用水平内边距.边框和外边距调整它们的间距.但是,垂直内边距.边框和外边距不影响行内框的高度.由一行形成的水平框称为行框(Line Box)…

html文档流和事件流

文档流: 标准文档流,float position: relative.absolute.fixed可以脱离标准文档流: 回归标准文档流: https://blog.csdn.net/Welkin_qing/article/details/88680584#_25 flaot的元素,对父级元素设置overflow: hidden或clear: both,或者对flaot的元素同时使用clear: both可以回归文档流: 事件流: 用户的操作会产生事件,事件会在dom元素上进行传播,传播方向:d…