页面布局和设备适配

2024-11-17 技术教程

1.让一个div在页面中水平垂直居中

1>position:absolute; (当页面出现滚动条的时候，用fixed) top:0; left:0; right:0; bottom:0; margin:auto;2>position:absolute； top：50%； left:50%; translate:(-50%,-50%)3>display:flex; justify-content:center; align-items:center;

2.左边固定，右边滚动

div.left{ width:200px; height:300px; background:#ff0; float:left;}div.right{ height:300px; background:#f00 overflow:hidden;}

3.双飞翼布局

div.left{ width:200px; height:300px; background:#ff0; float:left;}div.right{ width:200px; height:300px; background:#ff0}div.main{ height:500px; background:#f00; overflow:hidden; //可以触发bfc 块级格式化上下文可以解决子元素浮动父元素高度塌陷问题渲染规则：浮动元素也参与高度计算}

4.文字内容多

640的设计稿需要在320的设备上去显示，因为苹果手机4的dpr:2
vw:视窗宽度的百分比 1vw = 设备宽度的百分之一
如果640的设计稿需要在320的设备上显示，那么1vw = 320的百分之一，即1vw = 3.2px

rem:根据html标签的font-size计算

em：根据父元素的font-size计算

ie6双边距问题（给浮动的元素添加display:inline）ie6(overflow:hidden;fontsize:0;)

页面插入图片默认向下撑大3像素问题 (img:display-block/vertical-align:top)

超链接加载的图片在ie中都会解析出边框问题将img设置 border:none;

图片垂直居中 img(vertical-align:middle;) span(display:inline-block;vertical-align:middle;overflow:hidden;width:0;height:100%;)

移动端1px边框解析时会显示2px问题的解决方式，用缩放去实现

如果！Doctype html 不存在会发生什么 ie8以下会触发怪异盒模型，怪异盒模型的实际宽高就是我们设置的width/height(会将border padding计算在宽高里)

img标签中alt 和 title属性都有利于seo优化，alt是当图片不存在或者路径错误的时候显示alt内容 title是鼠标放在图片上时显示title内容

你写页面的时候会从哪些方面考虑页面优化？
1.超链接最好用文本，不同flash动画或图片热区图片alt和title都要添加，对于一些没有意义的小图也要添加 alt = "" title ="" 图片整合（雪碧图）
2.代码结构清晰