CSS常用知识点总结（一）

最新推荐文章于 2023-08-18 20:40:23 发布

碌碌无为的勤劳家

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量532

点赞数 1

分类专栏： CSS 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/wildwofe/article/details/106504807

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS学习小结

CSS样式引入方式

1、内联样式表(内嵌 行内)  style属性

<div style="width:100px;"></div>

2、内部样式表  style标签

<style> 
	div{width:100px} 
</style>

3、外部样式表  link

<link rel="stylesheet" type="text/css" href="css/style.css"/>

样式表优先级

内联样式 > 内部样式 / 外部样式（内部/外部样式改变不了内联样式中存在的属性的值
）
内部样式和外部样式按照书写顺序来判断优先级

选择器

基本选择器：
	元素选择器 p { }
	Id选择器  #p1 { }
	类选择器  .p1 { }
	通配符选择器  * { }
复合选择器
	并集选择器  p, h1, div { }
	交集选择器  p#p1 { }
	后代选择器	div p { }
	子元素选择器 div > p { }
伪类选择器
	链接伪类选择器：
		:link	未访问的链接	a:link { }
		:visited	已访问的链接	a:visited { }
		:hover	鼠标经过	a:hover { }
		:active	选定（激活）的链接，即点击链接不松开的状态	a:active { }
	结构伪类选择器：
		:first-child	选取属于其父元素的首个子元素的指定选择器
		:last-child	选取属于其父元素的最后一个子元素的指定选择器
		:nth-child(n)	匹配属于其父元素的第n个子元素，不论元素类型，其中的n从0开始，2n就是0,2,4,6,8…,3n就是0,3,6,9…
		:nth-last-child(n)	匹配属于其父元素的第n个子元素，从最后一个开始计数，也就是倒数
		:nth-of-type(n) 	p:nth-of-type(2)  选择属于其父元素第二个p元素的每个p元素
伪元素选择器
	element::first-letter	文本的第一个单词或字（如中文、日文、韩文等）
	element::first-line 文本第一行
	element::selection 可改变选中文本时的样式
	element::before和element::after   在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用
	
注意:  E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

背景属性：background（不可继承）

background-color		背景颜色
background-image	背景图片（有背景图片才可以设置以下的属性）
background-repeat	背景图片平铺方式
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-position	背景图片位置
background-size	背景尺寸
background: 背景颜色 背景图片 图片平铺方式 图片附着方式 图片位置;  // 简写

边框属性：border

border-color	边框颜色
border-width	边框宽度
border-style	边框样式
border-top		上边框
border-bottom	下边框
border-left		左边框
border-right	右边框
border: 边框宽度 边框样式 边框颜色; // border的简写方式，给上下左右设置边框
border-radius   边框圆角属性

内外边距：

margin：外边距
书写方式：
	margin-top  上外边距
	margin-bottom  下外边距
	margin-left	左外边距
	margin-right	 右外边距
	margin: 上下 左右;
	margin: 上 左右 下;
	margin: 上 右 下 左;
注意：
1.	相邻块级元素垂直外边距合并，如果上面元素有下外边距，下面元素有上外边距，它们之间的垂直间距不是二者的间距相加，而是取两者中的较大者。这种情况尽量避免。
2.	嵌套块级元素垂直外边距的合并，对于两个嵌套关系的块级元素，如果父元素没有设置上边框或上内边距，则父元素的上外边距和子元素的上外边距会发生合并，合并之后的外边距为两者中的较大者。

解决方案：1. 可以给父元素添加上边框或上内边距； 
		 2. 可以为父元素添加overflow: hidden;（常用的）

padding：内边距
书写方式：
	padding -top  上内边距
	padding -bottom  下内边距
	padding -left	  左内边距
	padding -right	 右内边距
	padding: 上下 左右;
	padding: 上 左右 下;
	padding: 上 右 下 左;
注意：添加padding后，会改变元素原来的可视大小。
解决方案：1. 使用box-sizing: border-box;盒子模型 ；
		 2. 在给定元素宽高时，就将padding先计算在内

