WEB之css篇

最新推荐文章于 2024-06-28 07:00:00 发布

时间的情敌

最新推荐文章于 2024-06-28 07:00:00 发布

阅读量163

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_34297387/article/details/119610179

版权

1、实现一个div在不同分辨率下的水平垂直居中

.box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid pink;
      width: 100px;
      height: 100px;
}

2、左右固定，中间自适应样式

<style>
    .box {
      display: flex;
      height: 200px;
    }
    .left {
      flex: 0 0 200px;
      background-color: pink;
    }
    .center {
      flex: 1;
      background-color: yellow;
    }
    .right {
      flex: 0 0 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div class="box">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
  </div>
</body>

3、阐述清楚浮动的几种方式（常见问题）

1、浮动的产生
float: left/right（设置后产生浮动）
初衷：浮动原先的设计初衷是为了实现文字环绕效果
结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示

2、解决浮动的方法
（1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
<div class="container"> 
  <div class="left">left浮动</div> 
  <div class="right">right浮动</div>
  <div  style="clear:both;"></div>
</div>
（2）使用after伪元素
.box 父元素
.box::after {
    content: ' ';
    display: block;
    clear: both;
 }
（3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
（4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用

4、解释css sprites ，如何使用？

1、什么是精灵图
将一些小图标放在一张图上

2、精灵图的优点
减少图片的总大小
减少下载图片资源请求，减小建立连接的消耗

3、精灵图的使用方式
.icon1 {
    background-image: url(css/img/sidebar.png);
    background-repeat: no-repeat;
    background-position: 20px  20px;
 }
// 第一个数是x轴， 第二个数是y轴

5、box-sizing常用的属性有哪些？分别有什么作用？

（1）content-box
宽高是元素本身的宽高 不包含border+padding

（2）border-box
元素的宽高已经包含了border+padding

（3）inherit
从父元素继承box-sizing属性

6、CSS样式覆盖规则

!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

7、请简要描述margin重合问题，及解决方式

问题：相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin

解决：（1）设置padding代替margin
（2）设置float
（3）设置overflow
（4）设置position：absolute 绝对定位
（5）设置display： inline-block

8、对<meta></meta>标签有什么理解

1、meta是html文档头部的一个标签，这个标签对用户不可见，是给搜索引擎看的。

2、meta标签属性用法分成两大类

3、<meta charset="UTF-8"> 使用的编码格式，大部分是utf-8

9、display none visibility hidden区别？

在这里插入图片描述

10、重绘和回流（哪些情况重绘，哪些回流）

在这里插入图片描述

11、说说你对语义化的理解？

在这里插入图片描述

12、为什么要初始化css样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。

13、移动端适配1px问题

* {
  margin: 0;
  padding: 0;
}
ul, li{
  list-style: none;
}
.hairlines {
  width: 300px;
  margin: 100px auto;
}
.hairlines li{
  position: relative;
  border:none;
  margin-top: 10px;
}
.hairlines li:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  background: #cccccc;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

14、居中为什么要使用transform（为什么不使用marginLeft/Top）

transform 属于合成属性，不会引起整个页面的回流重绘，节省性能消耗，但是占用内存会大些

top/left属于布局属性，会引起页面layout回流和repaint重绘。

时间的情敌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
WEB之css篇

1、实现一个div在不同分辨率下的水平垂直居中.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid pink; width: 100px; height: 100px;}2、左右固定，中间自适应样式<style> .b...
复制链接

扫一扫