CSS关于传统网页中的三大布局方式，手动码字+大白话

一个完整的网页必须要以下三种布局方式一起构成

**1.普通流（标准流、文档流）**标签按照规定好默认方式排列，比如DIV它独占一行，行内元素从左右到依次排列，碰到父元素边缘则换行**2.浮动**可以让多个块级元素一行内排列显示网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动网页布局第二准则：先设置盒子大小，之后设置盒子的位置注意1.浮动元素会脱离标准流（脱标）（脱离标准流的盒子移动到指定的位置，且脱标的盒子不再保留原先的位置）2.浮动的元素会一行内显示并且元素顶部对齐（浮动的元素是互相贴靠在一起且不会有缝隙，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐3.浮动的元素会具有行内块元素的特性（没有宽度，内容多宽撑多宽）4.为了约束浮动元素位置，先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则（白话意思就是用个div盒子把浮动元素框起来，让它们在盒子里浮动，不要整个页面乱跑）5.浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流6.浮动的元素不会压住下面标准流的文字，它只会压住盒子，但里面的文字还是会露出来的（原因是浮动最初设计出来，是为了做文字的环绕效果）思考：为什么需要清除浮动？由于父级盒子很多情况下，不方便给高度（比如淘宝的商品每天都在增加，我希望的是父级盒子被子盒子自行撑开，有多少商品就放多少商品）但是子盒子浮动不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，清除浮动的本质就是清除浮动元素造成的影响。清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流。解决策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子解决方案：1.额外标签法也称为隔墙法，缺点是添加了无意义的标签，导致结构变差（不推荐）在最后一个浮动的元素后，添加一个块级元素，并给这个标签写一个样式 { clear:both }2.父级添加overflow，缺点是无法显示溢出的部分（这个单词本身的意思是溢出，它是针对溢出的属性，如果子元素有溢出一部分，它就直接给你砍了不显示）给父元素添加overflow属性，将其属性值设置为hidden、auto、或scroll。3.伪元素清除浮动，现在的淘宝，百度等都是用该方法清除浮动（它相当于在父元素里插入一个盒子，但它是不影响结构的）给父元素增加一个样式 .clearfix:after {content:""; display:block; height:0; clear:both; visibility:hidden;}4.双伪元素清除浮动，腾讯，小米用的是这种方法（它在父元素里的最前边和最后边都插入一个盒子，把路堵死）给父元素增加一个样式 .clearfix:before,.clearfix:after {content:""; display:table;} .clearfix:after{clear:both;}**3.定位**为什么需要定位？1.浮动可以让多个块级的盒子在一行没有缝隙的排列显示，经常用于横向排列盒子，但它和标准流一样，有难以实现的效果，
比如将某个盒子固定在页面中，不随 滚轮滚动而滚动。2.定位则是可以让盒子自由的在某个盒子内移动位置，或者固定在屏幕中某个位置，并且可以压住其他盒子。定位 = 定位模式 + 边偏移定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子（一样的利用上下左右距离来调整这个盒子最终的位置）定位模式用于指定一个元素在文档中的定位方式。‘边偏移’则决定了该元素的最终位置position：static（静态定位），relative（相对定位），absolute（绝对定位，压住别的盒子显示，比如某些按钮），fixed（固定定位，可以在页面某个位置固定显示）relative：1.自恋型定位，它总相对于自身来移动，意思就是它总是以自己原先的坐标位置为参照，来移动。2.相对定位移动的盒子，它原来的位置保留，后面其他的盒子仍然以标准流的方式对待它absolute：1.拼爹型定位，它总是相对于它祖先元素来移动2.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）注意：绝对定位盒子所参考的祖先元素也必须有定位，如果祖先元素没有position，它还是会参照浏览器为准，例如div>ul>li，如果ul没有定位而div有定位，则参照div的位置3.设置绝对定位后，盒子飘起来了不再占有原先的位置，后面的盒子按照标准流直接占有它原先的位置4.绝对定位会压住下面标准流所有的内容（和浮动不同）fixed：1.固定定位是元素固定于浏览器可视区的位置，它始终会在一个位置，不随页面滚动而消失2.它以浏览器的“可视窗口”为参照点移动元素（可视窗口就是你浏览器body那一块区域，缩小浏览器，能看见的body区域也变小了）3.不占有原先的位置sticky：1.粘性定位，可被认为是相对定位和绝对定位的混合。2.以浏览器的可视窗口为参照点移动元素（固定定位特点）3.粘性定位占有原先的位置（相对定位特点）4.粘性定位虽然非常灵活，但它的兼容性较差边偏移？边偏移就是定位的盒子移动到最终位置。有top,bottom,left,right四个属性，都是定义的那个元素相对于父元素的上下左右四个边线的距离定位叠放顺序-z-index在使用定位布局时，设置了定位的盒子可以压住别的盒子，但是定位盒子彼此之间参照的是z-index这个属性来控制前后顺序选择器 { z-index:1;}1.数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上（数字不能加单位）2.如果属性值相同，则按照书写顺序，后来居上3.只有定位的盒子才有z-index属性绝对定位的盒子居中方法？因为设置了position:absolute;的盒子，margin:atuo就不起作用了，所以只能手动调，思路是先移动至父盒子的一半{left：50%}，再用margin微调一下就可以了定位特殊特性？绝对定位和固定定位也和浮动类似。1.行内元素添加绝对或者固定定位，可直接设置高度和宽度。2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。注：参考Pink老师在B站的html5+css3，感谢Pink老师

