0
点赞
收藏
分享

微信扫一扫

CSS 绝对定位 position:absolute

殇感故事 03-22 11:00 阅读 2
前端css

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 等)来简化开发过程。

        

        

举报

相关推荐

0 条评论