前端-css，基础知识，需要了解需要使用

tl110110tl

已于 2022-04-12 14:42:09 修改

阅读量196

点赞数

分类专栏：前端文章标签： css

于 2022-04-01 17:43:08 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/123901954

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.选择器的权重

以下权重，进位为255（意为逢255进1）

①标签选择器【div p span】：权重1

②类选择器【.title .current 】：权重10

③ID选择器【#loginDiv】：权重100

④行内样式：权重1000

⑤height: 20px !important ; ：权重无限大

例：.box .current ul li

被选中的所有li权重为 22

当标签被选中，则权重生效，权重相同（均大于0）则谁在css代码中位置靠后，谁生效。

如果未选中，权重均为零，权重均为零，则谁选中的最后一个元素和待改变元素近，谁生效。如果一样近，再回头看权重，虽然都是零，但谁看上去大听谁的。如果这时候权重看上去也一样，谁在css代码中位置靠后，谁生效

<style type="text/css">
	div.d{
		color: red;
	}
</style>
</head>
<body>
	<div>
		<div class="d">
			<p>
				<span>这是红色</span>
			</p>
		</div>
	</div>
</body>

<style type="text/css">
	div.d{
		color: red;
	}
	div p{
		color: blue;
	}
</style>
</head>
<body>
	<div>
		<div class="d">
			<p>
				<span>这是蓝色，因为 div p 选中的标签距离我近一些</span>
			</p>
		</div>
	</div>
</body>

<style type="text/css">
	.d p{
		color: red;
	}
	div p{
		color: blue;
	}
</style>
</head>
<body>
	<div>
		<div class="d">
			<p>
				<span>这是红色，因为都选择了p，同时.d p 的权重看上去大一些</span>
			</p>
		</div>
	</div>
</body>

<style type="text/css">
	p{
		color: red;
	}
	p{
		color: blue;
	}
</style>
</head>
<body>
	<div>
		<div class="d">
			<p>
				<span>这是蓝色，都选中了p，同时权重相同，则看谁后加载</span>
			</p>
		</div>
	</div>
</body>

2.属性font开头，text开头，color。是可以继承给选中标签的所有后代标签的。

3.css中的废弃标签【现在用来做网页中的钩子】

<style type="text/css">
	s,i,em{font-style:normal;text-decoration:none;}
</style>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<del>删除线</del>
<em>强调</em>
<strong>强调</strong>

4.css基本标签设置【部分，以后学到再补】

@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
select, input { vertical-align:middle;}
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; } /*防止拖动*/
img {border:0;	vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙*/
table { border-collapse:collapse; }
body {
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix{
    *zoom:1;/*IE/7/6*/
}
a {color:#666; text-decoration:none; }
a:hover{color:#C81623;}
h1,h2,h3,h4,h5,h6 {text-decoration:none;font-weight:normal;font-size:100%;}
s,i,em{font-style:normal;text-decoration:none;}

5.清除浮动【不熟悉】

浮动，使元素脱离标准文档流，导致父标签的高度height，无法被浮动的子标签自动填充，从而影响后面的元素标签位置。解决方案，奇技

在父盒子中的最后，加入一个div【块级元素即可，行内元素不行】，使该div（高度为0）清除浮动clear:both;即可。（W3C推荐做法，但是实际不常用）

父盒子设置overflow:hidden，也可【小的box可以用这个标签，hidden，auto，scroll均可】

父盒子外，新加一个div，高度为0，清除浮动clear:both;即可

目前主流写法，见【4.css基本标签设置】双伪元素清除浮动

6.盒子的水平居中【这要求盒子必须有宽度】

.box {
	width: 1000px;
	margin: 0 auto;
}

7.绝对定位，参考点

绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：

绝对定位的盒子居中：

.box {
	width: 200px;
	height: 200px;
	position: absolute;
	top:50%;
	left:50%;
	margin-left: -100px;
	margin-top: -100px;
}

8.定位的盒子

position: relative;//依然占位在文档流中，一般给儿子标签作为参考定位点用

position: absolute;//不占用文档流中的位置，一般配合他爹微调位置用。

①定位的盒子，后面的一定会压住前面的

②可以通过z-index：9999，来提高自己，从而压住别人

③【从父现象】但是如果父级标签的定位，被别的父级标签定位比下去。即便自己z-index：999也没有别的父级标签的儿子高。一定被压。

④一些可以动的特效，基本都要依靠定位，然后通过改变定位元素的left和top值实现

⑤js操作left值，用 dom.style.left = numX + "px";

9.显示隐藏

display: none;//隐藏的标签，不占用文档流
display: block;
visibility: visible;
visibility: hidden;//隐藏的标签，依然占用文档流

10.单行、多行文本溢出，用省略号显示

//单行文本
/*
*1.强制1行显示
*2.超出部分隐藏
*3.文本用省略号代替超出部分
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

//多行文本，兼容性很差，只支持webkit内核浏览器，移动端大多是此浏览器
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型 */
display: -webkit-box;
/* 限制再一个块元素内显示的文本行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;