html与css基础

最新推荐文章于 2024-03-22 19:14:59 发布

V________

最新推荐文章于 2024-03-22 19:14:59 发布

阅读量136

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/V________/article/details/108522662

版权

web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

8.11总结
1.常见的行盒：
大部分文本类元素：span abbr em I cite strong b，图片和音视频
2.文字必须放置在行内元素中（使其自动换行），否则会自动生成匿名行盒
音视频会生成行盒
3.空白折叠的规则仅适用于行盒内部与行盒之间
4.可使用水平方向上的padding与margin设置内容间的距离
5.由于每个标签在每个HTML中独占一行，在页面中就会产生一个空格，标签为了消除空格，需要在产生空格的父元素中设置font-size:0
6.默认情况下行盒设置宽高，垂直方向上的margin border padding无效，但可见
7.非可替换元素与可替换元素元素都是行盒，但后者可设置宽高
8.object-fit：fill 无视宽高比例缩放，充满设置尺寸
Contain：保持宽高比例缩放，以宽高最小值，可显示完全
Cover：保持宽高比例缩放，以宽高最大值，可能不显示完全
None：不进行任何缩放
9.可使用line-height设置一行的高度，是指基线到基线的距离，推荐2：按当前元素的字体大小计算，计算前的值被子元素继承 200%==2em
10.行盒定位体系一定是常规流，若行盒浮动或者绝对定位，则自动变成块盒
11.块盒不考虑浮动元素尺寸，但行盒要考虑浮动元素与常规流尺寸，所以可以实现文字环绕
12.包含行盒的块盒，可使用text-align调整行盒在他内部的对齐方式
13.行盒之间的对齐方式，可使用vertical-align调整图片与其前后文字的对齐方式
行盒默认使用基线对齐（包括图片）
13. 行块盒，display：inline-block，排列方式按行盒，尺寸按块盒，
可以包含块盒，行块盒在其内部会创建BFC
14. <video src="" autoplay controls（播放控件） loop（循环播放） muted（静音）>
autoplay controls loop muted是布尔属性：属性值与属性名相同
类似
15. 简单动画称transition，是CSS属性，在一定时间内，从一个值变到另一个值
并非所有属性都支持过渡效果，例如，display从none到block，背景边框，颜色，尺寸，透明度通常支持，该属性只能做一个样式变到另一个样式，多次改变用transform
transition: all linear 2s;
是transition-property: all;transition-duration: 2s; transition-timing-function: linear;的简写
过渡的效果：快慢
匀速：transition-timing-function: ease;
由慢到快transition-timing-function: ease-in; 由快到慢transition-timing-function: ease -out; 由慢到快再到慢transition-timing-function: ease-in-out;
8.12总结
1.css对盒子进行变形属性：transform
缩放比例：scale(2)
1不变，小于1缩小，大于1放大
其中，若想要放大后不影响周边元素，可为其建父级盒子，设置overflow：hidden
倾斜：skew( 值deg)正值向左斜，负值向右斜
旋转：rotate( 值 deg)正值顺时针，负值逆时针
transform：rotate() scale() 缩写
rotateX，rotateY，与transition一起运用看效果，其中transition放在
2.设置盒子旋转中心点：transform–origin：X轴位置值 Y轴位置值
未设置时，中心点为当前元素中心点，一旦设置，则以元素最左上点为(0，0)
p {
width: 0px;
height: 0px;
margin: 50px;
border: 10px solid transparent;
border-left-color: red;
transform-origin: 5px 10px;
}
p:hover {
transform: rotate(180deg) scale(2);
}
3.创建动画书写格式
如果起始位置与结束位置相同，则可省略结束位置100%的设置(因为总会回到原点)
div:hover>section {
background-color: sandybrown;
animation: F70 10s infinite;

}
@keyframes F70 {
0% {
top:0px;
left:0px;
background-color: seagreen;
/* border-radius: 20px 40px; */
}
30% {
width: 50px;
height: 50px;
top:0px;
left:300px;
background-color: aqua;
border-radius: 50%;
}
60% {
width: 100px;
height: 50px;
top: 100px;
left:300px;
background-color: slateblue;
border-radius: 25px;
}
90% {
top: 100px;
left:30px;
background-color: violet;
}

}

4.引用animate动画效果，在百度下载已有的animated.css，引入文章后
在元素中添加class=“animated 动画名称(animated.css中的动画名称)” 使用效果

