css-04

1. 元素的显示与隐藏

  • display 设置或检索对象是否及如何显示。
    display: none 隐藏对象
    display:block 除了转换为块级元素之外,同时还有显示元素的意思。
  • 特点: 隐藏之后,不再保留位置。


    29none.png

2. visibility 可见性

  • 设置或检索是否显示对象。
    visibility:visible ;  对象可视
    visibility:hidden;   对象隐藏
  • 特点: 隐藏之后,继续保留原有位置。


    30visibility.png

3. overflow 溢出

  • 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll 不管超出内容否,总是显示滚动条
auto 超出自动显示滚动条,不超出不显示滚动条
33overflow.png

实际开发场景:

  1. 清除浮动
  2. 隐藏超出内容,隐藏掉, 不允许内容超过父盒子。

4. 显示与隐藏总结

属性 区别 用途
display 隐藏对象,不保留位置 配合后面js做特效,比如下拉菜单,原先没有,鼠标经过,显示下拉菜单, 应用极为广泛
visibility 隐藏对象,保留位置 使用较少
overflow 只是隐藏超出大小的部分 1. 可以清除浮动 2. 保证盒子里面的内容不会超出该盒子范围

CSS用户界面样式

5. 鼠标样式

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值 描述
default 小白 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止

6. 轮廓线 outline

是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少,我们平时都是去掉的。 li

最直接的写法是 : outline: 0; 或者 outline: none;

7. 防止拖拽文本域resize

34textarea.png

实际开发中,我们文本域右下角是不可以拖拽:

<textarea style="resize: none;"></textarea>

8. vertical-align 垂直对齐

vertical-align 垂直对齐,它只针对于行内元素或者行内块元素

xian.jpg

vertical-align : baseline |top |middle |bottom

  • 注意:
    vertical-align 不影响块级元素中的内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元素, 通常用来控制图片/表单与文字的对齐
基线对齐.jpg
1498467742995.png
  • 去除图片底侧空白缝隙


    35vertical.png
  • 原因
    图片或者表单等行内块元素,他的底线会和父级盒子的基线对齐。
    就是图片底侧会有一个空白缝隙。
  • 解决
  1. 给img vertical-align:middle | top| bottom等等。 让图片不要和基线对齐。
  2. 给img 添加 display:block; 转换为块级元素就不会存在问题了。

9. 溢出的文字省略号显示

 /*1. 先强制一行内显示文本*/
      white-space: nowrap;
  /*2. 超出的部分隐藏*/
      overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;

10. CSS精灵技术(sprite)

为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度。
CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图。

jds.png

这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。
我们需要使用CSS的

  • background-image、
  • background-repeat
  • background-position属性进行背景定位,
  • 其中最关键的是使用background-position 属性精确地定位。

首先我们知道,css精灵技术主要针对于背景图片,插入的图片img 是不需要这个技术的。

  1. 精确测量,每个小背景图片的大小和 位置。
  2. 给盒子指定小背景图片时, 背景定位基本都是 负值。

11. 滑动门

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。
http://weixin.qq.com/

核心技术

核心技术就是利用CSS精灵(主要是背景位置)和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。
一般的经典布局都是这样的:

  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

css样式

* {
      padding:0;
      margin:0;

    }
    body{
      background: url(images/wx.jpg) repeat-x;
    }
    .father {
      padding-top:20px;
    }
    li {
      padding-left: 16px;
      height: 33px;
      float: left;
      line-height: 33px;
      margin:0  10px;
      background: url(./images/to.png) no-repeat left ;
    }
    a {
      padding-right: 16px;
      height: 33px;
      display: inline-block;
      color:#fff;
      background: url(./images/to.png) no-repeat right ;
      text-decoration: none;
    }
    li:hover,
     li:hover a {
      background-image:url(./images/ao.png);
    }

总结:

  1. a 设置 背景左侧,padding撑开合适宽度。
  2. span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
  3. 之所以a包含span就是因为 整个导航都是可以点击的。

12. margin负值

  1. 负边距+定位:水平垂直居中
    一个绝对定位的盒子, 利用 父级盒子的 50%, 然后 往左(上) 走 自己宽度的一半 ,可以实现盒子水平垂直居中。
  2. **压住盒子相邻边框 **


    margin.png

13. CSS三角形

 div {

    width: 0; 

    height: 0;
    line-height:0;
    font-size: 0;
    border-top: 10px solid red;

    border-right: 10px solid green;

    border-bottom: 10px solid blue;

    border-left: 10px solid #000; 

 }
arr.png
  1. 我们用css 边框可以模拟三角效果
  2. 宽度高度为0
  3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
  4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0; line-height: 0;

14. 字体图标

字体图标下载

  1. 选择图标,下载字体包
  2. 解压,将font文件夹放在项目根目录下
  3. 在style.css文件中复制字体声明放在自己css中
  4. 打开demo.html文件复制想要图标的小方框
  5. 设置字体样式‘font-family’,必须和字体声明中的‘font-family’一样
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351