css 高级技巧

流氓也是种气质 _Cookie

已于 2022-12-08 15:26:46 修改

阅读量457

点赞数

分类专栏： css 文章标签： css html 前端

于 2022-02-08 09:48:39 首次发布

本文链接：https://blog.csdn.net/qq_37550440/article/details/122818209

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.元素的显示与隐藏元素

2.优化用户界面样式，提高用户体验

3.vertical-align垂直对齐，只有行内块和行内元素有效，块级元素无效

1.元素的显示与隐藏元素

1.display:none/block 不占有位置

2.visibility: hidden/visible 隐藏但占有位置

3.overflow: hidder/visible 超出盒子的部分隐藏

<div class="one"></div>
<div class="two"></div>
<div class="there">
    你好你好你好你好你好123
</div>

<!-- 案列 -->
<div class="box">
    <a href="#">
      <div class="mask"></div>
      <img src="images/3.jpg" alt="">
    </a> 
</div> 


    .one,
    .two {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .one {
      /* display: none; */
      visibility: visible;
      background-color: skyblue;
    }
    .there {
      overflow: hidden;
      width: 50px;
      height: 50px;
      border: 1px solid red;
    }

    .box {
      position: relative;
      width: 222px;
      height: 220px;
    }
    .mask {
      display: none;
      position: absolute;
      width: 222px;
      height: 220px;
      background: rgba(0,0,0,.3) url(./images/arr.png) no-repeat center center;
    }
    /* 鼠标经过a的时候 a里面的mask显示出来 */
    .box a:hover .mask{
      display: block;
    }

2.优化用户界面样式，提高用户体验

1.鼠标样式cousor

2.表单默认有轮廓线，清除轮廓线outline:none

3.防止文本域拖拽resize:none,主要是为了防止布局被破坏

<ul>
    <li style="cursor: default;">默认的</li>
    <li style="cursor: pointer">小手</li>
    <li style="cursor: move">移动</li>
    <li style="cursor: text">文本</li>
    <li style="cursor: not-allowed">禁止</li>
</ul>

<input type="text">
  <textarea name="" id="" cols="30" rows="10"></textarea>

textarea {
      /* 取消轮廓线 */
      outline: none;
      /* 添加边框 */
      border: 1px solid red;
      /* 防止拖拽 */
      resize: none;
    }

3.vertical-align垂直对齐，只有行内块和行内元素有效，块级元素无效

<div class="imgbox">
    <img src="./images/3.jpg" alt=""> pink你看撒
  </div>
  <div class="img-boder-box">
    <img src="./images/3.jpg" alt="">
  </div> 

.imgbox img{
      /* 图片默认是基线对齐  文本含底线，基线，中线，顶线 */
      vertical-align: baseline;
      vertical-align: bottom;
      vertical-align: middle;
    }
    /* 图片底部会有空隙，因为图片是默认基线对齐vertical-align: baseline */
    .img-boder-box {
      border: 1px solid red;
    }
    .img-boder-box img {
      /* 去除图片底部空隙方法一,只要不是基线对齐都可以bottom.middle,top等等  */
      /* vertical-align: middle; */
      /* 去除图片底部空隙方法二,改为块级元素,因为vertical-align对块级元素无效 */
      display: block;
    }

4.文字超出隐藏

 <div class="white">
    <!-- 你好-来自太阳的你<br>-欢迎你 -->
    你好-来自太阳的你-欢迎你
  </div>

.white {
      width: 100px;
      height: 25px;
      border: 1px solid red;
      /*1. 强制在一行显示，除非遇到了<br> */
      white-space: nowrap;
      /* 2.超出隐藏 */
      overflow: hidden;
      /* 3.文本溢出用什么代替 clip裁切，ellipsis...显示 */
      text-overflow: ellipsis;
    }

5.精灵图使用方式

1.首页选取图标大小2.在使用辅助线测出x y的距离 3。注意背景图默认是左上角对齐需要移动的是背景图

精灵图制作ctrl+n 新建画布在拖拽到里面去，注意空隙一定要留多方便后续扩展

<div class="all_box">
  </div>

.all_box {
      width: 23px;
      height: 23px;
      /* 背景图默认是左上角对齐 */
      background: url(./images/index.png) no-repeat ;
      /* background-position: 0 -108px; */
      background-position: -157px -108px;
      margin-left: 100px;
    }

6.微信滑动门

总结：

1. a 设置背景左侧，padding撑开合适宽度。

2. span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。

3. 之所以a包含span就是因为整个导航都是可以点击的。

 <ul class="slider">
    <li>
      <a href="#">
        <span>首页</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>帮助与反馈</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>公众号</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>公众平台</span>
      </a>
    </li>
  </ul>


/* 滑动门 */
    li {
      list-style: none;
      text-decoration: none;
    } 
    .slider {
      height: 200px;
      background: url(./images/wx.jpg);
    }
    .slider li{
      float: left;
      margin: 20px 5px;
    }
    .slider a {
      display: inline-block; 
      height: 33px;
      line-height: 33px;
      font-size: 16px;
      /* 这二个padding设置很关键 */
      padding-left: 15px;
      color: #fff;
      background: url(./images/to.png) no-repeat;
    }
    .slider span {
      display: inline-block; 
      padding-right: 15px;
      height: 33px;
      line-height: 33px;
      background: url(./images/to.png) no-repeat right;
    }
    .slider li:hover a,
    .slider li:hover span {
      background-image:url(./images/ao.png);
    }

7.margin 负值之美

1). 负边距+定位：水平垂直居中

2). 压住盒子相邻边框---淘宝案例

<div class="taobao_father">
    <div class="taobao"></div>
    <div class="taobao"></div>
    <div class="taobao"></div>
  </div>



.taobao_father {
      width: 500px;
    }
    .taobao {
      /*浮动的盒子是紧贴在一起的*/
      /* position: relative; */
      float: left;
      width: 200px;
      height: 300px;
      border: 1px solid #ccc;
      /*消除边框重合得问题  */
      margin-left: -1px;
      margin-top: -1px;
    }
    .taobao:hover {
      border: 1px solid red;
      /*需要当前点击得盒子升到最高，1.定位得盒子比标准流得盒子高 方法2.给taobao盒子加position: relative;通过控制z-index来控制层级 */
      position: relative;
      /* z-index: 1; */
    }

8.css 三角之美--京东案例

<div class="taobao_triangle"></div>
  <p></p>
  <div class="jindong_triangle">
    <p></p>
  </div>

.taobao_triangle {
			/*我们用css 边框可以模拟三角效果*/
			width: 0;
			height: 0;
			border-top: 10px solid red;
			border-right: 10px solid green;
			border-bottom: 10px solid blue;
			border-left: 10px solid pink;
		}
		p {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px;
			border-color:  transparent transparent transparent red;
			font-size: 0;
			line-height: 0;
		}
    .jindong_triangle {
      position: relative;
      width: 200px;
      height: 100px;
      background-color: pink;
    }
    .jindong_triangle p {
      position: absolute;
      top: -40px;
			left: 50%;
			margin-left: -20px;
      width: 0;
			height: 0;
			border-style: solid;
			border-width: 20px;
			border-color:  transparent transparent red transparent ;
    }

9.css 页面变灰

html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}

流氓也是种气质 _Cookie

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css 高级技巧

1.元素的显示与隐藏元素1.display:none/block 不占有位置2.visibility: hidden/visible 隐藏但占有位置3.overflow: hidder/visible 超出盒子的部分隐藏<div class="one"></div><div class="two"></div><div class="there"> 你好你好你好你好你好123</div><.
复制链接

扫一扫