标签：flex 补漏 笔记 像素 视口 默认 font css size
一.text-align 只有对行内级元素生效
justify 两端对齐 [ text-align: justify ]
[ 最后一行呢就正常不生效,你要强制生效 [ text-align-last : justify ]
二. word-spacing 字与字之间的间距
word-spacing : 30px ;
三. 2个斜体的区别 :
font-style : italic; (字体本身有设置过斜体时,显示的斜体)
Font-style : oblique (强制斜体)
四. 强制继承性 inherit 例子 : border:inherit;
五. 盒子阴影 [可以设置多个阴影]
box-shadow : x轴 y轴 模糊度 [扩散度-可以不写] 颜色 [inset 内扩散,可不懈];
box-shadow : 10px 10px 10px [10px] black [inset]
六. 文字阴影 [可以设置多个阴影]
text-shadow : x轴 y轴 模糊度 颜色
七. 行内非替换元素 : span a
width , height: 不生效
padding / border :左右生效,也占据空间 ; 上下看起来生效,但是不占据空间
margin : 左右生效,上下不生效
八. background-size
background-size : contain; 不压缩,拉伸宽度[保持宽高比]
cover : 全屏,部分看不见 [这个用的比较多]
100% 100% : 变形
九. 内容滚动,背景跟着滚动
background-attachment : loacl ;
默认为 : scroll ,还有一个值 : fixed
十. nth-child 和 nth-of-type 的区别 :
必须第三个且得是div
Div:nth-child(3){}
第三个div
Div:nth-of-type(3){}
十一. 字体图标 ：
1.去字体图标库下载字体 【 注意要免费，不收钱，最好让ui设计 】
默认下载下来的是ttf字体
2.使用字体
1.将字体放到对应的目录中
2.通过@font-face来引入字体，并且设置格式
3.使用字体
注意 ： @font-face 用于加载一个自定义的字体
@font-face{
font-family : "hyfont01";
src : url(./fonts/AaJianHaoTi-2.ttf)
}
Body{
font-family:"hyfont01"
}
十二. position
将position设置为absolute/fixed , 任何元素都可设置宽高(宽高默认由内容决定)
Sticky 是 相对于最邻近的滚动视口
十三.flex
1.flex-direction : 修改主轴的方向(默认横)
row : 从左到右(默认)
row-reverse : row的反转 (从右到左)
column : 列变成主轴的方向 (从上到下)
column-reverse : 列主轴进行反转 (从下到上)
2.flex-warp : 换不换行
nowrap : 不换行 (默认)
wrap : 换行
wrap-reverse : 换行 (从下往上排)
3.justify-content : 对齐方式
flex-end : 对齐反一个方向
center : 居中对齐
space-between : 两边贴边
space-around : item之间距离相等,距离两边是半个item的距离
space-evenly : item之间距离相等,距离两边是整个item的距离
4.order 给flex-item排列的顺序,越小排得越前
order : 3;
5.flex-shrink ： 给flex-item压缩的；
（默认为1，就是会压缩；0就不会） 得flex-container有空位
6.flex-item ： 给flex-item拉伸的；
（默认为0） 得flex-container有空位
十四.css函数
var : 使用css定义的变量
calc : 计算css值,通常用于计算元素的大小或位置
blur : 高斯模糊效果
gradient : 颜色渐变函数
自定义属性 : -- 例如 : html{ --main-color:#000 } .box{color : var(--mian-color)}
calc(100%-100px)
<div class='box'>
<img src='../11.jpg>
<div>
.box{
filter:calc(10px) 偏差越大,图片越模糊
}
background-image : linear-gradient(to right ,red,blue) //to right 就是从左到右 //to right top 从左下角到右上角 //45deg 角度
十五 . 媒体查询
1.@import 和 媒体查询 结合使用
例子 : @import url(./css/body_bgc.css)(max-width:800px) 当最大为800的时候才引入
2.link + 媒体查询
例子 : <link ref="stylesheet" media="(max-width:800px)" href="./css/body_bgc.css" >
3.@media 方法
@media (max-width:800px) {
写上...
}
4. Js方法
使用 Window.matchMedia() 和 MediaQueryList.addListener()方法来测试和监控媒体状态
5.多个条件
小于800,大于500
@media (max-width:800px) and (min-width:800px) {
写上...
}
十六.手机端
em ： 相对于自己的font-size，如果自己没有设置，那么会继承父元素的font-size
rem ： 相对于html的font-size
像素单位常见的有三种像素名称：
1.像素（也叫物理像素）
指的是 显示器上的真实像素，每个像素的大小是屏幕固定的属性，屏幕出厂以后就不会改变了
显示器或者手机的时候，提到设备分辨率就是设备像素的大小
例如 ： iphonex的分辨率 1125 * 2436 指的是设备像素
2.设备独立像素（逻辑像素）
如果面向开发者，我们使用设备像素显示一个100px的宽度，那么在不同屏幕上显示效果会是不同的
开发者针对不同的屏幕很难进行比较好的适配，编写程序必须了解用户的分辨率来进行开发
所有在设备像素之上，操作系统为开发者进行抽象，提供了逻辑像素的概念
比如 ：你购买了一台显示器，在操作系统上是 1920 * 1080 设置的显示分辨率，那么无论你购买的2K，4K的显 示器，对于开发者来说，都是 1920 * 1080 的大小
3.css像素
它默认情况下的等同于设备独立像素（逻辑像素）
screen.width 得到电脑屏幕的宽度
DPR（逻辑像素/物理像素） ： 可以通过window.devicePixelRatio 获取到
PPI ：一英寸=2.54厘米，1英寸放多少个物理像素。100PPI ： 一英寸放100个物理像素
1.视口 viewport
在浏览器中，我们能看到的就是视口
fixed就是相对于视口来进行定位的
在pc端，我们是不需要对视口进行区分，因为我们的布局视口和视觉视口是同一个
在移动端不一样 ： 你的布局视口和你可见的视口不太一样
这是因为移动端的网页窗口往往比较小，可能会希望一个大的网页在移动端可以完整的显示
所以在默认情况下，移动端的布局视口是大于视觉视口的
2.移动端视口划分 ；
A:布局视口 （viewport pc就只有这个视口） 默认情况下，一个pc端在移动端端显示
1.它会按照宽度为980px来布局一个页面的盒子和内容
2.为了显示可以完整的显示在页面中，对整个页面进行缩小
我们把980px布局的这个视口，叫布局视口（布局视口默认宽度980px）
B:视觉视口 （visual）
手机可见的视口，就叫做视觉视口
为了让布局视口一致，那么久产生了 <meta name='viewport' content='width=device-width' >
设备宽度和布局视口缩放比例1.0 <meta name='viewport' content='width=device-width' initial-scale=1.0>
禁止手动缩放 <meta name='viewport' content='width=device-width' initial-scale=1.0 user-scalable=no>
有些浏览器紧张手动缩放无效，所以还要再加2个 <meta name='viewport' content='width=device-width' initial-scale=1.0 user-scalable=no minimum-scale=1.0 maximum-scale=1.0 >
C:理想视口 （ideal）
十七.移动端适配的方案 ：
lib-flexible.js [更改html的fontsize的值]
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
1.rem转换 ：
第一种 ： 用webpack的postcss-pxtorem
第二种 ： less/scss
.pxToRem(@px){
result: 1rem * (@px / 37.5); //这里的37.5，是看你的设计稿的
}
p{
font-size:.pxToRem(14)[result] ;
}
第三种 ： vscode的插件（ px to rem ）【默认除以75，就是用设计图的750的】-----用的最简单
如何去配置除以75的这个值 ？
点击插件的扩展设置，里面的。root font size 这里就可以设置了（要37.5还是多少，自己设置）
2.vw 转换:
目前更推荐使用vw，vh（rem的已经5年前的了，现在不更新了，vw，vh兼容性更好了）
第一种 ： 用 webpack的 postcss-px-to-viewport-8-plugin
第二种 ： less/scss
@vwUnit：3.75。（这里对应的是375的设计稿）
.pxToVw（@px）{
result:(@px / @vwUnit) * 1vw
}
.box{
font-size:.pxToVw(16)[result]
}
第三种 ：vscode的插件和上面一样 ---用的最简单
标签：flex,补漏,笔记,像素,视口,默认,font,css,size 来源： https://www.cnblogs.com/qd-lbxx/p/16423025.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。