当前位置：首页 > 后端技术 > Node.js

经典CSS布局问题初步整理

时间：2023-04-03 10:40:35 Node.js

CSS定位问题主要是经典的绝对定位和相对定位问题。10DocumentationLayouts：通过十个例子讲解布局，主要涉及相对布局、绝对布局和浮动。百度前端学院笔记——理解绝对定位：文章本身比较笼统，参考几篇比较详细。在X、Y和Z轴上定位元素。三列布局涉及浮动和清除浮动。主要讲解了“圣杯”和“双飞翼”两种解法。这两个方法实现的是三栏布局，两边盒子的宽度是固定的，中间的盒子是自适应的。HolyGrailLayoutHolyGrail：父框包含三个子框（左、中、右）。中间框的宽度设置为width:100%；它占据一行；使用负边距（都是margin-left）将左右两边的盒子上拉到与中间盒子在同一行；.*left{margin-left:-100%;}拉起左边的盒子。right{margin-left:-rightboxwidthpx;}上拉右框设置父框的左右padding，为左右框预留空间；左右框使用相对布局，占据padding空间，避免中间框的内容被左右框覆盖；中间的弹性区域

左栏

右栏

DoubleFlyingWingLayoutDoubleFlyingWing：父框包含三个子框boxes(left,middle,right)，并且在中间的子框上添加了一个子框。中间框的宽度设置为width:100%；专线；使用负边距（均为margin-left）将左右框拉到与中间框在同一行；在中间框内添加一个div，然后这个div设置margin-left和margin-right，为左右框预留空间；

