CSS之高级小技巧

CSS高级技巧
一、元素的显示与隐藏
 
目的:让一个元素在页面中消失,但是不在文档源码中删除
 
 
1.1display显示
 
display设置或检索元素是否如何显示
display:none;隐藏元素
display:block;除了转换为块级元素之外,同时还有显示元素的意思
 
特点:隐藏之后,不再保留位置
 
1.2visibility可见性
 
visibility:hidden;隐藏元素,保留位置
visibility:visible;元素可视
 
特点:隐藏之后,保留位置(停职留薪)
 
1.3overflow溢出(重点)
 
检索或设置当对象内容超过其指定高度及宽度时如何管理内容
 
属性值
描述
visible
不剪切内容,也不添加滚动条(默认)
hidden
不显示超过尺寸的内容,超出的部分隐藏掉
scroll
不管超出内容否, 总是显示滚动条(太丑了,不常用)
auto
超出自动显示滚动条,不超出不显示滚动条(智能小天才)
 
实际开发场景:
1、清除浮动
2、隐藏超出部分,隐藏掉,不允许内容超出父盒子
 
1.4显示与隐藏总结:
 
 
 
属性
区别
用途
display
隐藏对象,不保留位置
配合后面JavaScript做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单,应用及广
visibility
隐藏对象,保留位置
使用极少
overflow
只是隐藏超出大小的部分
1、清除浮动;2、保证盒子里面的内容不会超出该盒子范围
 
二、CSS用户界面样式
 
所谓界面样式,就是更改一些用户操作样式
  • 更改用户鼠标样式
  • 单表轮廓等
  • 防止表单域拖拽
 
2.1鼠标样式cursor
 
设置或检索在对象上移动鼠标指针采用何种系统预定义的光标形状
 
 
 
属性值
描述
default
小白(默认)
pointer
小手
move
移动
text
文本
not-allowed
禁止
鼠标放在我身上看效果哟
<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>

 

 
2.2轮廓线outline
 
绘制周围于元素的一条线,位于边框边缘的外围,可起到突出元素的作用
outline:outline-color  ||  outline-style  || outline-width;
但是我们并不关心可以设置多少,我们平时都是去掉的
最直接的写法是:outline:0;或者outline:none;
 
< input tyle = "text" style = " outline : 0 " />
 
2.3防止拖拽文本域
 
< textarea style = " resize : none ; " ></ textarea >
 
2. 4用户界面样式总结
 
 
属性
用途
用途
鼠标样式
改变鼠标样式cursor
样式很多,重点记住pointer
轮廓线
表单默认outline
outline轮廓线,我们一般去掉,border是边框,我们会经常用
防止拖拽
主要针对文本域
防止用户随意拖拽文本域
 
 
三、vertical-align垂直对齐
 
有宽度的块级元素居中对齐,是margin:0  auto;
让文字居中对齐,是taxt-align:center;
 
vertical-align垂直居中对齐,它只针对行内元素或者行内块元素,对块级元素无效
 
vertical-align:baseline || top || middle ||  bottom;
设置或检索对象内容的垂直居中对齐方式
注意:
vertical-align不影响块级元素中内容对齐,它只针对于行内元素或者行内块元素
特别是行内块元素,通常用来控制图片/表单与文字的对齐
 
 
.one {
                      /*默认是基线对齐*/
         vertical-align : baseline ;
                      /*让图片的中线   对齐   文字的中线   居中对齐*/
         vertical-align : middle ;
                      /*让图片的顶线   对齐   文字的顶线   顶部对齐*/
        vertical-align : top ;
   }
 
3.1图片、表单和文字对齐
可以通过vertical-align控制图片和文字垂直关系,默认图片会与文字基线对齐
 
3.2去除图片底侧空白缝隙
 
.two {
             border : 1 px solid red;
    }
 
 
因为·默认是基线对齐,所以底侧有空白缝隙
 
.two {
        border : 1 px solid red;
  }
  .two img {
        vertical-align : bottom ;
  }
 
 
四、溢出文字省略号显示
 
