CSS3学习笔记-01

最新推荐文章于 2021-09-08 18:00:06 发布

KrystalQ

最新推荐文章于 2021-09-08 18:00:06 发布

阅读量544

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/KrystalQ/article/details/65443243

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css3特性

1.1宽度、rem、animate

（1）cal():用来指定元素的宽度：如：width: calc(100% - (10px + 5px) * 2);

（2）vw:相对于视窗的宽度,长度等于视口宽度的1/100

vh: 相对于视窗的宽度，长度等于视口高度的1/100

vm:相对于视窗的宽度或高度，取决于哪个更小

vmin和vmax是相对于视口的高度和宽度两者之间的最小值和最大值。

（3）基于设计中的字体大小计算获取像素：

rem:基于根元素（html）字体大小（浏览器默认值为16px，若html{font-size:62.5%;},则1em=10px）;计算：10 / 16 *100 = 62.5%

em:基于父元素的字体大小。

translate(xSpeed,ySpeed):水平和垂直方向上的移动;

(说明：使用rem涉及到雪碧图时，图与图之间的空隙需要留大些，免得缩放图片造成越界；)

（4）animate：动画和视频的要素：名称(animation-name)、播放时长(time)、播放快慢、是否延迟播放、是否无限播放、是否倒放、是否暂停、是否需要有所变化关键帧：@keyframes

1.2让ie支持css3的属性

可通过引用文件pie.htc来实现（通过css的behavior行为来调用），PIE的方法使用与平常使用的css3属性一样，只要链接pie.htc即可，

如：

.show{	width:100px;

	height:30px;

	background-color:#8FBBF2;

	color: white;

	border-radius: 10px;

	behavior:url('./PIE.htc');

1.2.1 .htc文件只有ie才能识别,behaviors是一种通过使用CSS向HTML元素添加行为的方法，只有ie可以识别它。

1.3 flex布局（Flexible Box 弹性布局）

（1）设置在容器上的6个属性

flex-direction(row|row-reverse|column|column-reverse)

flex-wrap:设置如何换行(nowrap|wrap|wrap-reverse)

flex-flow(是flex-direction和flex-wrap的缩写)

align-content:定义多个轴的对齐方式

（2）设置在项目上的6个属性

order:排列顺序，越小越靠前 flex-grow：定义放大比例（针对剩余空间）

flex-shrink:定义缩小比例(针对空间不足时)

flex-basis:定义项目占据主轴的空间

flex:是flex-grow,flex-shrink和flex-basic的简写, 默认取值为：flex: 0 1 auto

align-self：定义自身的对齐方式（可跟其他项目不一致）

例：

div{
      /*  -webkit-box-orient:block-axis;
	box-orient:vertical;*/
       /*  -webkit-box-direction:reverse;
	box-direction:reverse; */

         /* -webkit-box-pack:center;
		box-pack:center */

          /*-webkit-box-pack:justify;
	box-pack:justify */

       /*  display: -webkit-box;display: box;
	height:500px;
	border:1px solid #f00;
       -webkit-box-pack:center;
	box-pack:center;
       -webkit-box-align:center;
	box-align:center; */

	display: flex;
       /*flex-direction:row-reverse;*/
       /*flex-wrap:wrap;*/
	justify-content: space-between ;
    }
p{
     width:150px;border:1px solid black;padding:5px;margin:5px;background:blue;
   }
<div>
<p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p>
<p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p>
<p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p>
</div>

Tip: 1.设置flex布局之后，子元素的float,clear 和vertical-align属性将失效；

1.4旋转rotate、rotateX、rotateY、rotateZTransform-origin取值与background-position取值类似，如：right center (100% 50%)

参考网址：http://www.tzwhx.com/NewShow/newBodyShow/CSS_31861.html

1.5移动端字体可使用@font-face将自己定义的Web字体嵌入到你的网页。

三大手机系统默认字体：

ios 系统默认中文字体是Heiti SC,

默认英文字体是Helvetica,

默认数字字体是HelveticaNeue,

无微软雅黑字体

android 系统默认中文字体是Droid sansfall back（与微软雅黑相似）,

默认英文和数字字体是Droid Sans,

无微软雅黑字体,

winphone 系统默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

无微软雅黑字体

知名网站移动端默认的字体：Taobao:font-family: sans-serif;Amazon：font-family: "Hiragino Sans GB","Microsoft Yahei",Arial,sans-serif;

携程：font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;

当前使用：font-family:"SegoeUI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;1.6 placeholder

1.6 .1 js实现placeholder兼容ie

CSS:.inputWrap {
	position: relative;
	font-size: 12px;
	margin: 10px;
}

.inputWrap input {
	border: 1px solid #ccc;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	width: 200px;
}

.inputWrap .placeHolder-tip {
	color: #999;
	position: absolute;
	left: 10px;
	top: 0;
	height: 32px;
	line-height: 34px;
}

Html:<div class="txt"><input type="text" value=""/></div>






JS:调用：PlaceHoldeOfIE.initPlaceholder($('.inputWrap
 input'), '提示内容', 'placeHolder-tip');
注：IE8的change事件是不会立即触发，除非它失去焦点，而在其他标准浏览器中(包括IE9)，是点击后立即触发change事件的，解决IE8这个问题方法，使用元素特有的propertychange事件来处理(IE9已经没这玩意儿了)

var PlaceHoldeOfIE = {
	initPlaceholder: function($input, msg, tipClsName) {
		var isIE = !! window.ActiveXObject || 'ActiveXObject' in window;
		var isPlaceholder = 'placeholder' in document.createElement('input');
		if (isPlaceholder && !isIE) {
			$input.attr('placeholder', msg);
		} else {
			var $tip = $('<span class="' + tipClsName + '">' + msg + '</span>');
			$input.after($tip);
			var that = this;
			if ($input.val() != '') {
				that.hideHolderTip($input);
			}
			$input.bind('propertychange', function() {
				that.handelInputChange($input, $tip);
			});
		}
	},
	hideHolderTip: function($input) {
		var $tip = $input.next('span');
		if ($tip) {
			$tip.hide();
		}
	},
	handelInputChange: function($input, $tip) {
		var val = $input.val();
		if (val == '') {
			$tip.show();
		} else {
			$tip.hide();
		}
		$tip.click(function() {
			$input.focus();
		});
	}
}








1.6.2更改默认的placeholder颜色
::-webkit-input-placeholder
 { /* WebKit browsers */ color: #999;}:-moz-placeholder
 { /* Mozilla Firefox 4 to 18 */color: #999;}::-moz-placeholder
 { /* Mozilla Firefox 19+ */color: #999;}:-ms-input-placeholder
 { /* Internet Explorer 10+ */color: #999;}或
 input::-webkit-input-placeholder{font-size: 14px;}
1.7 background-size
background-size:contain/cover
 都是等比缩放（可单独设置width或height）
background-size:100%
 100% 可根据填充的内容进行伸缩或拉伸
说明：auto:使用图片的原始大小；cover:等比缩放以填充整个元素区域；contain:等比缩放以使其较长的一边适应元素大小
1.8 css3常用属性
border-radius、box-shadow、text-shaow、text-stroke、多背景图片、background-size、
text-shadow、{
 text-overflow:ellipsis overflow:hidden;
 white-space:nowrap;}
flexible
 box modelresize(只有firefox4和safari3支持)
transition:转换属性
 持续时间 缓动类型
2.0 Mobile相关
2.0.1
 media区分iPhone版本

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
/*iPhone 6 Portrait*/
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
/*iPhone 6 landscape*/
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
/*iPhone 6+ Portrait*/
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
/*iPhone 6+ landscape*/
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) {
/*iPhone 6 and iPhone 6+ portrait and landscape*/
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait) {
/*iPhone 6 and iPhone 6+ portrait*/
}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape) {
/*iPhone 6 and iPhone 6+ landscape*/
}/* iphone4*/@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
} /* iphone5*/@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
} /* iphone6竖屏*/@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}/* iphone6 plus竖屏*/@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}





2.0.2
 webkit-app要点
（1）横、竖屏的样式引入//竖屏时使用的样式

<style media="all and (orientation:portrait)" type="text/css">#landscape {
	display: none;
}</style>
 //横屏时使用的样式 <style media="all and (orientation:landscape)" type="text/css">



