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            第三层，⽂本属性（记忆为字体+⽂borderbox
本）: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的交互效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。