CSS关于传统网页中的三大布局方式，手动码字+大白话相关推荐

html语言设置网页背景,HTML+CSS入门设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...
表单设计中标签的布局方式有哪些
表单设计的标签本质上是一个与用户对话的起点,了解表单设计的标签的设置规则后,需要关注标签的布局方式,因为网页表单设计是影响用户如何回答问题的关键.表单设计标签的布局方式主要包含三种,测试数据展示,用户 ...
html中url表示方法,HTML网页中的URL表示方式介绍
在HTML中很多用户们对于URL表示方式都不了解,那么今天爱站小编就将为大家分享HTML网页中的URL表示方式介绍,希望对大家的学习有所帮助. 在HTML中,常见的URL有多种表示方式: 相对URL: ...
CSS的三大布局方式（流式布局，浮动布局和层布局）
文章目录前言一.标准文档流二.三种布局方式 1.流式布局 2.浮动布局 (1)字围效果 (2)圣杯布局 3.层布局定位的分类: (1) 相对定位 position:relative (2) 绝 ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...
1._请写出5种以上的android中界面常用布局方式,跳槽季“充电宝”Android面试题(一)...
1.请介绍下Android中常用的5种布局 Android中常用的5种布局分别为:FrameLaout(框架布局).LinearLayout(线性布局).AbsoluteLayout(绝对布局).Re ...
duilib中界面的布局方式
参考博客:https://blog.csdn.net/zhuhongshu/article/details/38531447 常用的布局默认为相对布局,默认float=false,该属性为true时, ...
java swt gridlayout_关于SWT中的GridLayout布局方式
GridLayout 布局的功能非常强大,也是笔者常用的一种布局方式.GridLayout是网格式布局,它把父组件分成一个表格,默认情况下每个子组件占据一个单元格的空间,每个子组件按添加到父组件的顺序 ...
在HTML网页中嵌入脚本的方式
javascript脚本可以出现在html页面的任何地方.需要注意的是javascript在框架页中出现必须在<frameset>标签之前,否则不能运行. 在html页面中嵌入脚本的方式主 ...

CSS关于传统网页中的三大布局方式，手动码字+大白话

CSS关于传统网页中的三大布局方式，手动码字+大白话相关推荐

最新文章

热门文章