（2）事件手势事件：touchstart、touchmove、touchend、touchcancel
触摸事件：gesturestart(两个手指接触屏幕时触发)、
gesturechange(两个手指触摸屏幕后开始移动时触发)、
gestureend屏幕旋转事件：
	onorientationchange（window.orientation取值：）0，-90,90,180

touch事件支持的相关属性：
touches        
targetTouches      
changedTouches             
clientX　// X coordinate of touch relative to theviewport (excludes scroll offset)      
clientY　// Y coordinate of touch relative to theviewport (excludes scroll offset)      
screen // Relative to thescreen        
screenY // Relative to thescreen       
pageX　// Relative to the full page (includesscrolling)     
pageY　// Relative to the full page (includesscrolling)     
target　// Node the touch event originatedfrom      
identifier// An identifyingnumber, unique to each touch event

（3）盒模型(边界、填充)
 -webkit-box-sizing:border-box/content-box
（box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;）
 -webkit-box-shadow:hoff voff blur color 阴影(参数分别为：水平x方向偏移量；垂直Y方向偏移量；高是模糊半径值；阴影颜色值)

KrystalQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3学习笔记-01

css3特性1.1宽度、rem、animate（1）cal():用来指定元素的宽度：如：width: calc(100% - (10px + 5px) * 2);（2）vw:相对于视窗的宽度,长度等于视口宽度的1/100vh: 相对于视窗的宽度，长度等于视口高度的1/100vm:相对于视窗的宽度或高度，取决于哪个更小vmin和vmax是相对于视口的高
复制链接

扫一扫

专栏目录