页面布局相关问题

盒子模型

1.表格的细线边框
border-collapse:collapse表示相邻边框合并在一起
2.盒子边框会影响盒子的大小
解决方案：一是测量盒子的大小不去测量边框，二是测量的时候如果包含了边框，就用width/height减去边框
3.padding会影响盒子的大小
解决方案：为了保证盒子和效果图大小保持一致，就让width/height减去多出来的内边距大小
好处是：因为每一个导航栏里面的字数不一样多，我们不用给没一个盒子宽度了，就直接给padding值
但是如果盒子本身没有指定width/height的话，padding就不会撑开盒子的大小
4.块级盒子水平居中需要满足两个条件，一是盒子必须指定宽度，盒子左右外边距都设置auto
常见的写法是

margin-left：auto;margin-right:quto;

margin:auto;

margin:0 auto;

5.行内元素和行内块元素水平居中
给父亲添加text-align：center
6.外边距塌陷
外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题。（相邻块元素垂直外边距的合并）
1.父子关系（给父元素定义上边框或者给父亲定义上内边距或者是给父亲添加overflow：hidden）
2.兄弟关系（解决方案：只给一个盒子添加margin值）
如果同时有margin-top和margin-buttom的话，一正一负就会相加，两个负的就会取绝对值最大的，两个正的取最大
7.清除内外边距
网页元素带有很多默认的内外编剧，而且不同浏览器默认的也不一样，因此我们在布局之前，首先要清楚网页内外边距

*{
padding 0；
margin:0:}

注意：行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内边距（就算设置了，也不会起好的效果），但是转换成为了块级和行内元素就可以了。
8.圆角边框
border-radius：length;（这是一个缩写）
直接写法：border-radius：1，2，3，4
两个值，三个值都是可以的
分开写也可以是border-top-letf-radius
原理是圆与边框的交集形成圆角的效果
参数可以是数值或者百分比的形式
如果是正方形，设置为width或者height的一半，或者直接写成50%
如果是矩形，设置为高度的一半就可以做了
9.盒子阴影

box-shadow:h-shadow v-shadow blur spread color inset

h-shadow：必需的，水平阴影的位置，允许负值（正值往右走，负值往左走）
v-shadow：必需的，垂直阴影的位置，允许负值
blur：可选，模糊距离
spread:可选，阴影的尺寸
color：阴影的颜色
inset：将外部阴影（outset）改成内部阴影
默认的都是外阴影，但是如果是outset，不需要写，写了不会起作用
而且阴影盒子不会占空间，也不会影响其他盒子的排列
应用，在经过盒子的时候，设置阴影
10.文字阴影

box-shadow:h-shadow v-shadow blur color

页面布局思路

1.确认页面的版心（可视区）
2.分析页面中的行模块，以及每个行模块的列模块
3.每一行的列模块经常浮动布局，先确定没格列的大小，之后确定列的位置
4.制作HTML页面，是先有结构，后有样式，结构永远是最重要的

1.导航栏注意：
实际开发中我们不会直接用链接a，而是用li包含链接的做法
用处：li+a的结构更加的清晰
如果直接用a的话，搜索引擎容易辨别为有堆砌关键字的嫌疑，有被搜索引擎降权的风险，从而影响网站排名
导航栏可以不给宽度，后面可以加其他的文字，因为文字不一样多，最好给链接左右加padding撑开盒子，而不是指定宽度

2.button有边框，需要去掉
3.行内块元素，中间会有缝隙，需要浮动，就可以贴合了
4.如果给父元素加的盒子一行装不下，可以调节margin-right，让最后一个父元素的子元素的margin-right超出去

浮动

所有的元素都是可以浮动的，浮动元素具有行内块元素的特性，如果转换成了浮动元素，不需要设置block和inline-block，给宽高就可以了
清除浮动

display：table
此元素会作为块级表格来显示（类似

），表格前后带有换行符。
清除浮动
为什么要清除浮动
① 父级没高度。 ② 子盒子浮动了。 ③ 影响下面布局了，我们就应该清除浮动了。
清除浮动的本质是：清除浮动带来的影响，而且清除浮动之后，父盒子就会自动检测子盒子的高度，就不会影响下面的标准流了
策略是闭合浮动，将浮动的影响限制在父元素里面
方法：额外标签法，双伪元素，伪元素，overflow

额外标签法也称为隔墙法，是 W3C 推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如

，或者其他标签（如
等）。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
子不教,父之过,注意是给父元素添加代码
优点：代码简洁
缺点：无法显示溢出的部分

:after 方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站： 百度、淘宝网、网易等

双伪元素，给父元素添加
.clearfix:before,.clearfix:after {
content:"";
display:table;
}.clearfix:after {
clear:both; }.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等