css笔记1
问：css如何引用外部字体？问：png格式的图片和svg格式的图片有什么区别？
答：
<h1>里客云资源站</h1>
<h2>www.likeyunba.com</h2>
<link rel="stylesheet" type="text/css" href="font.css">
font.css如下：
@font-face {
font-family: 'fontnameRegular';
src: url('fontname.ttf') format('truetype');
}
/*其中fontName替换为你的字体名称*/
h1{font-family: fontnameRegular}
答：png格式可以通过css手段导致图片变形，svg格式不管你怎么设置css代码，他的宽高比例是一致的
问：<div class="div">我是div</div>
<div class="div">我是div</div>
.div{
float: left;
font-size: 16px;
transform: scale(0.5);
}
div设置了transform: scale(0.5);让字体小于font-size的值也就是小于16px，但是它占据的宽度仍然跟font-size为16px时一样，为什么呢？
答：设置transform: scale(0.5);以后，还是普通文档流，只能给div设置绝对定位、脱离文档流来解决了
问：如何实现同等宽度下，文字宽度均等分布？
答：
<div class="div1">我是</div>
<div class="div1">我是我是</div>
.div1{
width:100px;
background: #f00;
text-align-last: justify;
}
注：text-align-last这个属性，在safari浏览器里是不支持的，要兼容safari浏览器的方法：
.container {
background-color: gray;
width: 200px;
text-align: justify;
}
.container:after {
content: '';
width: 100%;
display: inline-block;
}
原文链接：https://blog.csdn.net/isaisai/article/details/51744952
问：怎么让pc端网站兼容移动端？
答：
使用bootstrap的栅格系统
在<head>标签里使用<meta name="viewport" content="width=device-width">
不写绝对宽度，把pc端的px改成rem
学习了flex布局以后，我好像项目里却很少去用，以后要在不需要兼容低版本ie的项目里多用flex布局
问：我有1个需求：就是给一篇文章，默认只显示2行，用了下控制台截图的这个方法，当<div>下面只有文字时，是可以的，如果<div>下面还有<div>就不行了，这个需求，谁有解决思路吗？
答：给个高度，
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding:10rpx 20rpx;
line-height:70rpx;
height:140rpx;
如果需要展开文章内容，把高度设置成height:auto;就行了
IE7不支持box-sizing: border-box，怎么办？
引入boxsizing.htc，然后在使用了box-sizing: border-box的地方，加上：behavior: url("boxsizing.htc")；就可以让IE7支持box-sizing: border-box
设置DOM元素的样式时，要按照这样的顺序写：
width，height，padding，border，margin，然后再写color等熟悉
这样写，看上去很规矩，按照样式的重要性来写
我发现，DOM元素的默认背景颜色是透明色的，也就意味着，设置了position:fixed;的div元素，虽然层级更高，但是默认可以看到底部的文字，因为设置了position:fixed;的div元素的背景颜色默认是透明色，div上没有文字的地方，自然就因为透明而显示底部的文字了
以前写过这么一句笔记：能用padding的就不要用margin了，我现在发现，什么时候必须用margin才能实现呢？至少我没有遇到过这种情况，一般我看多嵌套一层<div>就能用padding代替margin
平时写代码的时候就要注意，尽量不写有兼容性问题的代码，比如尽量不用margin，margin在支付宝小程序里问题很多
今天遇到一个需求：就是<video>标签的宽高要撑满整个屏幕，我百度了，没有实现我的需求，我后来在chrome浏览器这里看到这个默认属性：
video{object-fit:contain;}
我一看，是不是修改其中某个属性，能够实现我的需求呢？
然后在chrome浏览器里试了下，写了object-fit，发现有几个值，我把每个值都试了一下，发现object-fit: cover;基本能够满足我的需求，所以，遇到百度仍然找不到答案的时候，就找下浏览器的默认样式，或许可以找到一些线索来帮助自己实现需求
做项目的时候，尽量只用1个css文件，写的时候，页面1的html标签加1个id，比如'page1'，css里写#page1 div{},页面2就写#page2 div{}，这样有利于维护
问：元素竖向的百分比设定是相对于容器的高度吗？问：某个功能我只会使用es6的语法实现，不知道怎么用es5的语法实现，怎么办？
答：当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
问：怎么实现右边固定，左边自适应？
答：
html：
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
</div>
css：
.div1{
flex-grow:1;
background: #ff0;
}
.div2{
width: 100px;
background: #f00;
}
问：在不使用浮动的前提下，让1个div的宽度等于其内容区的宽度，怎么实现？
答：width: fit-content;
问：怎么让pc端网站兼容移动端？
答：
使用bootstrap的栅格系统
在<head>标签里使用<meta name="viewport" content="width=device-width">
不写绝对宽度，把pc端的px改成rem
注意:当面试官这么问你时,你要知道,让pc端网站兼容移动端这种做法是只能用在简单的网站上,复杂的网站不适合,复杂的网站必须pc端和移动端分离,比如pc端的淘宝是https://www.taobao.com/,移动端的淘宝是https://h5.m.taobao.com/
