css小技巧

最新推荐文章于 2022-11-02 21:33:46 发布

静默思想

最新推荐文章于 2022-11-02 21:33:46 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_41871290/article/details/81186233

css 专栏收录该内容

24 篇文章

订阅专栏

本文深入探讨CSS中的实用技巧，包括解决移动端点击阴影、利用padding绘制复杂图形、掌握margin百分比计算规则、解决margin合并问题、使用margin:auto实现垂直居中等，旨在提升网页布局与设计的效率与美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端我们在点击页面中的一些图片的时候会出现阴影。处理方法只要给a标签加上

a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

padding 的图形绘制一个元素画出红领巾的“三道杠”

.box1 {
  display: inline-block;
  background: currentColor;
  width: 140px;
  height: 10px;
  border-top: 10px solid;
  border-bottom: 10px solid;
  padding: 35px 0;
  /* 这里其实关键起作用的还是 background-clip: content-box; 把背景色作用从border-box改为content-box*/
  background-clip: content-box;
}
复制代码

<div class="box1"></div>
复制代码

三道杠

padding 的图形绘制一个元素画出双层圆点图形效果

.box1 {
  display: inline-block;
  background: currentColor;
  width: 100px;
  height: 100px;
  padding: 10px;
  background-clip: content-box;
  border: 10px solid;
  background-clip: content-box;
  border-radius: 50%;
}
复制代码

<div class="box1"></div>
复制代码

双层圆点

margin百分比

margin的百分比值计算规则和padding一样，但是margin在垂直方向没办法改变自身内部尺寸往往要借助父元素作为载体，还存在margin合并的问题

还是那道浏览器窗口1/2的面试题，如果没有要求只用一个元素实现的话，可以用margin去实现

这里简单说一下，之所以设置父级box1的overflow:hidden，是因为要创建一个块级格式化上下文元素,一方面可以用子级margin撑起高度，另一方面处理margin合并问题，所以子级.box2直接用margin:100%，而不是200%。

.box1 {
  background: currentColor;
  overflow: hidden;
  /* 宽度窗口1/2 */
  width: 50%;
}
.box2 {
  /* 高度窗口1/2 */
  margin: 100%;
}
复制代码

	<div class="box1"><div class="box2"></div></div>
复制代码

margin合并的解决方法

这里只列举出margin-top合并的情况, margin-bottom与其相对应

父元素设为块级格式化上下文，7就是
父元素设置border-top
父元素设置padding-top (这里可以用margin-top负值来消除作用)
父元素与第一个子元素之间添加内联元素进行分隔

利用 margin: auto 做垂直上下居中

.box1 {
  height: 400px;
  width: 400px;
  border: 1px solid ;
  position: relative;
}
.box2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: currentColor;
  width: 200px;
  height: 200px;
  margin: auto;
}
复制代码

<div class="box1"><div class="box2"></div></div>

css尺寸单位`ex`，指的是字母x的高度(x-height)。

HTML：

zhangxinxu<i class="icon-arrow"></i>

张鑫旭<i class="icon-arrow"></i>

CSS：

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(/images/5/arrow.png) no-repeat center;
}

无依赖absolute绝对定位

无依赖absolute绝对定位指的是没有left/top/right/bottom 我们平时如果对元素进行 absolute 定位，多半会加多个 left,top然后给父级加个 relative。实际上大多数情况我们可以直接用margin辅助定位，
```
.father{ position: relative; }
/* @before */
.son {position: absolute; top: 10px; left: 10px;}
/* @after */
.son {position: absolute; margin-top: 10px; margin-left: 10px;}
复制代码
```
这么实现有两个好处，一个是我们不需要父级去加个relative后面要撤销，直接改 .son样式就好。第二个好处就是某些场景适应性比依赖项定位好

Hot为无依赖 N为依赖
改变文字长度之后的情况

textarea 宽度100%自适应效果

<style>
  /*父级*/
  .box1 {
    width: 280px;
    margin: 0 auto;
    padding: 10px 0;
    background-color: #abcdef;
  }
  /* 模拟边框与padding */
  .box2 {
      padding: 9px 8px;
      border: 1px solid #d0d0d5;
      border-radius: 4px;
      background-color: #fff; 
  }
  /* 真实 textarea */
  .box2> textarea {
      width: 100%;
      line-height: 20px;
      padding: 0;
      border: 0 none;
      outline: 0 none;
      background: none;
      resize: none;
  }
</style>

<div class="box1">
  <div class="box2">
    <textarea ></textarea>
  </div>
</div>
复制代码

空元素选择器 :empty

看《css世界》之后才知道有这么一个空元素选择器...绝对不是其他目的

	<style>
		span:empty::after {
			content: '是帅哥';
		}
	</style>
	<span>Jsonz</span>
	<span></span>

动态loading打点效果

这里主要利用了content 支持\A换行来实现，用dot是因为

是自定义的一个标签元素，除了简约、语义化明显

<style>
	dot {
    display: inline-block; 
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}
</style>
正在加载中<dot>...</dot>
复制代码