4.1    white-space
 
设置或检索对象内文本显示方式,通常我们使用于强制一行显示内容
 
white-space:normal;默认处理方式,超出部分换行显示
white-space:nowrap;强制在一行内显示所有文本,直到文本结束或遭遇<br>标签对象才换行
 
4.2    text-overflow文字溢出
 
设置或检索是否使用一个省略号标记(...)标示对象内文本的溢出
 
text-overflow:clip;不显示省略号标记(...),而是简单的裁剪
 
text-overflow:ellipse;当对象文本溢出时使用省略号标记(...)
 
注意:一定要首先强制一行内显示,再次和overflow属性,搭配使用
 
4.3    总结三部曲
 
1、强制一行显示文本
white-space:nowrap;
2、超出部分隐藏
overflow:hidden;
3、文字用省略号代替超出的部分
text-overflow:ellipse;
五、CSS精灵(重要)
 
5.1、为什么需要精灵技术:
为了有效减少服务器接收和发送的次数,提高页面的加载速度
CSS精灵也称CSS sprites、CSS雪碧
 
5.2、精灵技术讲解
当网页访问该页面时,只需要向服务器发送一份请求,网页中的背景图像即可全部展现出来
我们需要用到CSS的:
background-image,
background-repeat,
background-position属性进行背景定位,
其中最关键的就是使用background-position属性进行精确定位
 
 
5.3精灵技术使用的核心总结
 
首先,我们知道CSS精灵是针对背景图片,插入图片img是不需要这个技术的
1,精确测量,每个小图标的大小和位置
2,给盒子制定小背景图片时,背景定位基本都是负值
 
5.4制作精灵图(了解)
CSS精灵其实是将网页中的一些背景图片整合到一张大图中(精灵图),那我们要做的就是把小图拼合成一张大图
 
六、滑动门
 
为了各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术
 
核心技术:
 
利用CSS精灵(主要是背景位置)和盒子padding撑开宽度,一般能适应不同字数的导航栏
 
一般经典布局都是这样的:
<li>
    <a href="#">
        <span>导航栏的内容</span>
    </a>
</li>

 

a是设置左侧背景,左门
 
 
a {
    doisplay:inline-block;
    height:33px;
    background:url(img/to.png) no-repeat;
    margin:100px;
    padding-left:15px;
    color:#fff;
}
span时设置右侧背景,右门
span {
    doisplay:inline-block;
    height:33px;
一定要注意span需要背景图片右对齐
    background:url(img/to.png) no-repeat right top;
    margin:100px;
    padding-left:15px;
    color:#fff;
}

 

因为整个导航栏都是链接,所以a要包含span
 
微信导航栏案例
 
 
七、扩展
 
7.1margin负值之美
(1)负边距+定位:水平垂直居中
之前学过,一个绝对定位盒子,利用父级盒子的50%,然后再往左走自己宽度的一半,可以实现盒子水平居中对齐
 
(2)压住盒子相邻边框
 
div {
            float:left;
            width:200px;
            height:300px;
            border:1px solid #ccc;
    }

 

div {
            float:left;    浮动紧贴元素
            width:200px;
            height:300px;
            border:1px solid #ccc;
            margin-left:-1px;
}

 

 
实现1+1=1px
 
 
 
div {
            position: relative;
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            margin-left: -1px;
            margin-top: -1px;
 }
div:hover {
        /*鼠标经过的时候div升到最高处*/
        /* 定位盒子是最高层的 */
            z-index: 1;
            border: 1px solid #f40;
 }

 

 
7.2、CSS 三角之美
 
 
div  {
    width:0;
    height:0;
    border-top:10px  solid  red;
    border-right:10px  solid  green;
     border-bottom:10px  solid  blue;
    border-left:10px  solid  pink;
}

 

 
1、用CSS边框可以模拟三角形效果
2、宽度、高度为0;
3、我们四个边框都要写,只保留需要的颜色边框, 其余的不能省略,都改为transparent透明就好
4、为了照顾兼容性,加上font-size:0;line-height:0;
 
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值