中间弹性区左栏右栏圣杯而双飞翼布局的异同圣杯布局和双飞翼布局解决的是同一个问题。都是两边固定宽度，中间自适应的三栏式布局。中间一栏应该放在Prioritizesrendering文档流的前面。两种方法的基本思路是一样的：先让中间框占据100%的相同高度空间，当左右两个框被挤出中间框所在的区域时，取负值margin-left将左右两个盒子拉回一个与中间盒子高度相同的空间。接下来做一些调整，防止中间框的内容被左右框遮挡。主要区别在于如何让中间框的内容不被左右框遮挡：圣杯布局的方法：设置父框的padding值，为左右框留出空间，以及然后使用相对布局调整左右框的位置，从padding中填补空缺；双飞翼布局方式：在中间的盒子里再增加一个子盒子，直接设置这个子盒子的边距值，腾出空间，不用调整左右盒子。简单来说，双飞翼布局比圣杯布局多创建一个div，但是不需要相对布局，少设置几个属性。使用floating实现我也是通过floating实现了一个三栏布局：左边的盒子向左浮动，右边的盒子向右浮动，中间的盒子使用margin-left和margin-right为左右两个盒子预留位置，以及父框设置溢出：自动；以避免子框溢出。左栏右栏中间弹性区域三栏布局参考以下链接：CSS三-columnlayout-fixedinthemiddleAdaptivewidthonbothsides：w3cplus的文章使用双飞翼和浮动实现两侧固定宽度和中间自适应，也实现了两侧自适应和固定宽度中）：只讲了圣杯，但是特别详细的负mag和clearfloat的问题。这里的negativemagin导致了“negativemargin”的问题：negativemarginusage的权威指南：翻译TheDefinitiveGuidetoUsingNegativeMargins，介绍了negativemagin的一些性质和很多实用技巧。常见的布局应用：包括对自身的影响，对文档流的影响，布局中的一些应用技巧（如去除列表右边框，负边距+定位实现水平和垂直居中，去除borderof列表最后一个li元素-底部，多列等高）博客园-CSS布局巧妙技巧-强大的负边距：和上面的内容差不多，简单总结几点：如果不使用float，负边距元素不会破坏页面的文档流。所以如果你使用负边距向上移动一个元素，所有后面的元素都会被向上移动（这与相对定位的元素不同，它会保留它们的原始位置并影响文档流）。当一个静态元素的margin-top/margin-left被赋予一个负值时，该元素将被拉向指定的方向。如果你设置margin-bottom/right为负数，元素不会像你想的那样向下/向右移动，而是后面的元素会被拖进来覆盖掉原来的元素。当元素没有width属性或width:auto时，负边距将增加元素的宽度。margin-top为负值不会增加高度，只会造成向上位移；margin-bottom为负值不会造成位移，但会降低自身的CSS可读高度，影响下方元素的位置；当上下相邻元素均为负值时，效果不叠加，取负值较大的效果。ClearFloatClearFloat主要是解决高度塌陷问题。简单明了：两者都没有解决这个问题，所以介绍了很多解决方案。StackOverflow–Whatmethodsof‘clearfix’canIuse?：清浮黑科技全面解读当年我们一起清浮：神文，将“清浮”定义为“闭浮”，并说明来龙去脉问题和解决方案说清楚，分析各种解决方案的利弊。各种解决方案在上面的链接中都有详细介绍，这里不再赘述。大致可以分为两类：一是通过在浮动元素的末尾添加一个空元素，并设置clear:both属性，after伪元素实际上生成了一个块级元素，其内容是在floating元素后面的一个point通过内容元素；第二，通过设置父元素的overflow或display:table属性来关闭浮动其他浮动元素的边框。设置clearfloat对已经浮动的元素没有影响。CenteringlayoutCenteringinCSS:ACompleteGuide：非常全面的居中定位博客，包括水平居中、垂直居中和水平垂直居中各种情况下的解决方案。有示例和相应的HTML和CSS代码。文章的总体结构是：横向居中。对于行内元素（inline）：text-align:center;对于块级元素（block）：设置宽度，margin-left和margin-right设置为auto对于多个块级元素：设置text-align:center;对于父元素，设置display:inline-block；对于子元素；或者使用flex布局垂直居中对于行内元素（inline）单行：设置上下panding相等；orSetline-heightandheightequaltomultiplelines：设置上下panding相等；或设置显示：表格单元格；和垂直对齐：中间；；或使用弹性布局；或者对块级元素（block）使用伪元素：在下面两个选项之前，父元素需要使用已知高度的相对布局：子元素使用绝对布局top:50%;，然后使用一个负的margin-top将子元素拉到高度的一半高度未知：子元素使用绝对布局位置：绝对；顶部：50%；变换：翻译Y(-50%)；使用Flexbox：选择方向，justify-content:center；水平和垂直居中，高度和宽度：首先使用绝对布局top:50%；left:50%;,然后用一个等于宽高一半的负边距把子元素拉回来。高宽未知：首先使用绝对布局top:50%；left:50%;,然后设置transform:translate(-50%,-50%);UsingFlexbox:justify-content:center;对齐项目：居中；响应式设计“响应式设计（ResponsiveDesign）”是一种让网站针对不同浏览器和设备“呈现”不同显示效果的策略。媒体查询（MediaQueries）是执行此操作所需的最强大的工具。注：ResponsiveWebDesign＝RWD，AdaptiveWebDesign＝AWDRWD：利用CSS媒体查询技术流体布局（fluidgrids）自适应图片/视频等资源素材（针对小中大屏幕做一些优化，目的是让任意尺寸的屏幕空间都可以得到充分利用）AWD：CSSmediaquerytechnology（只针对有限的预设屏幕尺寸设计）使用JavaScript在服务器端操作HTML内容在服务器端操作HTML内容（比如减少内容对于移动端，为桌面端提供更多内容）以上RWD和AWD解释引用自知乎@奕峰。可以参考Bootstrap的网格系统：http://getbootstrap.com/css/#...Bootstrap3网格系统有四层类：xs（phones），sm（tablets），md（desktops），lg（更大的桌面）。自己实现网格系统：CreatingYourOwnCSSGridSystemFlexboxLayoutFlexboxLayout参考以下文章就可以了。文章大同小异，看一两篇就知道大概思路了，讲的比较详细，这里就不赘述了w3cplus-CSS3Flexbox属性图解w3cplus-Flexbox-快速布局神器

上一篇：nodejs事务使用总结

下一篇：Browsersync使用

经典CSS布局问题初步整理相关文章

最新推荐

猜你喜欢