html/css一些进阶知识点

一些常见css属性

padding:
margin:
border:1px solid 颜色		//定义边框
visibility:hidden;			//隐藏占位
display:none;				//隐藏不占位
		block;				//转换为块元素
		inline;				//转换为行内元素
		inline-block;		//行内块元素
float:	left;				//浮动
clear:both;					//清除浮动
text-align:center;			//文本居中
line-height: 100px;			//垂直高度
text-decoration:none;		//去下划线
rgba(0,0,0,0,0);			//前面控制颜色，最后一个参数控制透明度	
overflow:hidden;			//溢出隐藏
		 scroll;			//溢出滚动条
		 auto;				//自适应
white-space:nowrap;			//禁止换行
object-fit:cover;			//会自动截取盒子大小的图片，图片不会压缩变形
border-collapse:collapse;	//边框重叠
background-repeat:no-repeat;//图片x,y不重复
background-position:center;	//贴图居中
background-position-x:1px;	//图片向右移动
position:fixed;				//固定显示屏位置
		 absolute;			//停留在页面固定位置，不占位，绝对定位
		 relatave;			//占原来位置，相对定位
font-weight:bold;			//定义字体粗细，黑体
font-family: 方正粗黑宋简体;	//定义字体样式
max-width:1px;				//最大宽度
border-radius:1px;			//圆角
background:url("图片路径");	//添加背景图片
list-style:none;			//去li，ol前的黑点
z-index: 1;					//防止覆盖，值越大越优先显示
opacity: 1;					//设置透明度。1不透明，0完全透明
box-shadow:0 0 30px 颜色;		//阴影，参数：x轴偏移  y轴偏移  四周模糊程度  颜色
vertical-align:middle;		//垂直居中，只对行内元素有效
word-break:break-all;		//自动换行
.box{}						//根据class属性值设置样式
#box{}						//根据id属性值设置样式
[class]{}					//根据属性设置样式
a:nth-child(1){}			//找第一个元素，第一个元素不是a不显示
a:nth-of-type(1){}			//找第一个元素a
a:hover{}					//鼠标停留变化
a:visited{}					//已防止链接样式
a:active{}					//点击时刻样式
.a{
	width:10px;!important;	//提高优先级
 }	
.a{
	outline:none;			//去a下面的所有外框
 }
 输入框css控制
 	<textarea></textarea>
 	resize:none;			//去拖动
 	border:none;			//去边框
 	outline:none;			//去选中蓝框
平分属性
	display:flex;		//父元素设置
	flex:1;				//子元素设置，表示子元素等分父元素
           

一般初始化样式

*{
	padding:0;
	margin:0;
	box-sizing:border-box;//忽略边距
 }
ul,ol{
 	list-style:none;	//去小圆点
 }
input,textarea{
 	border:0;
 	outline:none;		//去边距
 }
a,a:hover,a:visited,a:focus{
	color:#333;				//白色
	text-decoration:none;	//去下划线
 }
           

简单的动画效果

a{
	transition:all 2s;//过度时间
 }	
a:hover{
	transition:rotate(360deg);//旋转360度
	width:200px;
 }
           

html5的特殊标签

//页面每隔3秒刷新
<meta http-equiv="refresh" content="3" />
//页面3秒后跳转到指定url
<meta http-equiv="refresh" content="3;url=https:/www.baidu.com" />
//设置浏览器顶部图标
<link rel="shortcut icon"  href="图片路径" target="_blank" rel="external nofollow" />
//暗文本框提示
placeholder="提示内容"
//直接跳转
<button onclick="location='index.html'">跳转</button>
注： 	widow.location.href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ;
  		location.href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ;
   		location="";
         效果一样,都是实现直接跳转
//确认跳转
<button onclick="confirm('请确认跳转')?location.href='index.html':''">确认跳转</button>
<a href="index.html" target="_blank" rel="external nofollow"  onclick="return confirm('请确认跳转');">确认跳转</a>
//滚动标签
<marquee>滚动文字</marquee>
           

如果您觉得本篇内容不错,可以点个关注,给个赞