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

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

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

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

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

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

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

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

css标准文档流

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

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

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

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

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

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

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

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.先看标签元素有没有被选中,如果选中…

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

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

前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局一.文档流 1.什么是文档流将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则…

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

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

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中布局之文档流、浮动、定位以及叠放次序

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

css排版之-标准文档流

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

【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含content.padding.border //width和height属性包括content.padding和border,但是不包括margin(外边距)box-sizing: border-box; 1.2 内边距 padding 1.3 边框 border 1.4 外边距 margin 外边距塌陷:…

CSS盒模型的深度思考及BFC

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型.IE盒模型的区别.不要漏说了IE盒模型,通过这个问题,可以筛选一部分人. (3)CSS如何设置这两种模型(即:如何设置某个盒子为其中一个模型)?如果回答了上面的第二条,还会继续…

CSS盒模型和定位的类型

此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处还请同行朋友指点. 当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了…

十分钟复习CSS盒模型与BFC

css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区.padding.border.margin .png) 盒模型主要分两种标准盒模型 IE盒模型(怪异盒模型) 两者的区别: 标准盒模型的宽高则为内容区域的宽高 IE盒模型则宽高为 border + padding + 内容区如何切换盒子模型? 使用box-sizing来进行切换 border-box 切…

11-2 css盒模型和浮动以及矢量图用法

一盒模型 1属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离 2例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </he…

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

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

一天搞定CSS：浮动（float）及文档流--10

浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). 下面我们就来详细说明浮动!!!!!!!! 1.文档流在浮动中有一个文档流的概念,所以在这里不得不介绍一下文档流了. 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <…

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

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

WEB学习-CSS盒模型

盒子的区域一个盒子中主要的属性就5个:width.height.padding.border.margin. width是“宽度”的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. height是“高度”的意思,CSS中height指的是内容的高度,而不是盒子的高度 padding是“内边距”的意思 border是“边框” margin是“外边距” 认识width.height 下面这两个盒子,真实占有宽高,完全相同,都是302*: .box1{ width: 100px; hei…

CSS定位——文档流定位

关于CSS的定位机制Ⅰ ㈠概念对于盒子模型来说,也就是页面元素,这些盒子究竟在页面的什么位置,怎样排列它,那么找到它的位置,确定它的位置,这个就是定位机制所决定的. ㈡分类文档流, 浮动定位,层定位㈢三种类型定位的功能 ⑴文档流定位(normal flow) 默认我们不需要额外的设置,每种元素它们在当前的网页上面呈现出来的状态都不同,文档流定位就相当于我们平常写字一样,都是从上到下,从左到右,只是有的元素会单独占一行,有的元素跟其他元素在一行上显示. ⑵浮动定位(float) 改变默…

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

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

盒模型的属性丶display显示丶浮动

一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; background…

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…

【前端css盒模型及标准文档流及浮动问题】的更多相关文章