§ 1.CSS的px,%,em,rem,vh,vw的区别:
在开发移动端的时候,需要适配各种机型,不同的机型的分辨率都是不一样的,我们需要一套代码,去适配不同的机型大小
在index.html文件里的head新增meta标签,width=device-width:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果不设置width=device-width,移动设备会按照默认视口的宽度去渲染,比如手机是375的屏幕,默认视口可能是800,1000,这样会出现横向滚动条,这样就有问题,所以我们需要设置一下,也就是把我们网页的宽度和设备的宽度是一样的,这样就不会出现横向滚动条以及内容被截断的情况
1.px:
px是固定的单位长度,一旦设置了就无法随页面的大小而适应改变
2.em:
em是相对长度定位,比px更具有灵活性,em的长度是相对于父元素计算的,需要注意的是,em存在继承效果:
1.如果使用em存在继承效果,每个元素都自动继承其父元素的字体大小
2.只要父级元素及上面一直有fontsize为em单位,则会一直继承
3.rem:
rem是css3新引进的一种度量单位,r = root,rem相对于根元素,也就是html的字体大小,比如给html设置一个标准值,比如是font-size为62.5%,那么1rem等于16px,12像素的大小就是12除以16等于0.75rem,14像素的大小就是14除以16等于0.875rem
4.vh / vw:
是指viewport,vh / vw是相对于视口的宽高进行控制的,比如屏幕375px,1wh就是3.75px,这样换算就非常简单
5.%百分比:
百分比是相对于父元素的
补充:
谷歌浏览器默认字体大小是16px,谷歌浏览器字体大小最小为12px,如果想要设置小于12px的字体,可以通过CSS3的transform的scale(),缩放方法来解决
§ 2.说一下CSS权重优先级
!important(无穷大) > 内联样式(1000) > id选择器(100) > 类选择器(属性选择器,伪类选择器)(10) > 标签选择器(伪元素选择器)(1) > 通配符选择器(0) > 继承(0)
§ 3.说一下CSS伪类,伪元素都有哪些
参考:www.w3school.com.cn/css/css_pse…
伪类选择器:
1.动态伪类
:link => 链接没有被访问前的样式效果
:visited => 链接被访问后的样式效果
:hover => 鼠标悬停在元素上面时的样式效果
:active => 点击元素时的样式效果
:focus => 用于元素成为焦点时的样式效果,一般用于表单元素
2.结构伪类
:first-child => 选择某个元素下的第一个子元素
:last-child => 选择某个元素下的最后一个子元素
:nth-child => 选择某个元素下的一个或多个特定的子元素
:nth-last-child => 选择某个元素的一个或多个特定的子元素,从后往前数
:nth-of-type => 选择指定的元素
:nth-last-of-type => 选择指定的元素,从后往前数
:first-of-type => 选择一个父级元素下的第一个同类型子元素
:last-of-type => 选择一个父级元素下的第一个同类型子元素,从后往前数
:only-child => 选择的元素是其父元素的唯一 一个子元素
:only-of-type => 选择一个元素是上级元素下唯一相同类型的子元素
:empty => 选择的元素里没有任何内容(空标签)
3.否定伪类
:not => 排查或者过滤特定元素
4.状态伪类
:enabled => 选择匹配指定范围内所有可用的UI元素
:disabled => 选择匹配指定范围内所有不可用的UI元素
:checked => 选择匹配指定范围内所有可用的UI元素
5.目标伪类
:target => 选择匹配父元素的所有元素,并且匹配元素被相关URL指向
伪元素选择器:
:after => 在标签里的元素之后插入内容
:before => 在标签里的元素之前插入内容
:first-letter => 选择每个标签里的元素的首字母
:first-line => 选择每个标签里的元素首行
:selection => 选择用户选择的元素部分
§ 4.css布局模型,flex布局有哪些属性?
§ 5.css属性,visibility,display,opacity有什么区别?
visibility:设置为hidden时,元素不可见,但是占位,元素在页面结构中不消失,默认值为visible可见
display:设置为none时,元素不可见,不占位,元素在页面结构中不展示
opacity:通过透明度,来实现元素不可见,为0时则不可见,占位,元素在页面结构中不消失
§ 6.如何用css实现div水平垂直居中,常见一共都有哪几种方法?
1.绝对定位:
父div为position: relative,子div为position: absolute,上右下左各为0,margin为auto
2.子元素相对父元素绝对定位
父div为position: relative,子div为position: absolute,left和right各50%,transform: translate(-50%,-50%),平移各50%
3.利用绝对定位,calc函数动态计算实现水平垂直居中,缺点是需要知道父元素的宽高,不推荐使用
父div为position: relative,子div为position: absolute,left用calc函数,父div的宽度减去子div的宽度除以2,top用calc函数,父div的高度减去子div的高度除以2
4.flex布局:
父div设置为display:flex,align-items: center,justify-content: center,子div正常宽高
5.grid布局:
父div设置为display:flex,grid-template-columns: 50px,grid-template-rows: 50px,place-content: center center,子div正常宽高
§ 7.用grid布局实现一个九宫格
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<style>
* {margin:0;padding:0;}
.box {
height:300px;
width:300px;
background-color: #ccc;
display:grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
gap: 10px;
padding:10px;
box-sizing: border-box;
}
.item {
background-color: #f00;
}
</style>
§ 8.CSS的flex简写以及所代表的意思
flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器会根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
/* 默认值 */
flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
/* 不放大、不缩小,但占据固定宽度 */
flex: 0 0 100px; /* flex-grow: 0, flex-shrink: 0, flex-basis: 100px */
/* 简写为 none */
flex: none; /* 等同于 flex: 0 0 auto */
/* 简写为 auto */
flex: auto; /* 等同于 flex: 1 1 auto */
§ 9.CSS如何实现模拟省略号
单行省略号:
.box {
width: 200px; /* 定义宽度 */
white-space: nowrap; /* 保持文本在一行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
多行省略号:
.box {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 限制显示的行数 */
overflow: hidden;
width: 200px; /* 定义宽度 */
}