css知识总结和实践_css实践知识点-CSDN博客

本文链接：https://blog.csdn.net/qq_36836277/article/details/108647909

前言

1.分析布局和组成元素
2.整体样式
3.分模块样式

1.@import

全局定义路径后，@import引入样式文件

 @import '~styles/varible.styl'

~ 必须要有

2.div中的搜索框自适应

div中的搜索框自适应
重点：规定父元素的宽度，input 100%，然后display：inline-block

3.知识集合

1.css的伪元素实际运用

4.浮动元素垂直居中

浮动元素设置水平和垂直居中

5.flex布局的兼容性问题【没有完全理解和遇到】

flex布局的兼容性问题

6.css3新增伪类

7.盒模型

在这里插入图片描述

8.百分比

字体百分比，如果想比12px小怎么办
为什么不建议将 font-size 设置为 12px 以下？如果一定要设置为 12px 以下要怎么做？
在这里插入图片描述
 css百分号问题

9.link 和 @import 的区别

link 是 HTML 标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等；@import 是 CSS 提供的语法，只有导入样式表的作用。
加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载。
@import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link 标签作为 HTML 元素，不存在兼容性问题。
可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import 的方式插入样式。
link 引入的样式权重大于@import 引入的样式。

但是在组件化开发的时候，就只能用@import来引入

10.css优化和提高性能

11.vue-loader源码

12.css的解析规则

在这里插入图片描述

LVHA

css中可以继承的属性

在这里插入图片描述

line-height的理解

1.可以用来设置单行文本的垂直居中
2.用图解真正理解line-hight的概念
问题：1.如果是多行文本的垂直居中，就考虑用元素的垂直居中，
2.那么能不能使用到其他元素中呢
那么这个元素的属性必须是inline或者inline-block 才有效。
3.如果没有heigjt，行高会用line-heihgt给撑起来。
4.如果牵扯到单位的计算，那么都以自身元素的fontsize为基准
如果想居中的文字在linline里面，那么就使用
5.line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            height: 60px;
            width: 400px;
            border: 1px solid red;
            font-size: 14px;
            line-height: 60px;

        }
        .font{
            /* height: 35px; */
            border: 1px dotted black;
            line-height: 2;
            /* display: inline; */
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <!-- <a href="logo.jpg" download="logo.jpg">下载图片</a> -->
    <div class="box">
        <span class="font">
            天上的星星去哪儿了abcdefjhi
        </span>
    </div>
</body>
</html>

css的基线和行高

css的基线和行高
1、一般默认，文字和字母都是以基线为低的。
2、包括1个内容区和两个空白边框
3、区别于行距
4、元素默认的对齐方式是沿着基线对齐

class和id的区别

1.css渲染的权重值不同，id的优先级高于class
2.id唯一，class可以重复。
3.id有锚点功能
4.id给js用，class给css用
相同点：1.他们都是dom元素的属性值。
2.
如果id重复呢呢？
也没有影响，因为浏览器容错效果好，但是

BFC

点击学习
1.如何解决外边距重叠的问题
（1）使用BFC

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        border: 1px solid red;
        padding: 10px;
        width: 500px;
       // overflow: hidden;
       display: inline-block; //也可以实现
    }
    .wraper{
        overflow: hidden;
    }
    p{
        width: 100px;
        height: 100px;
        border: 1px solid blue;
    }
    p:nth-child(1){
        margin-bottom: 10px;
    }
    p:nth-child(2){
        margin-top: 20px;
    }
</style>
<body>
    <div class="container">
        <div class="wraper">
        <p>
            我的  
      </p>
    </div>
      <p>
          你的
      </p>
    </div>
</body>
</html>

2.padding-box

position的定位原点

3.z-index的堆叠上下文

（1）z-index的生效情况
总结: 只有position的值为relative/absolute/fixed中的一个,Z-index才会生效。
(2)父子元素的z-index有效果吗
没有效果，子元素永远在父元素上面
(3)当z-index是正数时，它们的子元素【不管是不是auto和z-index】与外面的元素比较时，都用父元素的比较，和兄弟用自身的比较。
（4）当z-index为auto时，如果它和它的兄弟进行比较，用父元素的z-index
（5）当z-index为auto时，如果它的儿子和外界的元素进行比较时，儿子单独创建了一个堆叠上下文。
（6）z-index: auto 不会创建新的堆叠上下文，

4.css堆叠上下文

css堆叠上下文
（1）border>background
(2)正z-index > 浮动元素 > 内联元素 > 浮动元素 > 块级元素 > border > background > 负z-index
冒泡和捕获只会在父子元素中有，在堆叠上下文中没有

5.base64有那么多的缺点，为什么还要使用base64.

6.不同移动端的兼容属性

7.0.5px的像素

浏览器不同的本质

1.浏览器内核不同

2.设备像素不同

多行文本溢出的效果

点击查看

事件的冒泡和传递会受z-index影响吗

冒泡和捕获只会在父子元素中有，在堆叠上下文中没有
如果不存在父子关系，而是堆叠，那么点击高层次的元素，覆盖在地下的低层次元素事件不会被触发

常见的元素隐藏方式

1.是否占据空间位置
是：visibility:hidden , opacity:0; position:absolute【脱离文档流】，transform:scale(0,0)
否：display：none【渲染树没有渲染】
2.是否会触发绑定事件
position:absolute：和堆叠次序有关
是：visibility:hidden, opacity:0; transform:scale(0,0)
否：display：none
3.其他
z-index

12.CSS3 @font-face

先定义-》后使用
定义：指出名称和来源
：1.定义的方式类似于对象
2.定义的时候，要区分设备和浏览器
使用；font-family：名称

13.满屏品字样式

满屏品字学习

14.css画三角形

纯css画各种三角形
 三角形绘制原理
 css画扇形
1.主要是border
2.利用width和color，两个属性，可以绘制各种不同形状的三角形
3.带边框的三角形或者箭头:利用绝对定位和伪元素。两个三角形重叠，然后是父子元素关系，决定定位的位置是padding
4.绝对定位的定位点是padding，所以yellow的定位参考点是蓝色三角形的顶点

15.读屏器

16.css hack 原理及常用 hack

1.因为不同浏览器对CSS的支持和解析结果不一样，所以编写针对不同浏览器的css样式
2.hack本质是一个过程，就是针对不同的浏览器写css的过程。
3.

17.浏览器前缀

1.-ms-:兼容ie浏览器
2.-moz-:兼容Firefox
3.-o-:兼容opera
4.-webkiit 兼容Chrome和Safari

反过来记忆，思考什么时候有用。

18.ie浏览器兼容性问题解决

ie浏览器兼容性问题解决
 解决方案2
IE6
属性级：_color：red
*color:red

19.display position float 之间的关系

display position float 之间的关系
 学习链接2

20document.defaultView

document.defaultView

21 圣杯布局

22 双飞翼布局

两边定宽、中间自适应、中间栏放在文档流前面优先渲染

calc（）

  使用calc（）时候注意box-sizing：border-box注意