理解css | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第6天

这是对之前青训营css课程的笔记

在课程中我们知道css的工作方式如下

对于选择器的一些我没见过的使用方法

指定特定属性值的写法

1这样可以指定type为password的输入框,2可以指定type为p开头的是输入框，3可以指定type为ord结尾的输入框

<input type="password"/>

<style>
    input[type="password"]{
    
    }//1
    input[type^=p]{
    
    }//2
    input[type$=ord]{
    
    }//3
</style>

选择器的组合方法

如何保存文本中的连续空白

可以使用white-space属性 设为pre将不会合并空白遇到br才会换行

被多个选择器选择到的css优先级

通过计算选择器的特异度来选择特异度高的选择器来显示css， 一个id当成100，一个类当成10 ，一个标签当成1这样来比较大小

Flex布局

父元素在主轴的设置

父元素其子元素在主轴的排列方式

父元素其子元素在侧轴的排列方式

如何实现0.5px的边框

通过tranform来实现

       transform: scale(0.5,0.5);
       transform-origin:0 0 ;

Grid布局

grid布局是一种二维的布局方式，flex是在一维上的布局

通过display:grid来创建grid容器

属性grid-template-columns来设置列的宽度

属性grid-template-rows来设置行的高度

属性grid-row-gap来设置行的间距

属性grid-column-gap设置列的间距

grid布局提供了fr这样的关键字 这样就十分方便 比如一个块的宽是1fr 第二个是2fr那么后者则是前者的两倍

在平时我对于grid使用也是十分少通过这次课程觉得这是十分方便强大的布局