了解css | 青训营笔记

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

以下内容是我在之前学习完css后再次在青训营学习中发现自己不是很了解或者容易遗忘的内容

一、属性选择器 当input框中由disabled（禁用）时，属性选择器的写法如下：

<input type="text" disabled="disabled" />
input[diasbled]{
            background-color:#0A246A;
            border:none;   
            }

当有特定值时，写法如下：

<input type="password" />
input[type="password"]{
             background-color:#0A246A;
             border:none;  
}

以下代码表示a标签href以#开头的选中

a[href^="#"]{
    color:#0A246A;  
}

以下代码表示a标签以.jsp结尾的选中

a[href$=".jsp"]{
    width:200px;
    height:200px;
}

二、颜色-HSL

H：Hue 色相（H）是色彩的基本属性，如：红色，黄色等；取值范围0-300
S：Satruration 饱和度（s）是指色彩的鲜艳程度，越高越鲜艳；取值范围0-100%
L：Lightness 亮度（L）指颜色的明亮程度；越高的颜色越亮；取值范围0-100%
拓：alpha：透明度 范围0-1

三、服务器字体设置 @font-face用于定义服务器字体，开发者可以在用户未安装字体时，使用任何字体

@font-face{
    font-family:字体名称；
    src:字体路径；
}

四、显示继承

*{
box-sizing:inherit;
}

默认代码中所有box-sizing继承父类属性

五、inital设置初始值

background-color：inital 默认背景色为初始值

六、box-sizing：border-box

指定宽高包括border和padding

七、white-space换行

当值为normal时 默认换行
当值为nowrap时 强制不换行
当值为pre时 换行保留和原本代码一样
当值为pre-wrap 一行写不下就会换行
当值为pre-line 需要合并空格，但保留换行

八、当文字超出文本框时

  overflow:visible 显示出所有文字
  overflow:hidden 隐藏超出的文字
  overflow：scroll设置滚动
  
  长单词超出容器：overflow-wrap：break-word使之换行
  

九、块级元素

生成块级盒子，如：body，p，ul，li，main，div等
display：block

十、行级元素

生成行级盒子，内容分散在多个行盒中
如：span，em，strong，cite，code等
display：inline

十一、flexibility

可以设置子项弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

十二、display：grid

display：grid是元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项站那些行/列