CSS4

1.处理溢出(overflow)

overflow的取值可以是visible.hidden,scroll,auto,其中visible是默认值。visible表示不裁剪内容,也不添加滚动条,强制显示元素内容;

hidden表示裁剪内容,而且不显示超出对象尺寸的内容;

scroll表示裁剪内容,同时提供滚动条;

auto表示只有在必要时才裁剪内容并添加滚动条。

2.指定裁剪区域

rect(top,right,bottom,left)

3.设置元素的可见性(display/visibility)

当设置元素的display属性为none时,元素在页面隐藏起来,不仅元素看不见,而且元素也将退出当前的页面布局层,不占用任何空间。放设置元素的display属性为block(块级)时可以强制将中XHTML的内嵌元素变成块级元素,从而引起后续对象换行。当设置display属性为inline(内嵌级)时,CSS强制将XHTML中的块级元素变为内嵌元素。

visibility属性控制定位的元素是否可见,取值包括:.visible(可见)、hidden(隐藏)和inherit(继承),默认值为inherit。

visilibity属性与display属性的不同之处在于:当隐藏元素时,visilibity属性定义的元素仍然为保留原有的显示空间。

4.处理元素重叠(z-index)

z-index属性用来控制重叠元素的显示顺序,值较高的元素将覆盖值较低的元素。

注意:z-index属性在设置了position并取值为"absolute"或"relative"时有效。可设置为+1或-1等等。

时间: 2024-10-15 13:14:27

CSS4的相关文章

学习微信小程序之css4设置颜色,单位表示,字体样式

颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

css4种布局技巧-float

我所知的常用的布局技巧有四种,原来的三种(1.float布局  2.position布局 3.table布局)以及现在css3新增的flex布局.这四种布局各有优劣 block与inline属性比较 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元素即使设置了宽度,仍然是独占一行. block元素可以设置margin和padding属性. dis

CSS4种展现方式

1嵌入式,直接写到网页中 <style type="text/css"> css样式 如: p{ color:red;}</style> 2.链接式 <style href="..../xx.css" type="text/css"> </style> 3.引入式 <style type="text/css"> @import url(.../xxx.css) <

css---4表单相关伪类

input:enabled{ color:red;} input:disabled{ color:blue;} enabled or disable 表单的状态 input:checked{ width:100px;height:100px;} <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

css4——浮动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> .box1{ /*height: 200px; 嵌套盒子的父亲不方便给高度 */ width: 600px; background-color: pink; overflow: hidden; } .clearfix:after{ content: ""

js判断浏览器类型

js判断浏览器类型  <script type="text/javascript" >     <!--   function getOs()   {       var OsObject = "";      if(isIE = navigator.userAgent.indexOf("MSIE")!=-1) {           return "MSIE";      }      if(isFiref

每日分享

一.判断浏览器类型 /* * 描述:判断浏览器信息 * 编写:LittleQiang_w * 日期:2016.1.5 * 版本:V1.1 */ //判断当前浏览类型 function BrowserType() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 var isIE = use

改变从现在开始

2017-06-16 咳嗽很严重说话也说不了,痰里带血,吓死宝宝了还以为得了肺结核.所以请了一天假去医院检查,花了一上午的时间就在排队.检查中渡过,还好没啥问题这两天注意休息,下午就开始思考人生. 庸庸碌碌7年了,作为一个技术人员真的很失败,可以说是没有技术沉淀,没有一个可以展现自我能力的地方.语言表达能力不行.文章编写作能力也不行,哪儿哪儿都不行,严重的自我否定中. 每天看别人的技术博客感叹好牛啊,我也要变成这样的,然并卵... 每天都很忙却没有收获,做着谁都能做的事情.害怕表现自己,害怕让人

前端学习笔记--16/5~22/5 jQuery,HTML5+CSS3+JS 简易微信贺卡开发

先写一下上周的总结,基本上没有偷懒,每天都有认真学习前端知识.但是有一点目标不清晰.我上周订下来的计划只完成了50%,即是只完成了坐H5+CSS3+JS的小demo.imooc上的jQuery练习并没有完成,而且还差不少. 周六去了一天潜江吃大虾,不过作为弥补,星期天一整天又把缺的时间补回来了. 至于健身,上周属于间隔期,不过在周日这些计划也都重新启动了.到今天也已经完成了执行. 下面来单步跟踪一下每天学的只是吧. 5.16 jQuery使用each()方法遍历元素. 语法: $(selecto