css补漏笔记
作者：互联网
一.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