HTML|CSS3学习知识点笔记

说明：此文档仅用于作者日常代码问题查询，可供任何人交流学习，全文截图自原作者(B 站千锋前端)的视频内容

HTML

• 选择器权重

🔺文本属性

网页浏览器支持的字体

列表属性

背景属性

• background-size 控制图片大小
• 【bg-size】cover属性 是等比例放大并拉伸铺满，可能会使图片丢失部分
• 【bg-size】contain属性 把图片拓展到最大尺寸，使其宽度和高度完全适应内容区域，但是可能会铺不满会留白

复合写法：

顺序是可以变换的

浮动属性

清浮动

清除浮动效果

溢出

文本省略…

定位

定位的层级

层级默认是后来者居上
z-index：层级数值（大小比较）

box2的层级大于box1，box2在box1上面显示
z-index的前提是设置了定位

如何将一个行类元素转换为块元素

水平垂直居中

相对于整个页面

子在父盒居中

浮动float与定位absolute的区别

锚点

精灵图

浮动元素高度自适应

块元素的高度自适应用height：auto即可
可浮动元素呢？

利用了伪元素.box::after来实现（最优）

H5布局标签

新增表单能力

Datalist

其他表单属性

锚点

CSS3

属性选择器

伪类选择器

X:nth-child里的n可以是数字，也可以是2n或者2n+1这样的代数式，还可以是even和odd这样的字符，even代表偶数，odd代表奇数

文本阴影

shadow里面有四个值，从左到右分别是：
水平方向位移
竖直方向位移
模糊度
颜色

支持同时加多个阴影，中间用空格隔开

盒子阴影

引用外部字体

怪异盒

弹性盒

是一种新的布局方式
display：flex

更改主轴方向

将主轴方向改为竖直方向排列

row行排列，row-reverse反向行排列

更改主轴对齐方式

justify-content 主轴对齐方式，
align-items 侧轴对齐方式

折行

当一行已经显示不下的时候，可以从下一行继续显示，如果不设置，则会在弹性盒的一行里面一直堆叠挤压

项目对齐方式

align-self项目自我对齐方式

此时，如果将div的高度删除，也就是不设置高度
则对于stretch（拉伸）则会充满整个格子

占满剩余空间

去除页面中滚动条

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

多列布局

/*每列同高*/
column-fill:balance; 
/*调整列宽度*/
column-width:500px;
/*跨列*/
column-span:all;

响应式

横竖屏

        @media screen and (orientation:portrait){
            div{
                width: 33.3%;
            }
        }

        @media screen and (orientation:landscape){
            div{
                width: 20%;
            }
        }

orientation:portrait 检测到是竖屏显示时
orientation:landscape 检测到是横屏显示时

页面大小

        @media screen and (min-width:1000px) {
            body{
            background-color: yellow;
             }
        }

        @media screen and (max-width:1000px) and (min-width:500px) {
            body{
                background-color: red ;
            }
        }

        @media screen and (max-width:500px){
            body{
                background-color: green ;
            }
        }

rem,em

渐变

线性渐变

background:linear-gradient(to right,red,orange);

to right 是方向，还可以是top,botton,left,right，也可以是top left,top right等
red，orange是从red渐变到orange。
可以多种颜色渐变，如:

background:linear-gradient(to right,red,orange,white,gray,...);

background:linear-gradient(15deg,red,orange);

支持渐变角度。

径向渐变

 background:radial-gradient(lightblue 20%,lightgreen 60%);

含义：从div的20%到60%开始渐变（线性渐变也可以）
也可以，

 background:radial-gradient(lightblue,lightgreen);

同样，径向渐变也可以多个颜色。
如果在非正方形的div中

        .div2{
            width: 300px;
            height: 100px;
            border: 10px solid gray;
            margin-left: 5px;
            background:radial-gradient(blue,red); 
        }

此时，可以设置为圆形渐变

background:radial-gradient(circle,blue,red); 

其他形状

重复渐变

 background:repeating-linear-gradient(red,yellow 10%,green 20%);

background:repeating-radial-gradient(red,yellow 10%,green 20%);

过渡

transition:[属性][时间][速度][延迟]

属性：height、width等，可以用逗号间隔，如果需要全应用则可以all
除了 display:none / block属性

transition: all 1s linear 1s;

linear是匀速的意思

transition拆分：

平移

放大

改变放大中心点

默认情况下，scale放大从图形中心点，但是可以改为左上角或者右上角

变化中心点改为左上角

旋转

 transform: rotate(-150deg);   

倾斜

transform:skew(-30deg);

关键帧动画-属性

动画需要声明：

@keyframes [动画名字]{
	from{
	}
	to{
	}
}

然后引用

animation:动画名字 时长 动画方式 延迟 执行次数
infinite为无限次

多节点动画

steps

直接进行关键帧跳跃

animation: run 5s steps(60,end);
60代表60帧

3D

进入3D舞台

transform-style: preserve-3d;

另外，默认是2D舞台

transform-style: flat;

景深

网格布局

            grid-template-rows:200px 200px 200px ;
            grid-template-columns:200px 200px 200px ;

设置了三行三列，行宽200px，列宽200px。

            grid-template-rows:25% 25% 25% 25%  ;
            grid-template-columns:25% 25% 25% 25%  ;

四行四列

repeat重复

            grid-template-rows:repeat(4,25%) ;
            grid-template-columns:repeat(4,25%) ;

outo-fill自动划分

            grid-template-rows:repeat(auto-fill,25%) ;
            grid-template-columns:repeat(auto-fill,25%) ;

fr片段

fr是自适应的意思，假设外盒子宽高600px

grid-template-rows:100px 1fr 300px;
grid-template-columns:100px 1fr 300px;

1fr会自动计算为200px

grid-template-rows:100px 1fr 1fr;
grid-template-rows:100px 1fr 2fr;
grid-template-rows:1fr 1fr 1fr;

比例

最小最大

grid-template-rows:minmax(100px,200px) 200px 300px;

此时，只剩100px剩余空间，minmax只能取100

grid-template-rows:minmax(100px,200px) 200px 400px;

此时，空间不剩余，但是minmax最小依然会取100
同理，空间剩余超过200时，最大也只能取到200

auto

自适应合理划分空间

grid-template-rows:100px auto 200px;

间距

区域命名

指定特定区域合并

对齐方式

对齐方式的复合写法

项目属性

简写
从第2列开始第4列结束