CSS单位
em
- 为css的相对单位，参照其父元素的fontSize；等于父元素的fontSize*em值
- 如果没有设置父元素的font-size；则参照html元素的font-size值；没有html则参照浏览器一般字体大小值16px。
rem
- 即：root em
- rem也是css中相对单位，参照html的fontSize，没有则参照16px。
- html:fontSize:12px ; fontSize:2rem==>24px
style{
html{font-size:24px}
div{height:10rem,width:10rem}
}
//div的宽高则都是240px，rem基于html的fontSize来的。
<html> <div>123</div> </html>
margin-top
注意点：即使div高度为0，设置了margin-top，上边距会占据文档流。
margin重叠
上下两个元素的margin重叠
-
场景：
- 如果上面的div元素设置了margin-bottom;下面的div元素设置了margin-top：会造成margin重叠，文档流两个div元素之间只会显示较大值得那个margin-bottom或margin-top的空间。
-
上下两个元素的margin重叠的用处
- 一个页面，多个上下排列的模块，中间有间隔的，做统一的设置
-
代码
.wrap{ width: 100px; height: 100px; border: 1px dashed red; font-size: 10px; } .test1{ background-color: pink; width: 100px; height: 100px; margin-bottom: 20px; } .test2{ background-color: yellow; width: 100px; height: 100px; margin-top: 20px; }<div class="wrap"> <div class="test1">margin-bottom: 20px;</div> <div class="test2">margin-top: 20px;</div> </div> -
效果演示：
父元素的上边距重叠
-
说明：
- 父元素和子元素都设置了marginTop则会marginTop重叠，显示高的那个
-
场景
- 场景1：
- 父元素没有marginTop，第一个子元素marginTop:20px
- 则父元素的上边距为20px；
-
场景2：
- 父元素marginTop：20px，第一个子元素marginTop:20px
- 则父元素的上边距为20px；margin重叠了
-
场景3：
- 父元素marginTop：20px，第一个子元素marginTop:30px
- 则父元素的上边距为30px；取比较大的那个值
-
场景4：
- 父元素没有marginTop，第一个子元素marginTop:20px
- 父元素有文字内容
- 则父元素没有上边距
- 场景1：
-
解决方法
- 父元素不设置marginTop，使用paddingTop，通用
- 子元素的marginTop高于父元素的，父元素设置overflow:hidden解决
- 浮动元素使用clear:both
- 使用first-child方法，:first-child写在子元素上
.wrap{
margin-top: 20px;
//去除第一个子元素的样式
.item1:first-child{
margin-top:0;
}
//子元素
.item1{
margin-top:20px;
width: 100%
}
}
line-height
- 属性值
- 百分比
- 根据父元素字体大小计算
- 先计算父元素的行高，然后让子元素继承
- 行高=16px*150%=24px，子元素继承行高
- em
- 根据父元素字体大小计算
- 先计算父元素的行高，然后让子元素继承
- 行高=16px*1.5em=24px，子元素继承行高
- 数字
- 根据子元素字体大小计算
- 行高30px*1.5=45px
- 百分比
- 案例
<div style="line-height:150%;font-size:16px;background-color: rosybrown;">
父元素内容
<div style="font-size:30px;background-color: sienna;">
Web前端开发
</div>
</div>
background
背景图片
background-image
值：
- url('') 引入本地图片
理解：
- 设置元素的背景图片
默认显示效果：
- 如果图片太大，会充满整个元素，元素的背景可能只会看到图片的一部分
- 如果图片大小比元素小，则repeat排列在元素的背景
- 背景图像在不占据border-box，占据content-box/padding-box，background-color之上
background-repeat
-
理解：
- 应用在background-image的图像上，设置图像的平铺效果，就像平时设置电脑桌面图片一样
-
值：
- repeat 【默认】
- no-repeat 【如下图所示，是了no-repeat之后的效果，background-color出来了】
background-position
理解：
- 应用在background-image背景图像上
- 控制背景图像在背景区域中的起始显示位置
CSS1:
- 2个参数值
- 默认值0%，0%；
- 第一个横坐标，第二个值纵坐标【背景区域的左上角】
三种值方式：
-
xpos ypos: 关键字定位，应用的对齐规则；
- xpos：
- left【图像的左边与与元素的左边对齐】
- center:背景图像的中心与元素的中心对齐
- right；
- xpos：
-
ypos：top|center|bottom
-
x% y%： 百分比定位，应用坐标轴定位 x = (对象的宽度 - 图像的宽度) * x%;y = (对象的高度 - 图像的高度) * y%; 3 . x y：表示使用长度值定位，应用坐标轴定位；是将背景图像的左上角，放置在对象的背景区域中（x, y）
-
值可以省略
- 有一个值：则第二个值是center；
- 有两个值：第一个是水平偏移【长度或百分比】，第二个垂直偏移【长度或百分比】
- 所有值得方式都是简写成长度值得方式，默认0px 0px
-
相关写法：
- background-position: left 10px top 15px; 【表示图像在左上角区域，且左边偏移10px，上边偏移15px，可以简写成10px 15px】
- background-position: left top ; 【表示图像在左边边区域，偏移0px，上边偏移0px，可以简写成0px 0px】
- background-position: left 10px ;【可以简写成：0px 10px】
background-size
- 作用：设置背景图片大小；
- 初始值：
- auto auto
- 以背景图片的比例缩放背景图片
- 属性值：
- 一个值：则是宽度值，高度值为auto
- 两个值：则第一个值为宽度值，第二个值为高度值
- 属性值的类型：
- 百分比：相对于背景区域的百分比
- 长度：具体的带单位的长度
- 关键字：
- auto：以背景图片的比例缩放背景图片;如果背景图片比背景区域大很多，如果不设置background-size，则只会看到图片的左上角区域；
- contain
- cover
背景图片代码和显示效果：
| 代码 | 含义 |
|---|---|
| 不设置background-size;则使用默认值background-size:auto auto | 不缩放背景图片。如果背景图片和背景区域大小不一致：1. 如果背景图片大，则背景区域只会显示图片的左上角部分，2. 如果背景图片小，则背景区域全部包含了图片，出现空白处，显示背景颜色 |
| background-size: 100% 0.7rem; | 设置背景图片的具体高度为0.7rem |
| background-size: 3rem; | 设置背景图片的宽度为3rem，高度为auto（根据背景图片的比例缩放图片） |
| background-size: 100% 0.7rem; | 设置背景的具体高度为0.7rem |
| background-size: cover; | 与contain正相反，图片覆盖了背景区域 1.背景图片被缩放 2. 保留了图片的宽高比，不会被压扁 3.图片宽或高会被剪裁 4. 如果图片和背景区域大小不一致，4.1）如果图片大与背景区域且全部的图片的高覆盖了背景区域，则图片的宽度被剪裁，如果图片全部的宽覆盖了背景区域，图片的高会被剪裁 4.2）图片小于背景区域，则背景图片会全部填满背景区域 |
| background-size: contain; | 与cover正相反，图片包含在背景区域中，出现空白处 1. 背景图片会被缩放 2. 保留了图片的宽高比，不会被压扁 3. 图片不会被剪裁 4. 如果图片和背景区域大小不一致：情况1：如果图片大与背景区域，会出现空白处，显示背景颜色。 情况2：背景图片小与背景区域区域，则背景图片会全部填满背景区域 |
根据案例查看样式效果
比如：
- 背景图片比元素大
- 元素大小：200*100；
- 背景图片500*200；
代码：
//样式
<style>
.wrap{
color: blue;
width: 200px;
height: 100px;
border: 10px dashed red;
background-color: yellow;
background-image: url('./img/500.png') ;
background-repeat: no-repeat;
}
</style>
//元素
<div class="wrap">
<div>元素大小：200*100</div>
<div>背景图片：500*200</div>
<div>background-color: yellow</div>
</div>
原图片：
不设置background-size的情况下,取默认值
- 没有设置background-size；则默认background-size: auto auto; 即图片原始大小，不会进行缩放。
不设置background-size，查看样式为：
设置background-size: cover
- cover英文意思：覆盖，盖住；指背景图片覆盖了整个背景区域 特点：
- 背景图片被缩放，图片的宽或者高覆盖背景区域
- 图片不会被压扁，保留了原来的宽高比
- 图片的宽或者高被剪裁，如果图片高覆盖的背景区域，图片宽度就会被剪裁 查看效果：
设置background-size: contain
-
contain英文翻译：包含,容纳；指的全部的背景图片包含在整个背景区域中 特点：
-
图片被等比例缩放
-
保留了图片的宽高比
-
图片全部被包含在背景区域
-
图片和背景区域大小不同时，背景区域会出现空白处，显示背景颜色
-
不会被剪裁，永远显示完整的背景图片
查看效果：
背景图片与背景区域一样大小
效果：背景图片填满背景区域
背景图片小于背景区域：设置cover
背景图片宽度等于背景区域，但高度 效果
背景图片小于背景区域：设置contain
-
案例
- 背景区域宽度等于图片
- 高度大于图片
-
效果：
- 图片为原来尺寸
- 背景图片完整的包含在背景区域中
- 背景区域高度出现空白处，，显示背景颜色
-
案例
- 背景区域宽度大于图片
- 高度等于图片
-
效果
- 图片为原来尺寸
- 背景图片完整的包含在背景区域中
- 背景区域宽度出现空白处，显示背景颜色
- 案例
- 背景区域宽度和高度都大于图片
- 效果
- 图片被等比例放大
- 背景图片完整的包含在背景区域中
- 背景区域宽度大于高度，所以宽度完整的被图片填满，高度出现空白处
- 此处规律MDN解释：最大的包含背景区域
背景图片和渐变同时存在
方法1： 使用background写组合属性
//写法
.bar {
width: 50px; height: 100px;
background-image: gradient(...);
/* 不推荐 */
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
/* 可行 */
background-size: 25px 50px;
background-size: 50% 50%;
}
案例：
.wrap{
color: blue;
width: 700px;
height: 400px;
border: 1px solid;
background: url('./img/500.png') 100% 100% no-repeat ,
linear-gradient(90deg, rgb(173, 165, 90) 0%, rgba(73, 71, 110, 1) 100%);
background-position: left top;
}
效果演示：
方法2 将背景图片写在伪类上
- 渐变写在元素上
- 背景图片写在元素伪类上
.product {
width: 6.86rem;
height: 4.48rem;
background: linear-gradient(90deg, rgb(173, 165, 90) 0%, rgba(73, 71, 110, 1) 100%);
&::before{
position: absolute;
content: ' ';
left:0;
top: 0;
width: 100%;
height: 100%;
background-image: url('./img/4.png') no-repeat;
/* 注意点 */
background-size: 50%;
background-position: top center;
}
}
注意点： 如果UI给的背景图片比元素尺寸大，则使用background-size: 50%; 缩小图片的比例来适配元素宽高
手写CSS：background案例
不规则卡片效果
<style>
main {
padding: 80px 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.progress-outer {
width: 60%;
height: 12px;
border-radius: 8px;
/* background-color: pink; */
overflow: hidden;
position: relative;
}
.progress-enter {
height: inherit;
background: rgba(180, 160, 120, .2);
}
.progress-bg {
width: 60%;
height: inherit;
border-radius: 6px;
background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,
#D9CFBB 0, #D9CFBB 75%, #C3B393 0);
background-size: 16px 16px;
animation: panoramic 20s linear infinite;
}
@keyframes panoramic {
to {
background-position: 200% 0;
}
}
</style>
<main>
<div class="progress-outer">
<!--更好的扩展-->
<div class="progress-enter">
<div class="progress-bg"></div>
</div>
<!-- <span>60%</span> -->
</div>
</main>
radial-gradient函数
属于background-image属性，border之下，background-color之上
理解
radial-gradient() 径向渐变函数，CSS函数创建一个图像，该图像是由从原点发出的两种或多种颜色之间的逐步过渡组成的，他的形状是圆形或椭圆形 重复的径向渐变函数：repeating-radial-gradient()
滚动条
<!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>
::-webkit-scrollbar {
display: none
}
</style>
</head>
<body>
<div style=" width:200px; height: 200px; overflow-y: scroll;">
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
ckidzhh<br />
</div>
</body>
</html>
面试题
如何实现左侧宽度固定，右侧宽度自适应的布局
小提示：这个问题面试官会要求说出几种解决方法。
