1、css盒模型
a、标准盒模型---在标准盒模型中,width的宽度指的是content的宽度
b、怪异盒模型---在怪异盒模型中,width的宽度等于content+border+padding
切换盒子模型的话,使用box-sizing。
2、link和import的区别
a、link是html标签,import是css提供的一种方式
b、link在页面加载时同时载入,import是在页面加载完成后载入
c、link可以在文档中任意位置定义,import只能在样式表中定义
d、link可以同时加载多个,import只能一条条执行
e、linke支持动态添加,而import不支持
3、元素垂直居中的方式
a、使用flex布局,align-items: center;
b、使用translate和transform;
c、图片和文字居中可选择使用vertical-align: middle;
d、使用表格布局
e、使用grid布局,align-self: center;
4、文本垂直居中的方式
a、line-height
b、使用grid布局
c、使用flex布局
d、使用绝对定位,top和bottom为0,margin为auto
5、css的优先级顺序
a、!important
b、标签内样式
c、id选择器
d、类选择器、属性选择器和伪类选择器
e、元素选择器和伪元素选择器
6、css的继承属性
a、文本和字体类属性,font-size、color等
b、列表类属性
c、表格布局类属性
d、direction、cursor等属性
7、清除浮动的办法
a、clear:both
b、父元素overflow
c、使用伪元素::after
d、使用flex布局
e、使用grid布局
8、响应式布局有哪些
a、百分比布局
b、flex布局
c、grid布局
d、移动端适配rem、vw、vh等
e、媒体查询@media
9、三栏布局的实现方法
a、flex布局---左右为固定值,中间使用flex-grow自动撑开
b、双飞翼布局---使用浮动和负边距实现的三栏布局,左右使用margin负值撑开中间栏的宽度
<style type="text/css">
body {
min-width: 550px;
}
.col {
/* 1.设置浮动 */
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #FFC0CB;
}
#main-wrap {
/* 2.将 main 左右内边距留出 left 和 right 的宽度 */
margin: 0 200px 0 150px;
}
#left {
width: 150px;
height: 200px;
background-color: #FFFF00;
/* 3.left 向左偏移 main 的宽度 */
margin-left: -100%;
}
#right {
width: 200px;
height: 200px;
background-color: #cccccc;
/* 4.right 向左偏移自身宽度 */
margin-left: -200px;
}
</style>
<body>
<div id="main" class="col">
<div id="main-wrap">
main
</div>
</div>
<div id="left" class="col">
left
</div>
<div id="right" class="col">
right
</div>
</body>
c、圣杯布局---使用浮动和负边距实现的三栏布局,中间栏先放在html结构中,使用负边距将左右栏移动到中间栏的两侧,再使用相对定位将左右栏拉回原来的位置
<style type="text/css">
body {
min-width: 550px;
}
#header {
background-color: #999999;
}
#middle{
/* 2.把中间部分留出左右元素的宽度 */
padding-left: 200px;
padding-right: 150px;
}
#middle .column{
float: left;
height: 200px;
}
#left{
width: 200px;
background-color: #FFFF00;
/* 4. 向左移动center的宽度 */
margin-left: -100%;
/* 5. 再向左移动自身宽度,露出被覆盖的center块 */
position: relative;
right: 200px;
}
#center{
width: 100%;
background-color: pink;
}
#right{
/* 3.margin-right让右方元素覆盖自身,达到消除自身宽度的目的,浮动到center上面去 */
margin-right: -150px;
width: 150px;
background-color: #CCCCCC;
}
#footer {
background-color: #999999;
}
.clearfix:after{
display: table;
content: '';
clear: both;
}
</style>
<body>
<div id="header">header</div>
<div id="middle" class="clearfix">
<div id="center" class="column">
center
</div>
<div id="left" class="column">
left
</div>
<div id="right" class="column">
right
</div>
</div>
<div id="footer">footer</div>
</body>
10、解决css样式再不同浏览器中的兼容问题
使用css reset,避免使用css hack和浏览器前缀,使用标准的组件库,尽量使用标准css属性和属性值等。
11、margin塌陷和合并问题的解决方案
a、使用内边距替代外边距来调整距离
b、添加边框或内边距来阻止margin合并
c、使用BFC
d、使用伪元素,在相邻的兄弟元素中添加一个透明的伪元素,并添加display:inline-block;
e、使用flex或grid布局替代margin布局
12、绘制一条0.5px的线
利用css的伪类元素(::after或::before),再对其进行缩放。
.half-pixel-line {
position: relative;
display: inline-block;
width: 100%;
height: 1px;
}
.half-pixel-line::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: black;
transform-origin: left top;
transform: scaleY(0.5);
}
13、视差滚动效果
视差滚动效果(Parallax Scrolling)是一种视觉设计技巧,通过在页面滚动时以不同速度移动前景和背景元素,从而产生深度感和动态效果。视差滚动效果的原理在于,当用户滚动页面时,页面上的不同元素(例如前景、背景、文字等)以不同的速度移动。这些速度差使得靠近观察者的元素(前景)看起来移动得更快,而远离观察者的元素(背景)看起来移动得更慢。这种相对运动产生了一种错觉,使用户感觉到页面的不同部分之间有深度关系,从而增强了视觉体验。
a、css实现:利用 CSS3 的 background-attachment
属性设置为 fixed
。这种方法简单易实现,但仅适用于背景图像,并且在某些浏览器或设备上可能存在兼容性问题。
b、js实现:通过监听页面滚动事件,根据滚动位置动态调整元素的位置。这种方法更灵活,可以应用于任何元素,并且可以实现更复杂的视差效果。通常使用 JavaScript 库(如 Rellax.js、Parallax.js 等)来简化开发过程。