关于CSS知识点的集锦

这篇文章介绍关于css知识点的集锦

CreateTime–2016年9月29日09:43:10
Author:Marydon
1.背景色线性渐变

background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/

登录后复制

UpdateTime–2016年10月25日11:37:53
UpdateTime–2016年11月23日09:53:46    
2.设置表格的边框被合并为一个单一的边框

立即学习“前端免费学习笔记(深入)”;

border-collapse: collapse;/*前提:table的border=1或border="1"或border="1px"*/

登录后复制

UpdateTime–2016年10月29日09:04:07
3.设置p最小高度及高度自动伸展

#pHeight{height:auto;min-height:5px;width:800px; background:#bbeeeb;margin:0 auto;}   

登录后复制

   此p具有最小高度且高度可以随着内容的增高而自动伸展
  此p具有最小高度且高度可以随着内容的增高而自动伸展

登录后复制

  设置最小宽度及宽度自动伸展

width:auto;min-width:5px;height:800px;

登录后复制

4.禁止换行的两种方式
  方式一:
    通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在~标签里的话,则不会换行
    使用标签
  方式二:
    使用CSS样式

style="white-space:nowrap;"

登录后复制

    UpdateTime–2016年11月25日08:57:49
  设置td禁止换行


登录后复制

UpdateTime–2016年10月31日09:44:17
5.display样式
  inline     行内元素(与其它元素共占一行,不换行,不能设置宽和高)
  block     块级元素(单独占一行,可以设置宽和高)
  inline-block    行内块级元素(与其它元素共占一行,但是可以设置宽和高)(兼有了行内元素和块级元素的特征)
  none     将该元素隐藏

document.getElementById("aa").style.display="";//表示的是:清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)

登录后复制

UpdateTime–2016年11月24日11:44:31
6.ime-mode语法和text-transform语法
  UpdateTime–2016年12月15日19:52:16

/*屏蔽输入法,可以用来禁止录入中文*/  ime-mode:disabled; //IE兼容,chrome不兼容  /*将输入的英文字母转全部换成大写字母*/  text-transform:uppercase;  UpdateTime--2017年1月9日10:23:23/*将输入的英文字母转全部换成小写字母*/  text-transform:lowercase;  

登录后复制

  详细介绍
    ime-mode语法:(该语法在google浏览器上无效,需要用js进行控制,见”input文本框输入内容控制”文件)
      ime-mode : auto | active | inactive | disabled
      取值:
      auto :       默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
      active :     指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
      inactive :   指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
      disabled :     完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME
      text-transform语法:
      text-transform : none | capitalize | uppercase | lowercase
      取值:
      none :      默认值。无转换发生
      capitalize :     将每个单词的第一个字母转换成大写,其余无转换发生
      uppercase :     转换成大写
      lowercase :     转换成小写
7.设置p里的内容自动换行
  当p框固定高度宽度后,显示的内容超过p的宽度,超出内容不换行的问题
  设置css样式

  word-wrap:break-word;

登录后复制

8.实现p,li里的内容超出容器宽度时,超出部分以”..”形式显示
  前提:必须先确定p,li的宽度
  添加属性

  text-overflow:ellipsis;  white-space:nowrap;  overflow:hidden;

登录后复制

9.文本框和密码框在IE浏览器显示样式控制

/*去除IE浏览器文本框右侧出现叉号*/  #aa::-ms-clear {    display:none;  }  /*去除IE浏览器密码框右侧出现眼睛*/  #bb::-ms-reveal {    display:none;  }

登录后复制

 

登录后复制

以上就是关于CSS知识点的集锦的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2905858.html

(0)
上一篇 2025年3月11日 02:31:43
下一篇 2025年3月11日 02:32:04

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详解CSS的writing-mode文字排版属性使用的方法

    writing-mode经常被用来实现页面文字的竖排,这里我们来系统地看一下详解css的writing-mode文字排版属性使用的方法,其中包括一个古诗的例子来展示writing-mode文字竖排用法 语法: writing-mode : …

    编程技术 2025年3月11日
    200
  • 分享CSS中一些@规则的用法

    这篇文章主要分享css中一些@规则的用法,是css入门学习中的基础知识,需要的朋友可以参考下 at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做…

    编程技术 2025年3月11日
    200
  • 必看的css布局小技巧分享

    下面小编就为大家带来一篇必看的css布局小技巧分享。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 1.max-width: 当页面左右宽度缩小时,为了避免出现左右滚动条的糟糕体验,就可以用到max-width啦…

    编程技术 2025年3月11日
    200
  • 实例讲解使用CSS保持页面内容宽高比方法

    这篇文章实例讲解使用css保持页面内容宽高比方法,作者举了伪元素和vw单元等不同方法下的例子,需要的朋友可以参考下 需求描述:移动端实现横跨页面半圆。(类似问题,实现4×4的正方形网格) 简化问题,我们可以理解为实现一个高度和宽度…

    2025年3月11日 编程技术
    200
  • 将页脚固定在页面底部的CSS实战教程

    这篇文章主要介绍了将页脚固定在页面底部的css实战,其中注意一下css清理浮动的问题,需要的朋友可以参考下 页脚的位置问题 网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方。页脚自然是应该位于页面底部的,但依照一般的做…

    2025年3月11日
    200
  • 详解CSS元素居中布局的简单方法

    这篇文章主要介绍了详解css元素居中布局的简单方法,文中介绍了内嵌元素和块元素以及行内块三种情况,需要的朋友可以参考下 首先我们需要知道元素都有哪些种类?     内嵌元素(display:inline;)如a,span,b,i 【一个不可…

    2025年3月11日
    200
  • css实现背景透明和文字不透明方法

    这篇文章介绍css实现背景透明和文字不透明方法 实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法 css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, gre…

    2025年3月11日 编程技术
    200
  • CSS比较常用的翻转特效

    第一个:360度翻转特效 * { margin:0; padding:0;}.aa { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url(“imag…

    编程技术 2025年3月11日
    200
  • CSS盒子模型介绍

    什么是css盒子模型?css盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型 一、什么是CSS? CSS(Cascading Style Sheet):层叠样式表是将网页的内容与样…

    2025年3月11日
    200
  • CSS教程之div垂直居中的多种方法

    这篇文章主要为大家详细介绍了css教程之p垂直居中的多种方法,还包括多行文本垂直居中的方法,感兴趣的小伙伴们可以参考一下 在说到这个问题的时候,也许有人会问CSS中不是有vertical-alignvertical-align来设置垂直居中…

    编程技术 2025年3月11日
    200

发表回复

登录后才能评论