前端web-CSS

最新推荐文章于 2024-10-01 23:20:42 发布

拥抱你！

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量212

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/qq_45376958/article/details/103945301

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端web-CSS

css相关

css相关

进度条样式

css样式分为三大类：行间样式、内部样式、外部样式

行间样式：写在body中，缺点：该标签内所有，优先级最高。
内部样式：写在head中，缺点：该页面内所有，优先级比外部样式高。
外部样式：写在.css文件中，通过链接调用，整个工程所有，优先级最低，在实际开发中一般采用外部样式设计。例如<link rel=“stylesheet"type=“text/css” href=”…/css/test.css"/

1.定位position

定位分为四种：相对定位 relative，绝对定位 absolute，固定定位 fixed，没有定位 static。

*relative*：不脱离文档流，提升层级，一般作为父级元素，为子级元素的定位提供参考范围。
*absolute*：脱离文档流，提升层级，一般作为子级元素。
*fixed*：针对于窗口进行定位，脱离文档流，提升层级。加入针对body做固定定位。
           无论鼠标怎么滚动，肉眼观察被定为的元素，位置都是不变的。

万能居中

1.margin: 0 auto;水平
2.text-align: center;水平
3.表格，center,middle；水平垂直
4.display:table-cell；模拟表格，all
5.绝对定位，50%减自身宽高
6.绝对定位，上下左右全0，margin:auto

使子div相对于父div垂直水平居中

.parent-div{
    position: relative;
}
`方法一`
.child-div{
`设置绝对坐标系，然后设置top、left、right、bottom的值相等即可，不一定要都是0。并设置margin:auto;`
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
`方法二`
.child-div{
`设置绝对坐标系，让left和top都是50%,这样让目标div的最左边与父级框体的最左相距50%,垂直方向相同.`
`然后再用transform:translate(-50%,-50%)将目标框体向左(上)平移自己宽度(高度)的50%`
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
}

2. BFC优化

块格式化上下文, 特性:

使 BFC 内部浮动元素不会到处乱跑；
和浮动元素产生边界。

animation:动画效果

设置动画 animation 时，需要设置三个参数：关键帧名称时间（多长时间内完成动画展现）是否循环（不写：默认不循环；infinite：无限循环）在设置完成动画后，需要创建@keyframes方法（关键真名称同keyframes方法的名称）用大括号编写方法内的运动方式

 #sina{
       position: absolute;
       left : 100px;
       top ：100px;
       amination :关键帧名称 10s infinite; /*三个参数中间只有空格 没有其他符号
    }
@keyframes 关键帧名称{
                0%{
                left: xpx;
                top: ypx;
                }
                ....
                ....
               100%{
                 left: wpx;
                 top: zpx;
                 }
        }

3. 盒模型哪两种模式？什么区别？如何设置

标准模式: box-sizing: content-box; 宽高不包括内边距和边框
怪异模式: box-sizing: border-box

4. 常用清除浮动的方法，如不清除浮动会怎样？

当父元素不给高度的时候，内部元素不浮动时会撑开, 而浮动的时候，父元素变成一条线, 造成塌陷.

额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
父元素添加overflow:hidden; (触发BFC)
使用after伪元素清除浮动（推荐使用）
使用before和after双伪元素清除浮动

5. 删格化的原理

比如antd的row和col, 将一行等分为24份, col是几就占几份, 底层按百分比实现; 结合媒体查询, 可以实现响应式

6. 纯css实现三角形

// 通过设置border
.box
        {
            width:0px;
            height:0px;

            border-top:50px solid rgba(0,0,0,0);
            border-right:50px solid  rgba(0,0,0,0);
            border-bottom:50px solid green;
            border-left:50px solid  rgba(0,0,0,0);
            }

7. 高度不定，宽100%，内一div高不确定，如何实现垂直居中？

verticle-align: middle;
绝对定位50%加translateY(-50%)
绝对定位，上下左右全0，margin:auto

8. 至少两种方式实现自适应搜索

rem, em
百分比
row col等的栅格布局

9. 设置一段文字的大小为6px

谷歌最小12px, 其他浏览器可以更小
通过transform: scale实现

10. css菊花图

四个小圆点一直旋转

// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
  to {
    opacity: 1 
  }
}
@keyframe antRotate {
  to {
    transform: rotate(405)
  }
}
// animation-delay: 逐个延迟0.4s

11. 关于em

 <div style="font-size: 20px">
      123
      <div style="font-size: 2em;width: 2em">456</div>
 </div>
// 此时子元素的font-size为40px, 宽度为80px(还要乘以子元素font-size的系数)

12. 关于vh, vw

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

13. Flex布局

博客园中的flex布局

flex-direction控制主副轴
flex-wrap控制换行(默认不换行)
flex-flow是上两个的结合
justify-content主轴对齐方式
align-items交叉轴对齐方式

14. overflow原理

overflow: hidden能清除块内子元素的浮动影响. 因为该属性进行超出隐藏时需要计算盒子内所有元素的高度, 所以会隐式清除浮动
创建BFC条件(满足一个):
- float的值不为none；
- overflow的值不为visible；
- position的值为fixed / absolute；
- display的值为table-cell / table-caption / inline-block / flex / inline-flex。

15. 实现自适应的正方形:

使用vw, vh
width百分比, height: 0, padding-top(bottom): 50%

16. 标准模式和怪异模式

document.compatMode属性可以判断是否是标准模式，当 document.compatMode为“CSS1Compat”，是标准模式，“BackCompat”是怪异模式。
怪异模式是为了兼容旧版本的浏览器, 因为IE低版本document.documentElement.clientWidth获取不到
怪异模式盒模型: box-sizing: border-box; 标准模式: box-sizing: content-box