浮动（float ）：用来进行页面布局

文档流（标准流）：标签默认的排列方式及属性
浮动流：脱离文档流之后所在的流

规则：
1.设置浮动以后就脱离了原有的文档流，所以后面的元素就会向前移位进行补充
2. 浮动元素只在自己那一行浮动，不会向前覆盖；但如果该行宽度不够，后面的浮动元素会自动换行
3. 谁先浮动谁就在前面

使用场景：浮动可以将多个块级元素一行排列

存在的问题：

使用浮动后，元素会脱离标准流，也就不再占有位置，下面的元素后上移填补空缺，但会被浮动元素遮住。
子元素使用浮动后，父元素（没有设置高度）会因为子元素浮动而出现高度为0（高度塌陷）的问题。

要解决这些问题就需要清除浮动。

解决方案：

清除浮动之前：
在这里插入图片描述

给脱标元素下面的标准流元素设置clear属性
选择器{clear: left | right | both}
额外标签法：是w3c推荐的做法是通过在浮动元素末尾添加一个空的块级标签，例如：<div style=”clear:both”></div>，或者其他标签都可以。

<style type="text/css">
			.box1,.box3{
				width: 200px;
				height: 200px;
			}
			.box2,.box4{
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: tan;
				float: left;
				margin-left: 50px;
			}
			.box2{
				background-color: teal;
			}
			.box3{
				background-color: thistle;
				/*给脱标元素下面的标准流元素设置clear属性*/
				clear: both; /*常用*/
				/* clear: left; */
			}
			.box4{
				background-color: tomato;
			}
		</style>

		<body>
				<div class="box1">
					<div class="box2"></div>
				</div>
				<!--额外标签法-->
				<!--
				优点： 通俗易懂，书写方便
				缺点： 添加许多无意义的标签，结构化较差。  我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
				-->
				<!-- <div style="clear:both"></div> -->
				<div class="box3">
					<div class="box4"></div>
				</div>
		
			</body>

清除浮动之后：
在这里插入图片描述
3. 父级元素添加overflow属性方法：通过触发BFC的方式，实现清除浮动的效果
给父级元素添加overflow: hidden | auto | scroll都可以实现
4. 使用after伪元素清除浮动
5. 使用before和after双伪元素清除浮动

清除浮动之前：
在这里插入图片描述

<style type="text/css">
			.box1 {
				/* 很多情况下，我们父级元素不方便给高度，因为考虑到子元素的高度会变 */
				width: 600px;
				background-color: #008080;
				/*给父级元素天添加overflow属性清除浮动*/
				/*
				优点：  代码简洁
				缺点：  内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
				*/
				/* overflow: hidden;  常用*/
				/* overflow: auto; */
				/* overflow: scroll; */
			}
			
			/* 使用after伪元素清除浮动 */
			/*after前使用单冒号是为了兼容以前的浏览器*/
			/*注意： content:"."  里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。*/
			/*
			优点： 符合闭合浮动思想  结构语义化正确
			缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
			*/
			/* .clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			} 
			.clearfix {*zoom: 1;}   带有*是IE6、7 专有
			*/
			
			/* 使用before和after双伪元素清除浮动 */
			/*
			优点：  代码更简洁，更常用
			缺点：  由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
			*/
			.clearfix:before, .clearfix:after {
				content: "";
				display: table;
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
  				*zoom:1;  /* 兼容ie6、7 */
			}
			.box2 {
				width: 600px;
				height: 240px;
				background-color: #FF0000;
			}
			/* son1和son2是处于标准流，会撑开父盒子 */
			.son1 {
				width: 150px;
				height: 100px;
				background-color: darkgoldenrod;
				float: left;
			}
			.son2 {
				width: 300px;
				height: 100px;
				background-color: aqua;
				float: left;
			}
		</style>
		<body>
			<div class="box1 clearfix">
				<div class="son1">son1</div>
				<div class="son2">son2</div>
			</div>
			<div class="box2">box2</div>
		</body>