display none的元素重新展示如何撑开页面_做了几个内容较为复杂的页面后，我的一些心得。...

在写HTML、CSS文档之初，对布局一定要有清晰的规划：

规划相信每个人都有，但我想说的是，这个规划一定要细致，不能简单的停留在用哪种布局、页面某个地方是什么东西、大致的尺寸这样浅尝辄止的事情上。 1. 一个页面是由很多个盒模型组成的，他们之间的间距距离和他们本身的长宽尺寸实现了所谓的页面布局，而区域与区域之间的空隙可以由很多种方式实现：display指定的布局、padding内边距、margin外边距、position定位、占位元素等等都可以实现这些，你从一开始就要对这个页面涉及到的所有元素有个数，然后决定到底采用哪种方式实现布局排版，最好统一风格，尽量用一个属性来做这件事。半路上想到哪种用哪种、哪种顺手用哪种就会导致在一些情况下你网页的内容塌陷、错位、堆在一起后回看之前代码时要好半天才能找出问题和对应的解决方案。 2. 对于页面用哪种长度单位，你也要有个规划，px、百分比、vh/vw各有各的特点，但你要尽量做到统一使用某一个单位，除非遇到特殊情况再去换单位。不然在你因为某些原因需要修改某一父容器的尺寸时，子元素的位置和大小会出现很多意想不到的变化、改起来非常麻烦。 3. class属性的适用场景真的不多，页面做到一半你就会发现一大堆的元素都去要给他们在添加一个id来满足他特有的样式需求。不过这说到底还是初期规划不够细致的锅，但也不全是，我的一个个人观点：能用id尽量用id，class的适用场景很明确且不是很多。 4.响应式。这件事一定要在你写css甚至写html前就要想清楚。要预判对于各种尺寸的窗口、缩放比例下，你的网页会变成什么样，之后再提前拟好解决方案，说穿了就是要提前想好让你的网页如何适应各种屏幕长度。然后根据这个方案去写html、写css，不然你会在最后做响应式、小屏幕适配的时候发现要改甚至删除或添加很多东西，而且你的一些改动还会带来连锁反应，代码和你的思路都会变得乱糟糟的。 之后是在写代码的过程中(其实有两点很多前人都总结过了，我在这里算是重提)： 1.写css样式的时候一定要有特定的书写风格，先写定位布局样式如position、display这些，然后再写尺寸相关的样式如margin、padding、width、height、box-sizing这些，之后是元素内容相关的样式如background-image、font-size、text-decoration、transition、filter这些，最后写某一类标签特有的如list-style。这样会极大的提高你代码的可读性，回看的时候会非常清晰。如果属性很多，还可以在这四个部分之间换行。 2.提取公共样式。对于一个组成网站的多个页面，有很多东西是公共的，比如顶部导航栏和底部的备案信息。确保每个页面这些部分的代码都是一样的(尤其是id和class)，然后把样式写进一个css文件种，命名为common。这样做一方面是提升代码复用，另一方面是在写其它部分的样式时和这部分分开，看着就没那么乱了。 3.善用浏览器的F12。代码量达到一定程度后，我们要分析问题或者找出哪条语句导致了现在这样的页面效果时，回看之前的代码十分麻烦。你可以直接在浏览器按F12审查页面元素然后选中某个元素就可以看到它的样式信息，看到它的某一属性都被哪些选择器设置过。 关于响应式： 实现响应式的思路有很多，这里写几个我用着觉得不错的。 1.利用媒体查询，在特定尺寸下更改当前的布局或呈现的内容。举个例子就是如果顶部有两个导航条，当窗口宽度小于一定像素时(比如940px这样)，然后第二个导航条的内容显示不下了，你可以把第二个导航条的部分内容挪到第一个里，具体实现就是这部分内容在两个导航条里都写，然后第一个的display设为none，第二个该怎么设置怎么设置，然后尺寸变小的时候用媒体查询把第二个导航条里这部分内容的display属性改成none，把第一个里面的设成正常值。如果屏幕继续变小(比如660px这样)，第二个导航条里的内容又显示不下了，可以把第二个导航条里的东西都隐藏，做成一个点击后下拉的抽屉式菜单。这种方法实现响应式苹果用的非常多，可以去他们的官网学学。这种方式的实现效果式最好的，又漂亮体验度又好，但是实现起来写代码的人很累，要多写很多东西。 2.利用百分比或vh/vw做长宽单位，尽量让所有涉及长度、尺寸的都用这种单位，这样的话无论页面怎么缩放，都是同比例变化。这样做的效果比上面差很多，但在某些场景下还是可以一用。 3.最好的响应式，就是不做响应式 。直接最外层父容器尺寸全部以确定的像素为单位，然后页面缩小之后内容全都拘在一起，放大之后需要划滚轮；或者JS写一个监听，页面放大的太厉害之后(比如窗口宽度小于400px这样)，让页面什么都不显示或者只呈现一个logo、导航栏这样，再附加一个提示信息“过渡的放大会毁掉你的浏览体验”，告诉用户把屏幕弄成正常大小；再或者干脆就不做，用的人发现放太大了，尺寸太小了看不了，自己就把窗口调回去了。   话归正题，上面说的其实不无道理，为什么不在一开始的时候，就安排一个合理的、恰到好处的布局，使得无论怎样调整窗口或缩放内容都不会或尽可能少的变形呢？ 两个小技巧： 1.介绍一个不用js实现轮播图的思路。 核心思想：通过类型为radio的input确认用户点击，让轮播图内容作为input的兄弟元素，用:checked伪类选中被点击的input进而选中作为兄弟元素的轮播图内容，通过改变能够影响其位置的属性实现轮播效果。 Step1：假设展示4个页面作为分支主题。让四个页面不换行的呈现在一个容器内，宽度为100%，超出容器的子内容隐藏。 Step2：在HTML种写四个label和四个input作为这个容器的兄弟元素。然后四个label分别用for绑定四个input，input的type为radio，记得input一定要写name，不然是无效的。 Step3：假设第四个label的id为r4，四个页面中最左边的页面id为slide1，通过“#r4:checked~slide1”伪类就可以在点击第四个label时选中轮播图的第一个画面，将他的margin-left属性设置为-300%，即可实现四个并排的分支主体共同左移，于是前三个页面隐藏，第四个页面就呈现出来了，再给四个分支页面加上transition属性。 2.利用padding-bottom属性实现div的固定长宽比。   width属性写成百分制，参考父元素的长度。   height属性写0。   padding-bottom属性写成百分制，参考的也是父元素的长度。   控制两个百分数的比例即可实现固定长宽比。