前端知识点小总结

最新推荐文章于 2024-05-27 00:00:00 发布

...lemon_...

最新推荐文章于 2024-05-27 00:00:00 发布

阅读量293

点赞数 1

分类专栏： frontEnd

本文链接：https://blog.csdn.net/qianqianningmeng/article/details/79165403

版权

frontEnd 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1.css样式加载优先级以及js动态修改样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css样式加载顺序、优先级</title>
	<style type="text/css">
		a{
			color: #ccc;
		}
		#box a{
			color: #185;
		}
		.container a{
			color: blue;
		}
		h1 a{
			color: red;
		}
	</style>
</head>
<body>
	<div id="box">
		<h1 class="container">
			<a href="javascript:;" style="color: yellow">
				css样式加载顺序、优先级
			</a>
		</h1>
		<p id="pTxt">点击按钮更改字体样式</p>
		<button οnclick="test()">点击</button>
	</div>
	<script type="text/javascript">
		function test(){
			var txt=document.getElementById("pTxt");
			console.log(txt.innerHTML);
			txt.style.cssText="color:red;"
		}
	</script>
</body>
</html>

以上a标签中文字颜色为yellow；若将a标签中style样式去除后a标签的字体颜色为#185；

由此可看出css样式加载优先级：行内样式>id>类>元素>通用*

2.固比固样式实现，以下是html代码布局

<div class="wrap">
		<div class="left">左宽200px</div>
		<div class="center">中间自适应</div>
		<div class="right">右宽200px</div>
	</div>

1）是我工作中最常用的，也应该是最简单的利用flex布局；2）时采用了绝对定位的方式；3）采用了表格的属性，并且使用css中的calc()方法。对于此方法陌生的可以自己扩展一下哦

/*第一种也是最常用的 flex布局
		.wrap{
			width: 100%;
			height:50px;
			display:flex;
		}
		.left,.right{
			float:left;
			width:200px;
			height:100%;
			background-color:#090;
		}
		.center{
			float:left;
			flex:1;
			background-color: #185;
		}*/
		/*第二种绝对定位
		.wrap{
			width: 100%;
			height:50px;
			position: relative;
		}
		.left,.right{
			position: absolute;
			top: 0;
			height: 100%;
			width: 200px;
			background-color: #090;
		}
		.left{
			left: 0;
		}
		.right{
			right: 0;
		}
		.center{
			width: 100%;
			height: 100%;
			padding:0 200px;
			box-sizing: border-box;
			background-color: #182;
		}*/
		/*第三种 表格样式*/
		.wrap{
			width: 100%;
			height:50px;
			display: table;
		}
		.left,.right{
			width: 200px;
		    height: 100%;
		    background-color: #B1D5EF;
		    display: table-cell;
		}
		.center{
			width: calc(100% - 200px);
		    width: -webkit-calc(100% - 50px);
		    height: 100%;
		    background-color: #268BD2;
		    display: table-cell;
		}

3.元素垂直水平居中

第一种比较符合不确定父级元素宽高时

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>垂直水平居中</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 200px;
			height: 200px;
			background-color: #268BD2;
			position: absolute;
			top:0;
			left: 0;
			bottom:0;
			right:0;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="wrap">
	</div>
</body>
</html>

2）当父级有固定宽高时

<div class="wrap">
		<div class="container"></div>
	</div>

.wrap{
			width: 500px;
			height: 500px;
			background-color: #268BD2;
			position: relative;
		}
		.container{
			width: 200px;
			height: 200px;
			background-color: #185;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -100px;
		}

3)flex 布局

.wrap{
			display: flex;
			width: 500px;
			height: 500px;
    		background-color: #268BD2;
    		justify-content: center;
    		align-items:  center;
		}
		.container{
			width: 200px;
			height: 200px;
			background-color: #185;
		}

4）table-cell

.wrap{
			width: 500px;
			height: 500px;
			display: table-cell;
			vertical-align: middle;
    		background-color: #268BD2;
		}
		.container{
			width: 200px;
			height: 200px;
			background-color: #185;
			margin: auto;
		}