CSS布局对网页好看与否可太重要！决定了页面元素如何排列摆放呢～今天给你分享下关于CSS布局的知识，从普通文档流讲起，逐步带你理解脱离文档流、浮动和清除这些概念哦～
普通文档流：顺其自然的排列
普通文档流，说白了就是网页元素的默认排法，就好比小学生站队，一个挨一个，上上下下，左右左右，整齐得很。浏览器会帮咱们搞定这些，根本不需要我们操心。不过有时，这种排法可能不尽如人意，这时就要把某些元素从这个队列里拿出来，让它们自个儿找地儿呆着。
脱离文档流：自由飞翔的元素
脱离文档流，简单地说，就是让特定元素不按常规顺序排列。比如说，如果把它比作学校里的特长生，那么它是不用跟大家一样排着队上课，而是能享受独立安排的待遇！在CSS中，通过设定position属性（比如相对定位、绝对定位或固定定位），就能让一个元素不受普通文档流限制，随心所欲地调整位置，这样网页布局会更自由多样
浮动：左右漂移的艺术
哦知道吗？浮动这个技巧在CSS布局里面特别好用！只要给元素加上float属性，它们就能随心所欲地往右或者往左“漂流”，就跟在泳池里游泳似的。这种做法尤其适合用来搭图文混排，比如说文章边上配上一幅图，图片就能“飘”到文字的左右两侧，让页面看起来生动又活泼。但要注意浮动一多，它们的父元素可能会变瘦变矮，有那么点变形的味道。所以这时候就要请出清除浮动大法了。
清除浮动：恢复秩序的关键
“清楚浮动”，就是把那些乱飘的东西放回原位，让网页恢复整齐。简单地说，就是给浏览器设定clear属性，告诉它哪些元素嫌弃浮动的邻居，这样就不怕网页版面变乱！这个原理，就像划定泳池的安全区，防止乱飘的东西跑到边界去，保持泳池的整洁有序。
全局样式：网页的基石
那什么是全局样式？就是我们建房子时打好的基础。虽然你可能看不见，但它真的很关键！因为全局样式就像房子的框架，包括了头、导航栏、主要内容、底部等等。有了这些样式，就能使网页各部分的外观保持一致，视觉效果也更好。
*{
margin:0;
padding:0;
box-sizing:boder-box;content-box;
}
body{
font-size:12px;
font-family:Microsoft YaHei,"微软雅黑";
width:1000px;
margin:0 auto;
}
ul,ol,li{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:none;
}
字体隐藏与圆角：细节决定成败
你知道吗？CSS布局里有很多好用的小技巧！最简单的就是把字体藏起来，用font-size:0px就行了。这样看不到的字就能不见踪影，网页瞬间清爽不少。还有，给元素加个圆角属性，只需要设个border-radius就好。这样页面会显得更自然好看，感觉都高级多了。别小看这些细节，真的能让网页整体感觉’upup’起来！
H5新增标签：新时代的布局工具
随着HTML5越来越火，给我们带来不少新花样！就拿<time>这个标签来说，它就是个展示时间的小能手，看着就让人舒心又好看；还有那个
标签，它特别擅长介绍地址信息，让你一目了然。这两个标签可是大有用处，不仅让我们做网页的方法变多了，还让网页变得更有逻辑，对SEO还能有点好处！PC端网页布局：固定与灵活的结合
咱们在做电脑版的网页设计时，喜欢用那个固定宽度，中间对齐的布局方法，这样无论什么尺寸的屏幕，浏览起来都会很舒服。还有个方法是把网页的头部、导航条跟底部全都弄成一样的样式，看着就像整个网页是一套的。这招一使，你的电脑网页就能变得更专业更好看。
浏览器兼容性：不可忽视的问题
在网页设计里，浏览器兼容性可是大事儿!每个浏览器理解CSS代码的方式都有微妙差别，这就可能让同一段代码在各家浏览器显示出惊人差异。例如，设定子元素margin-top属性时，有些浏览器就会出岔子。别急，一招就能搞定——增加父元素的padding数值就好啦!虽是小调整，可带来大大方便！
评论0