1.29 未知高度元素垂直居中、垂直居中的实现方式有哪些？
- 绝对定位+css3 transform:translate(-50%，-50%)
.wrap{
position:relative;
}
.child{
position: absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
- css3 的flex布局
.wrap{
display:flex;
justify-content:center;
}
.child{
align-self:center;
}
- table布局
<div class="wrap">
<div class="child">
<div>sadgsdgasgd</div>
</div>
</div>
<style>
.wrap{
display:table;
text-align:center;
}
.child{
background:#ccc;
display:table-cell;
vertical-align:middle;
}
.child div{
width:300px;
height:150px;
background:red;
margin:0 auto;
}
</style>
1.30 图片垂直居中
1. 使用flex实现图片垂直居中
<div class="flexbox">
<img src="1.jpg" alt="">
</div>
<style>
.flexbox{
width: 300px;
height: 250px;
background:#fff;
display: flex;
align-items:center
}
.flexbox img{
width: 100px;
height: 100px;
align-items: center;
}
</style>
- 利用Display: table;实现img图片垂直居中
<div class="tablebox">
<div id="imgbox">
<img src="1.jpg" alt="">
</div></div>
<style>
.tablebox{width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}
</style>
- 用绝对定位实现垂直居中
<div class="posdiv">
<img src="1.jpg" alt=""></div>
<style>
.posdiv{
width: 300px;height: 250px;
background: #fff;
position: relative;
margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}
</style>
1.31 文本元素居中
- 水平居中：text-align
- 垂直居中：line-height 和height设置一样
- 多行文本垂直居中
- 父级元素高度不固定（padding-top和padding-bottom）
- 父级元素高度固定 （vertical-align:middle +display:table-cell ）
1.32 CSS实现一个等腰三角形
主要是通过把宽高设置成0，边框宽度设置宽一些，设置其中三个边透明，只留一个边显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
div {
width:0px;height:0px;margin:100px auto;
border-left:80px solid transparent;
border-right:80px solid transparent;
border-bottom:138.56px solid #A962CE; /*--三角形的高--*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
1.33 画 0.5px 的直线
-
使用scale缩放
<style> .hr.scale-half { height: 1px; transform: scaleY(0.5); } </style> <p>1px + scaleY(0.5)</p> <div class="hr scale-half"></div> <!-- Chrome/Safari都变虚了，只有Firefox比较完美看起来是实的而且还很细，效果和直接设置0.5px一 样。所以通过transform: scale会导致Chrome变虚了，而粗细几乎没有变化。但是如果加上transform�origin: 50% 100%： --> .hr.scale-half { height: 1px; transform: scaleY(0.5); transform-origin: 50% 100%; } -
线性渐变linear-gradient
<style> .hr.gradient { height: 1px; background: linear-gradient(0deg, #fff, #000); } </style> <p>linear-gradient(0deg, #fff, #000)</p> <div class="hr gradient"></div> -
boxshadow
<style> .hr.boxshadow { height: 1px; background: none; box-shadow: 0 0.5px 0 #000; } </style> <p>box-shadow: 0 0.5px 0 #000</p> <div class="hr boxshadow"></div> -
viewport
<meta name="viewport" content="width=device-width,initial-sacle=0.5"> <!-- width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度 initial-sacle=0.5 缩放0.5 -->
1.34 移动端适配方案
- viewport 适配
<meta name="viewport" content="width=750,initial-scale=0.5">
<!--
initial-scale = 屏幕的宽度 / 设计稿的宽度
为了适配其他屏幕，需要动态的设置 initial-scale 的值
-->
<head>
<script>
const WIDTH = 750
const mobileAdapter = () => {
let scale = screen.width / WIDTH
let content = `width=${WIDTH}, initial-scale=${scale}, maximum�scale=${scale}, minimum-scale=${scale}`
let meta = document.querySelector('meta[name=viewport]')
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content',content)
}
mobileAdapter()
window.onorientationchange = mobileAdapter //屏幕翻转时再次执行
</script>
</head>
缺点：边线问题，不同尺寸下，边线的粗细是不一样的（等比缩放后），全部元素都是等比缩放，实际显示效果可能不太好
-
vw 适配（部分等比缩放）
- 开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标注是基于此宽度标注）
- 开始开发，对设计稿的标注进行转换，把px换成vw。比如页面元素字体标注的大小是32px，换成vw为 (100/750)*32 vw
- 对于需要等比缩放的元素，CSS使用转换后的单位
- 对于不需要缩放的元素，比如边框阴影，使用固定单位px
<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum�scale=1, minimum-scale=1"> <script> const WIDTH = 750 //:root { --width: 0.133333 } 1像素等于多少 vw document.documentElement.style.setProperty('--width', (100 / WIDTH)) </script> </head> rem适配
弹性盒适配（合理布局）
1.35 link 和 @import 的区别
- 引入的内容不同
link 除了引用样式文件，还可以引用图片等资源文件，而 @import 只引用样式文件
- 加载顺序不同
link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载
- 兼容性不同
link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持
- 对 JS 的支持不同
link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持
1.36 iframe有什么优点、缺点?
优点：
- iframe能够原封不动的把嵌入的网页展现出来。
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内
容的更改，方便快捷。 - 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以
增加代码的可重用。 - 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
- iframe会阻塞主页面的onload事件；
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。会
产生很多页面，不容易管理。 - iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会
分散访问者的注意力，用户体验度差。 - 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理
iframe中的内容，所以使用iframe会不利于搜索引擎优化（SEO）。 - 很多的移动设备无法完全显示框架，设备兼容性差。
- iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
