学习记录无数问(css篇)

一: 行内元素、行内块元素和块级元素?

行内: span, a，em，label，strong等
和其他元素在一行,设置宽高无效,上下外边距无效,可以设置内边距,左右外边距，,只能包含其他行内元素.

行内块元素: img，input，video，audio等
可以设置宽高,外边距

块级: div，p，ul，li，h1-h6，table，form等
总是新行开始,高度,行高都可控,可容纳其他元素.

二: 盒模型?

标准盒模型: 宽度=content + padding + border + margin;
box-sizing: content-box: 内容(content)会充满整个盒子,如果有边框,内边距就会溢出盒子;
box-sizing:border-box: 盒子包含了内边距(padding)和边框(border),更方便计算;

三: css 单位?

px: 相对长度,相对于屏幕分辨率;
em: 参考父元素的font-size 继承,浏览器默认字体是16px;
rem: 相对于根元素,可以做到只修改根元素就成比例的修改整体字体大小;
%: 相对长度,相对于父元素的百分比;

四 css选择器有哪些?优先级?

css选择符:id选择器 ,类选择器(class), 相邻选择器(div + p),子选择器(ul > li),通配符选择器(#),标签选择器(div p a ul 等),后代选择器(div a),属性选择器(a[ href ]),伪类选择器( a:befor);
优先级比重: 标签选择器(p div 等):1 ; class(类):10; id:100; 内联样式:1000

1.!import声明的样式优先级最高,如果冲突再进行计算;
2.如果优先级相同,则选择最后出现的样式(覆盖之前的样式);

排序:!import > 内联样式(直接写着HTML内的样式) >id选择器 > class选择器 > 标签选择器 > 通配符选择器 >继承 > 浏览器默认;

五: 已知如下代码，如何修改才能让图片宽度为 300px ？

<img src="1.jpg" style="width: 480px !important;" alt=""/> //此句代码不可修改

<style>
img{
    max-width: 300px;     /*方法一*/
    transform: scale(0.625,0.625);   /*方法二  (0.625是通过 300 / 480 计算出来的缩小比例)*/
    zoom: 0.625;   /*方法三*/
    /*方法四:*/
    box-sizing: border-box;
    padding: 0 90px;
  
}
</style>

六: 比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景?

1. opactity:0: 会占据原有空间,不显示但可以点击;重建图层，性能较高
   场景: 自定义图片上传按钮,可以跟transition搭配
   2, display:none: 不占空间,不能点击,会回流操作 性能开销较大
   场景: 显示出原来这里不存在的结构
   (以上两种效果是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。)
2. visibility:none: 会占据原有空间,不显示也不能点击,是重回操作 比回流操作性能高一些,是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
   场景:显示不会导致页面结构发生变动，不会撑开;

七: BFC及其运用?

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建 BFC 的方式有：

1. html 根元素
2. float 浮动
3. 绝对定位(position的值为absolute 或fixed)
4. overflow 不为 visiable
5. display 为表格布局或者弹性布局

BFC 主要的作用是：
清除浮动,防止同一 BFC 容器中的相邻元素间的外边距重叠问题;

除此之外还有IFC(内联格式上下文);GFC(网格布局格式化上下文),当元素display值为grid时;FFC(自适应格式上下文):当display值为flex或inline-flex时会生成自适应容器;

八: css导入方式:内联,外联,页级?

1. 内联: 写在HTML标签内的css样式;
2. 页级: 写在head标签里的样式;
3. 外联: 通过link引入样式文件,@import也可以引用,但一般用link;

----: link 与 @import的区别:
link: 主要用来引用css和网页图标,指示告知搜索引擎网页间的关系;引入放置顺序无要求,无论放哪里都是一次性加载,一起优化,渲染;

@import:
引入方式:
可以在一个css文件内引入其他样式文件,一次性调用,方便管理维护;引入放置顺序无要求,但是放置在哪里就从哪里加载,即先加载数据,再加载样式,可能会出来内容没有样式的情况;

九: css优化,提高性能的方法有?

1. 避免后代选择符,链式选择符;
2. 避免过度约束,避免 !import,可以选择其他选择器;
3. 使用紧凑语法,减少不必要的命名空间;
4. 避免不必要的重复,近可能精简规则.合并不同类里的重复规则;

十: 如果需要手写动画,最小时间间隔是多久?为什么?

一般显示器默认频率是60HZ,即每秒刷新60张图片,所以最小间隔为: 1/60 * 1000ms =16.7ms

十一: png ,jpg, gif, webp,svg这些图片格式?使用情况?

png: 便携网络图片,是一种无损压缩位图文件格式,优点是压缩比高,色彩好,大多地方都可以用;

jpg: 是一种针对相片使用的失真压缩法.是一种破坏性压缩.在色调及颜色平滑变化做得不错,压缩比很高,一般被用来储存和传输照片的格式;

gif: 是一种位图文件格式,以8位色重现真色彩的图像,体积小,支持动画,但只能处理256种颜色;

webp: 是谷歌在2010年推出的图片格式,压缩率只有jpg的2/3 ,大小比png小了45%,压缩率更高,但兼容性不好,目前只谷歌和opera支持;

svg: 尺寸小,压缩性比gif强,可伸缩,可以在任何分辨率被高质量的打印,svg文件是纯粹的XML,可以被非常多工具读取和修改(比如记事本);

一些常用小方法:

1. 怎么让Chrome支持小于12px的文字?

p{
font-size:10px;
-webkit-transform:scale(0.8);
}
 /*如果是行内元素需加一个:display:block;*/

2. chrome 隐藏滚动条?

   ::webkit-scrollbar {
        display: none;
    }

3. chrome修改input输入框palceholder样式?

::-webkit-input-placeholder{
    /*你想要的样式*/
    color: red;
}

4. chrome input焦点黄框去除?

input { outline : none ;}

5. img等比例自动缩放?

/* 按父元素宽度自动缩放,并保持图片原本长宽比*/
    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

6. 设置页面固定,溢出滚动?

   .header { /*固定头部高度*/
        height: 50px;
    }

    .content {/*余下的用高度100% 减去固定高度,就是可以滚动的高度*/
        height: calc(100% - 50px);
        overflow-y: auto;
        
    }

7. 画一个三角形?

    span {
        border: 20px solid transparent;
        border-top-color: saddlebrown; /* 方向朝向哪边更改方位就可以啦*/
    }

    /* 放大input选择框? */
    input {
        zoom: 180% / / 放大180% 倍
    }

    /* 防止鼠标放在对象上发生闪烁? */
    input {
        pointer-eventa: none;
    }

    /* 去除a标签下划线? */
    a {
        text-decoration: none;
    }

    /* 文字溢出显示三点*/
    p { /*单行文本*/
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    p { /*多行文本,调整 -webkit-line-clamp 的值就能实现在第n行[…].*/
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    /* 去除ul 圆点*/
    ul {
        list-style-type: none;
    }
     /* input样式*/
     input{
      /*去除边框*/
          border: 0;
          outline: none;
          background-color: rgba(0, 0, 0, 0);

            color: red;/*输入文字、光标颜色*/
            -webkit-text-fill-color: blue;/*输入文字、placeholder颜色*/
            caret-color: red;/*光标颜色*/
        }
/*  图标和文字横向居中对齐*/
image{ vertical-align:middle;  }
/* div标签的btn点击样式*/
 div:active{
      background: #cccccc;
      top:2px; //向下移动效果
    }

8. 内容横向滚动,去除横向滚动条:

  div::-webkit-scrollbar {
    display: none;  
  }

    overflow: scroll; //溢出滚动
    -webkit-overflow-scrolling: touch;  //滚动回弹效果,(非标准)
    scroll-behavior: smooth; //溢出滚动模式:丝滑滚动

9. input 输入框从右侧开始输入

direction: rtl; // 这个属性规定文本的方向 / 书写方向

10. 旋转图片角度

image {
		transform: rotate(-90deg);
	}

11. 绝对定位的元素居中

.Box{
	position: absolute; 
	left: 0; 
	top: 0; 
	right: 0;
	bottom: 0;
	 margin: auto;  
}

小程序:

/* 去除小程序按钮样式,设置透明按钮,一般用在icon代替按钮的情况*/

.button::after {
  border: none;  //去除边框
  padding: 0;  //如果图标放在icon内被挤压,可以将padding设为0
}