CSS学习小记(常被初学者忽视的小技巧)

最新推荐文章于 2024-08-12 22:06:26 发布

zmf19901117

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量164

点赞数 1

分类专栏：知识点小总结文章标签： css

本文链接：https://blog.csdn.net/zmf19901117/article/details/105410002

版权

知识点小总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

类名（选择器命名）小技巧

长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器
不能用纯数字、中文等命名，尽量使用英文字母来表示。
各个类名中间用空格隔开。如，

<div class="red cover"></div>

字体使用小技巧

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。IE6等老式浏览器使用奇数时会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。同时设置几种字体时，英语字体必须的中文字体之前。
即使是英文字体的设置，如果其中有$、空格、#等特殊符号的也必须用英文状态下的单引号或双引号。
如， font-family: ‘Times New Roman’;
尽量使用默认字体，保证在任何用户的浏览器中都能正确显示。
font-weight中 normal=400, bold=700,但我们更喜欢用数字。
字体连写必须有“字体大小”和“字体类型”两个属性。

font: font-style, font-weight, font-size/line-height, font-family;
/*（1）必须按照这个顺序填写
	（2）不需要的属性可以省略（取默认值），但必须保留font-size
	和font-family属性。
*/

标签显示模式（display:block/inline-inline-block）

行内元素的特点

宽、高无效，垂直方向的margin和padding无效，但水平方向上的margin和padding是可以设置的。
行内元素只能容纳文本和其它行内元素。（a元素除外，a里面可以放块级元素）。

块级元素

默认宽度是容器的100%
p/h1~h6/dt等虽然的块级元素，但它们里面只能放文字，不能放其它块级元素。

行内块元素
如image/input/td就属于此类型。
和相邻行内元素(行内块)在一行上，但之间会有空白缝隙（实质为其代码之间有空格或回车或Tab所导致的）。
image标签使用margin: x auto无法使其剧中对齐，不使用auto则有效，并且对其使用padding属性不会撑开盒子，我也不明白原因是什么？

inline-block 与行内元素的中线对齐可用vertical-align: center;

如图片：在这里插入图片描述

CSS继承

子元素可以继承父元素的样式主要是和字体有关的：text- , font-, line-等。

CSS优先级

通配符*的优先级（权重）为0
继承的样式权重为0（不管其父元素的权重有多大）

嵌套元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边框，则父元素的上外边距会与子元素的上边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。如，看代码：

.father {
		width: 500px;
		height: 500px;
		background-color: pink;
}
.son {
		width: 200px;
		height: 200px;
		background-color: purple;
		margin-top: 50px;
		margin-left: 50px;
	}

运行结果如下：
在这里插入图片描述
解决方案：

可以为父元素定义1像素的上边框或上内边距。
可以为父元素添加overflow: hidden。

.father {
		width: 500px;
		height: 500px;
		background-color: pink;		
		/*border-top: 1px solid pink; 1. 用border*/ 
		/*padding-top: 1px;           2 用padding */
		overflow: hidden;  /*3. 用这个单词可以解决*/ 		
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: purple;
		margin-top: 50px;
		margin-left: 50px;
	}

运行结果如下：
在这里插入图片描述
所以从盒子布局的稳定性上而言，优先使用width/height，其次是padding（会影响盒子大小需要进行加减计算），再次margin（垂直外边距合并的问题）。

盒子的水平剧中对齐

margin: 0px auto;
注意，此盒子必须指定的宽度。
注意，加了定位和浮动的盒子，这个方法就失效了。

浮动

元素(无论是块级元素还是行内元素)添加浮动后，会具有行内块元素（inline-block）的特性。

定位

定位模式转换

元素(无论是块级元素还是行内元素)添加“绝对定位”和“固定定位”后，会具有行内块元素（inline-block）的特性。
而“相对定位（relative）”则不会将其转换为inline-block。

相对定位

相对定位会脱离标准流，但是原来的位置仍然占有。

关于z-index

只有定位的盒子才可以使用z-index（叠放次序属性）。

关于浮动和定位压住盒子的现象差异

绝对定位(固定定位)会完全压住盒子

浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片),但绝对定位(固定定位)会压住下面标准流所有的内容。

浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。

盒子背景

背景缩放background-size

背景尺寸缩放一定要放在“background-image”之后才能起作用。如：div {
background: url(‘images/ctrip.png’) no-repeat 0 -125px;
background-size: 104px;
/* 这样则是正常显示背景图片的 /
}
div {
background-size: 104px;
background: url(‘images/ctrip.png’) no-repeat 0 -125px;
/ 这样则是不正常的显示的 */
}