CSS基础网页布局的思路详解

CSS基础续集2
    常用的CSS样式
        常用的CSS布局样式
            对齐样式总结
                文字垂直居中：让line-height设置的高度和盒子的高度一致即可。原理到line-height样式那里有。外边距和内边距同样也可以实现文字垂直居中的效果。一般使用第一种。行高就是容纳文本的高度，也就是内容的高度，是不包含上下内外边距和边框的。如果我们想用行高实现文本垂直居中，那么测量的行高（内容的高度）就要比文字本身的高度要稍微大一点，这样文字垂直居中的效果才明显。
                块级盒子水平居中：使用外边距margin:?px auto;即可。上下边距不管，左右边距设置为auto即可。不过使用前提是块级盒子必须设置宽度。
                行内或者行内块元素水平居中：给其父元素添加text-align:center;即可。
            CSS3新增的盒子样式
                圆角边框Border-radious样式，作用是可以把我们的盒子从矩形变成圆角的矩形。作用原理：用n个圆形去和该盒子相切，用多少个圆形取决于多少个圆形能把该矩形的四个角都相切完。
                    1.如果原来的盒子是正方形，想切出圆形的话，只要把用于相切的圆设置为宽度和高度一半（或者直接设置为50%也可以，实质只用了一个圆去相切）。
                    2.如果原来的盒子是矩形，想切出圆角矩形，那只要把相切圆的半径设置为高度的一半即可。
                盒子阴影box-shaow样式。值有5个
                    h-shaow:设置阴影在水平的位置
                    v-shaow:设置阴影在垂直的位置
                    blur:设置阴影的模糊程度（实质就是透明程度，只有正值）
                    spread:设置阴影的大小(阴影大小一般取负值，以方便不超过本身盒子的大小，看起来美观)
                    一般我们都是综合去设置，如：box-shaow:10px 10px 10px -4px black(或者rgba(0,0,0,.3))
        CSS样式书写顺序，大大提高CSS代码的可阅读性。
            从上到下分为四层
            第一层，布局定位属性（记忆为display+浮动+定位+隐藏）：display/float/clear/position/visibility/overflow(建议display第一个写，毕竟关系到标签的特性)
            第二层，自身属性(记忆为宽高+盒子+背景):width/height/margin/padding/border/background
            第三层，文本属性（记忆为字体+文本）:font/color/text-align,line-height等文本相关属性
            第四层，其他属性(CSS3):border-radious/box-shaow等
    网页布局思路总结
        1.先确认页面的可视化窗口的宽度，以便下面所有元素宽都是对齐的。
        2.从上到下分析该网页的布局思路（从上到下是用标准流来实现的。）
        3.分析完从上到下后，再从左到右（用浮动来实现）的分析该网页的布局思路。提示：如果元素本身是行内元素，那他自己本身的特点就是从左到右，就不用浮动实现了
        4.最后再是定位实现(把元素放在父盒子内部的任意位置)。
        记忆为先从上到下再从到又，最后加上定位满足那些要把元素放在父盒子的内部的任意位置的需求。
        非常重要的原则，网页布局结构是最重要的，先写好结构再写CSS样式。
        经过学成网案例的输出毒打得出经验。要先分析清楚每一行盒子的布局（标准流还是浮动）结构，一行一行的去写（其实一行不就是一个块级盒子吗）。然后在一行当中，一个一个盒子的去写（一个一个盒子的去写意思是写完该盒子全部东西，包括嵌套子盒子，也包括对应的所有样式。当然每一个盒子外面的思路顺序都是先结构后样式。）所以综上所述：网页布局的思路就是先分析清楚每个盒子的布局结构（标准流还是浮动），分析清楚每个盒子的布局结构后，然后再对应的去一个盒子一个盒子的去写的HTML和CSS即可。一个盒子一个盒子的去写保证了思路清晰，结构和样式一般都不会乱。
            CSS的书写顺序很关键哈，因为盒子非常多，样式也非常多，如果不按顺序写，很容易思考漏掉一些关键样式，后面调式起来就很麻烦。一定要按布局样式->自身样式->文本字体样式->CSS3新增样式的顺序去写。
            测量尺寸的顺序也很有讲究，否则那么多距离也非常容易乱。顺序为：内容高宽->内外边距->边框
            再次被毒打，经验，一定要分析清楚结构再写样式，结构乱了，样式只会越来越乱，最后GG，调不过来的。
            一定区分开那几个长度以及他们的练习，文字的宽高，内容的宽高（我们平时给的width和height仅仅是内容宽高，而不是元素（盒子）的宽高，要想看元素（盒子）的宽高还得去看盒子模型那里的具体参数），元素的宽高。
            书写CSS结构时是子代就写子代选择器，是后代就写后代选择器，如果全写后代选择器，后面结构和样式多了，容易产生CSS样式继承而导致的CSS层叠性，覆盖掉了我们想要的效果。
            一定会用chorm调试器，一个一个盒子的去调试，左边是元素，右边是样式，样式分为三类（从上至下），自己写的样式，继承过来的样式，盒子模型。
            关于元素是否要宽高的问题：如果该盒子是用于存储文字的，因为文字的数量不确定，导致宽高不确定，所以不适宜给宽和高，而是让该文字随着文字的数量自适应大小变化即可。如果文字那里网页有固定距离（也就是看到了文字换行，文字自动换行意味文字一定有固定的宽，因为只有宽不够文字才会自动换行。）。如果不是文字元素，给不给宽高就看影不影响布局来判断。
            如果盒子被挤到了下一行，一般都是那个行对应的空间不够，然后你可以用调试去看这一行的空间是否足够。
            记住行高是可以被继承下来的，这一点经常被忽略导致布局距离错误。
            牢记块级元素，行内元素，行内块元素（设置浮动是会让元素转变成行内块元素的）的默认宽高。避免因为他们的默认宽高影响布局。还有一些标题h标签，段落p标签，他们都有自己默认的内外边距，如果不需要的话可以手动清除，避免影响布局。
            对比我之前网页课设，最明显的就是之前没有层次感，而现在做的网页利用背景颜色和每一个盒子都有自己特有的背景颜色啊，文字颜色等，就感觉每一块都是层次分明（因为颜色形成了鲜明的对比），大大凸显层次感，给人观感较好。还有缺乏很多JS的交互效果。