8.11总结
1.常见的行盒：
大部分文本类元素：span abbr em I cite strong b，图片和音视频
2.文字必须放置在行内元素中（使其自动换行），否则会自动生成匿名行盒
音视频会生成行盒
3.空白折叠的规则仅适用于行盒内部与行盒之间
4.可使用水平方向上的padding与margin设置内容间的距离
5.由于每个标签在每个HTML中独占一行，在页面中就会产生一个空格，标签为了消除空格，需要在产生空格的父元素中设置font-size:0
6.默认情况下行盒设置宽高，垂直方向上的margin border padding无效，但可见
7.非可替换元素与可替换元素元素都是行盒，但后者可设置宽高
8.object-fit：fill 无视宽高比例缩放，充满设置尺寸
Contain：保持宽高比例缩放，以宽高最小值，可显示完全
Cover：保持宽高比例缩放，以宽高最大值，可能不显示完全
None：不进行任何缩放
9.可使用line-height设置一行的高度，是指基线到基线的距离，推荐2：按当前元素的字体大小计算，计算前的值被子元素继承  200%==2em
10.行盒定位体系一定是常规流，若行盒浮动或者绝对定位，则自动变成块盒
11.块盒不考虑浮动元素尺寸，但行盒要考虑浮动元素与常规流尺寸，所以可以实现文字环绕
12.包含行盒的块盒，可使用text-align调整行盒在他内部的对齐方式
13.行盒之间的对齐方式，可使用vertical-align调整图片与其前后文字的对齐方式
行盒默认使用基线对齐（包括图片）
13.	行块盒，display：inline-block，排列方式按行盒，尺寸按块盒，
可以包含块盒，行块盒在其内部会创建BFC
14.	<video src="" autoplay controls（播放控件） loop（循环播放） muted（静音）></video>
autoplay controls loop muted是布尔属性：属性值与属性名相同
    <audio src=""></audio>类似
15.	简单动画称transition，是CSS属性，在一定时间内，从一个值变到另一个值
并非所有属性都支持过渡效果，例如，display从none到block，背景边框，颜色，尺寸，透明度通常支持，该属性只能做一个样式变到另一个样式，多次改变用transform
transition: all linear 2s;
是transition-property: all;transition-duration: 2s; transition-timing-function: linear;的简写
过渡的效果：快慢
匀速：transition-timing-function: ease; 
由慢到快transition-timing-function: ease-in;  由快到慢transition-timing-function: ease -out;  由慢到快再到慢transition-timing-function: ease-in-out;  
8.12总结
1.css对盒子进行变形属性：transform
缩放比例：scale(2) 
1不变，小于1缩小，大于1放大
其中，若想要放大后不影响周边元素，可为其建父级盒子，设置overflow：hidden
倾斜：skew( 值deg)正值向左斜，负值向右斜
旋转：rotate( 值 deg)正值顺时针，负值逆时针
transform：rotate() scale()   缩写
rotateX，rotateY，与transition一起运用看效果，其中transition放在
2.设置盒子旋转中心点：transform–origin：X轴位置值  Y轴位置值
未设置时，中心点为当前元素中心点，一旦设置，则以元素最左上点为(0，0)
p {
    width: 0px;
    height: 0px;
    margin: 50px;
    border: 10px solid transparent;
    border-left-color: red;
    transform-origin: 5px 10px;
}
p:hover {
    transform: rotate(180deg) scale(2);
}
3.创建动画书写格式
如果起始位置与结束位置相同，则可省略结束位置100%的设置(因为总会回到原点)
div:hover>section {
    background-color: sandybrown;
    animation: F70 10s infinite;

}
@keyframes F70 {
    0% {
        top:0px;
        left:0px;
        background-color: seagreen;
        /* border-radius: 20px 40px; */
    }
    30% {
        width: 50px;
        height: 50px;
        top:0px;
        left:300px;
        background-color: aqua;
        border-radius: 50%;
    }
    60% {
        width: 100px;
        height: 50px;
        top: 100px;
        left:300px;
        background-color: slateblue;
        border-radius: 25px;
    }
    90% {
        top: 100px;
        left:30px;
        background-color: violet;
    }
    
}

4.引用animate动画效果，在百度下载已有的animated.css，引入文章后
在元素中添加class=“animated 动画名称(animated.css中的动画名称)” 使用效果