CSS常用布局_0

时间：2023-03-30 14:09:43 CSS

body{min-width:550px;}.col{position:relative;float:left;}#container{padding:0190px0190px;}#main{width:100%;height:400px;background-color:#ccc;}#left{width:190px;height:400px;margin-left:-100%;left:-190px;background-color:#0000FF;}#right{width:190px;height:400px;margin-left:-190px;right:-190px;background-color:#FF0000;}1.三栏布局三栏布局实现了一种中间宽度自适应，两侧固定宽度的布局。中间栏要放在文档流的前面，实现优先渲染。圣杯布局和双飞翼布局都是三柱式布局的效果，只是实现方式不同而已。1.圣杯布局#main

#left

#right

body{min-width:550px;}.col{position:relative;float:left;}#container{padding:0190px0190px;}#main{width:100%;height:400px;background-color:#ccc;}#left{width:190px;height:400px;margin-left:-100%;left:-190px;background-color:#0000FF;}#right{width:190px;height:400px;margin-left:-190px;right:-190px;background-color:#FF0000;}col设置为float，然后left和right定位到左右，使用负边距。左边部分margin-left:-100%，右边部分margin-right:-190px。设置完成后定位成功，但是会覆盖掉main的内容，所以padding值设置在容器中间。给所有的cols设置position:relative，然后分别给左列和右列加上left和right的值，使其定位到正确的位置。2.双翼布局

#main#left#right主体{最小宽度：550px；}.col{float：left；}#main{width：100%；height：400px；background-color：#ccc；}#main-wrap{margin：0190px0190px；}#left{width:190px;height:400px;margin-left:-100%;background-color:#0000FF;}#right{width:190px;height:400px;margin-left:-190px;background-color:#FF0000;}双飞翼的实现比较简单，在main中添加子元素main-wrap并设置pading即可。与圣杯布局相同，一开始，所有三个列都设置为float:left。为了对左右两部分进行定位，使用了负边距。左边部分margin-left:-100%，右边部分margin-right:-190px。2.怪异的盒子模型盒子模型一般分为标准盒子模型（w3c标准）和怪异盒子模型（IE标准）。大多数浏览器都使用标准的盒子模型，而在IE中使用的是微软自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时保留了原有的解析方式”，怪异模式主要表现在IE内核的浏览器中。标准模式：box-sizing:content-box；总框宽度：width+padding（左右）+border（左右）+margin（左右）怪异模式：box-sizing:border-box;totalboxwidth:width(width已经包括padding,border值)+margin(leftandright)　　3.定位布局css有3种定位机制：normalflow,floating,absolutepositioningNormalflow:元素的位置是由元素在html中的位置决定。位置：静态|相对|绝对|fixedstatic：静态，无需特殊设置，遵循基本的定位规则。z-indexisinvalidrelative：相对定位，不脱离文档流，用TLBR定位（top,left,bottom,right），z-index无效absolute：绝对定位，脱离文档流，用TLBR定位，z-index有效。选择距离最近且定位设置最多的父对象进行定位。如果对象的父对象没有设置定位属性，则绝对元素将定位在主体坐标的原点。fixed：固定定位，相对于浏览器可见窗口定位，z-index有效。4.流式布局页面元素宽度根据屏幕分辨率自适应，整体布局不变。网页中主要划分区域的大小使用百分比（与min-和max-属性一起使用），例如设置网页主体的宽度为80%，min-width为960px。图片也做类似的处理（width：100%，max-width一般设置为图片本身的大小，防止被拉伸扭曲）。1.布局特性：当屏幕分辨率改变时，页面上元素的大小会改变，但布局不会改变。【这样会导致屏幕太大或者太小，元素都无法正常显示】2.设计方法：使用%百分比定义宽度，高度多为px固定，可以基于视口和父元素。实时调整大小，尽可能适应各种分辨率。常结合max-width/min-width等属性来控制尺寸流量范围，以免过大或过小影响阅读。这种布局方式在Web前端发展的早期用于处理不同尺寸的PC屏幕（当时屏幕尺寸的差异不会太大），也是当今移动端常见的布局方式开发，但缺点也很明显：主要问题是如果屏幕比例跨度过大，在与原设计相比过小或过大的屏幕上都无法正常显示。因为宽度是用%百分比来定义的，而高度和文字大小大多是由px固定的，所以在大屏手机上的显示效果会变成有些页面元素的宽度被拉得很长，但是高度和文本大小仍然和以前一样（即，这些东西不能“流式传输”），显示非常刺耳。5.浮动布局float:left|对|无|inheritleft：左浮动right：右浮动none：默认值。该元素不会浮动，并且会显示在它出现在文本中的位置。inherit：规定float属性的值要从父元素继承。使用浮动，div将浮动在网页上方。为了不影响下面不需要浮动的div，必须先清空floatingclear:left;不允许向左浮动的标签clear:right;不允许向右浮动的标签clear:both;不允许任何方向浮动的标签六、flex布局弹性布局（属于一维布局），赋予容器控制内部元素宽高的能力。方便实现垂直居中的效果。大部分浏览器都可以支持，带有webkit内核的浏览器需要加上-webkit前缀。容器的6个属性：flex-direction:row|行反转|栏目|列反转；//判断主轴方向flex-wrap:nowrap|包装|换行；//判断项目包裹情况justify-content:flex-start|弹性端|中心|间隔|空间周围；//项目在主轴上的对齐方式align-items:flex-start|弹性端|中心|间隔|空间周围；//项目在横轴上的对齐方式align-content:flex-start|弹性端|中心|间隔|环绕空间|拉紧;//只有一个flex-flow时多轴对齐无效：||<弹性包装>;//flex-direction属性和flex-wrap属性的简写形式，item的6个属性：flex-start：与横轴起点对齐。flex-end：与交叉轴的末端对齐。center：与横轴的中点对齐。space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。stretch（默认）：轴填充整个交叉轴。教程：http://www.ruanyifeng.com/blo...^%$七、网格布局网格布??局（属于二维布局），可以和flex结合使用。兼容性不如flex，不够流行特点：1)可以定义任意数量的行和列2)行高和列宽可以使用绝对值、相对比例或自动调整，并且可以设置最大值和最小值3）内部元素可以设置自己的行和列，也可以设置跨越几行和几列4）可以设置内部元素的对齐方向教程：http://blog.csdn.net/ceshi986...源文件：http://blog.csdn.net/yinmazuo...http://blog.csdn.net/dong_pt/...https://www.cnblogs.com/yanay...http://blog.csdn.net/aozeahj/...https://www.cnblogs.com/nuann...理解不正确，如有错误请指教^-^

上一篇：FCC成都社区·前端周刊第8期

下一篇：小哪吒的风火轮来啦！！！（记录·加载组件）

CSS常用布局_0相关文章