CSS基础/css详解

已于 2022-03-14 11:27:13 修改
阅读量1.2k 收藏 5
点赞数 3
文章标签： python 开发语言
于 2022-03-12 13:28:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65878076/article/details/123439611
版权

目录

 

一：css介绍

1.1：什么是css？

二：css的引入（也可以说和html怎么结合在一起使用）

2.1：第一种行内式

​2.2：第二种内嵌式

2.3：第三种外链式

2.4：第四种导入式

 三：选择器、

3.1 ：基本选择器

3.2 ：高级选择器

 四、css基本设置

4.1 ：字体样式font

4.2：文本样式:text

4.3：文本溢出处理

4.4：超链接伪类

4.5：边框样式

        4.5.1：常规边框

        4.5.2：边框制作三角形

4.6：背景样式

4.7：列表

​4.8：盒子模型 

 五、浮动流与定位流

         5.1：浮动特性

5.2：解决父级边框塌陷

5.3：定位流position

        5.3.1、相对定位：relative:

        5.3.2、 绝对定位:absolute

        5.3.3、fixed:固定定位特点

        5.3.4、粘性定位

        5.3.5：解决父子传递 

        5.3.6：Z-index和透明度

六:元素显示与隐藏

一：css介绍

1.1：什么是css？

  • css全称叫做CaseCading Style Sheets
  • css是在hTML的基础上用来告诉浏览器html里面的内容以什么样的方式呈现给大家
  • 用css来渲染html，让我们的页面看起来更有层次感，更好看。
  • 最重要的是，它可以同时控制多个页面的布局，可以大量节约我们的时间。

二：css的引入（也可以说和html怎么结合在一起使用）

css引入的方式有四种，我们看看他们的区别，

2.1：第一种行内式：

        行内模式就是在我们的标签身上直接添加style，直接改变他们的样式。

        优点：操作简单，快捷，

        缺点：每次只能改变一个标签。

​<body>
<body>
		<p style="color: red;background-color: pink;">我是不是一个大帅哥？</p>
	</body>
​</body>
​

2.2：第二种内嵌式： 

        内嵌式它的位置一般处在<head>标签里面，

        优点：我们可以一次实现多个标签的修饰

        缺点：只能对本页面实现装饰

 2.3：第三种外链式： 

        外联式需要我们单独创建一个.css文件然后在<head>标签里面使用link引入

        优点：创建的css文件可以同时被多个页面引用，

        缺点：需要创建单独的css目录，css文件，操作有一点麻烦

 

<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
		<p>你好</p>
		<div>我帅吗？</div>
		<div>你很帅</div>
</body>

 2.4 ：第四种：导入式，

导入式既可以写在内嵌中，也可以写在外链中

	<style type="text/css">
			@import url("css/test1.css");
	</style>

 这里导入式平时使用的不多，@import和link不同之处：

- link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS, 定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于加载 CSS;
- 页面被加载的时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载;
- import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
- link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;

它们的权重顺序方式：行内>内嵌>外链   就近原则，最晚优先！

注意: 他们平时的顺序方式是这样的，但是有需要的话我们可以通过! important来设置权重，改变他们的优先级  看下面的例子 这里是三种方式同时存在 正常该执行，‘’行内式‘’背景颜色为yellow，但是我们在上面内嵌式里面设置了！important ，所以这里显示的red

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/test.css"  />
		<style type="text/css">
			p{
				background-color: red !important;	
			}
		</style>
	</head>
	<body>
		<p style="background-color: yellow">段落</p>
	<!-- 	<p>段落</p> -->
	</body>
</html>

 三：选择器、

     选择器我们平时正常使用分为两大种：

3.1 ：基本选择器：

  1.  标签选择器/元素选择器： p{}
  2.  id选择器 ：在元素中定义id，在style中定义的id前面＋#
  3. 类选择器 ：在元素中定义class，在style中定义的id前面＋. 
    <head>
<style type="text/css">	
        /* 元素选择器 */
			p{
				background-color: #0000FF;
			}
			/* 类选择器： */
			.a{
				color: #FF0000;
			}
		
		.pp{
			font-family: 隶书;
			font-size: 30px;
		}	
		id选择器：
		#yqb{
			font-weight: 900;
		}
		</style>	
	</head>
	<body>
		<p class="a pp" id="yqb">段落1</p>
		<p class="a pp">段落2</p>
		<p class="a">段落3</p>
		<div>
			<p>段落4</p>
		</div>
	</body>

     3.2 ：高级选择器：

  • 通配符选择器 *{}
  • 并集选择器 p，div{}
  • 后代选择器 E F：选择E的所有后代F    E F{}
<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 通配符选择器:选出所有标签 */
			* {
				color: red;
			}
			/* 并集选择器 */
			div,ul {
				background-color: #0000FF;
			}
			.active,ul {
				font-size: 30px;
				font-weight: 800;
			}
			/* 后代选择器E F：选出父元素E的所有子孙元素F */
			p a {
				font-family: 隶书;
				font-size: 60px;
				font-weight: 900;
			}
			ul a {
				color: orange;
			}
		</style>
	</head>
	<body>
		<div class="active">段落1</div>
		<p><a href="#">淘宝</a></p>
		<p>段落2</p>
		<ul>
			<li>段落3</li>
			<li><a href="#">百度</a></li>
		</ul>
	</body>

 四、css基本设置

      4.1 ：字体样式font：

        1.font-size：大小，px/em

        2.font-weight：粗细 100-900 lighter更细 bold粗 bolder更粗

        3.font-style:风格 italic倾斜 normal默认 qblique 让没有倾斜的文字倾斜

        4.font-family:类型 英文 中文

        5.简写：font:（风格 粗细 大小 类型）

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		p{	
			/* 
			字体风格 ：
				normal:正常，默认
				Italic:是使用文字本身的斜体属性；
				oblique:是让没有斜体属性的文字倾斜！
			*/
			font-style:italic;
			/* 
			字体粗细：100-900
			normal:正常，默认
			lighter:比正常更细
			bold/bolder：粗/更粗
			 */
			font-weight: normal;
			/* 字体大小 */
			font-size: 30px;
			/* 字体类型 ：如果浏览器不支持第一个，会往下自动使用第二个
						 中文必须放在在英文之后。
			*/
			font-family: "times new roman","隶书";
			}
			div{
				 color:red;
				 font:italic lighter 30px "times new roman","隶书";
			}
		</style>
	</head>
	<body>
		<p>welcome段落1</p>
		<div>段落2</div>
	</body>

4.2：文本样式:text

        1.color:字体颜色

        2.text-indent:首行缩进 px/em

        3.text-decoration：文本装饰 underline下划线/overline上划线line-through删除线 none 都没有

        4.text-align:水平设置 center/left/right

        5.text-transform：转换大小写 capitalize首字母大写/lowercase小写/uppercase大写

        6.letter-spacing:文字或字母之间的间距

        7.word-spacing:单词之间的间距

        8.vertical-align:定义基线的对齐方式 常用于img td input等行内块元素

                middle 该元素中线与父元素中线对齐

                baseline:该元素底线与父元素基线对齐

                top:该元素顶线与父元素基线对齐

        9.line-heihgt:行高，设置行高和高度一致实现文本垂直居中

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width: 500px;
				height: 60px;
				background-color: pink;
				/* 字体颜色 */
				color:red;
				/* 水平设置  left right center*/
				text-align: left;
			/* 
				设置字体居中，行高和高度一致
				设置段落间距 
				*/
			   line-height: 60px;
			   /* 文本缩进 */
			   text-indent: 2em;
			   /* 文本装饰 
			   underline:下划线
			   overline：上划线
			   line-through:删除线
			   */
				text-decoration: line-through;
				/* 大小写设置：
				 lowercase:全部小写
				 capitalize:首字母大写
				 uppercase:全部大写
				 */
				text-transform: capitalize;
				/* 改变文字或者字母之间的间距 */
				/* letter-spacing:10px; */
				/* 改变英文单词之间的间距 */
				word-spacing: 50px;
			}
		</style>
	</head>
	<body>
		<p>hello byebye你好</p>			
		<p>welcome to美女</p>
	</body>

4.3：文本溢出处理：

我们平时在写东西的时候肯定可以看到有的盒子太小放不下，这时候就用到了内容溢出处理

1.overflow:内容溢出处理 visible/auto/scroll/hidden

  •         auto：自动 一般用这个
  •         hidden:隐藏
  •         scroll:滚动条，内容是否溢出都会显示滚动栏
  •         overflow:水平和垂直方向都设置
  •         overflow-x:水平方向设置
  •         overflow-y ：垂直方向设置
  •         visible:默认

2.white-space：不换行设置 normal/nowrap(去掉所有空格，不换行)/pre(保留空格)

3.text-overflow:文本溢出显示方式，clip/ellipsis:... 必须和上面两个同时设置

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				background-color: pink;
				/* 盒子太小，内容溢出 */
				overflow: hidden;
				/* auto：自动   一般用这个 
				hidden:隐藏 
				scroll:滚动条，内容是否溢出都会显示滚动栏
				  overflow:水平和垂直方向都设置
				  overflow-x:水平方向设置
				  overflow-y ：垂直方向设置
				visible:默认 */

				/* 文本不换行处理： */
				white-space: nowrap;
				/* nowrap:文本不换行，会自动去掉所有空格
				pre：不换行，会保留空格
				normal：默认
				*/

				/* 文本溢出的显示方式： */
				text-overflow: ellipsis;
				/* clip: 默认;
				ellipsis:...
				*/
				/* overflow white-space text-overflow 他们三个必须放在一起使用 */
			}
		</style>
	</head>
	<body>
		<div id="">
			我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥
			我是个大帅哥我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥我是个大帅哥 我是个大帅哥
		</div>
	</body>

4.4：超链接伪类：

  1. a:link：链接未访问之前的状态
  2. a:visited:访问之后的状态
  3. a:hover：鼠标悬停的状态
  4. a:active:鼠标激活时的状态，无法去掉下划线

     设置顺序:link visited hover active 爱恨原则 lvha

4.5：边框样式：

4.5.1：常规边框：

  1.         border-width:边框宽度 遵循上右下左原则
  2.         border-style:边框样式 solid实线/dashed虚线/dotted点线
  3.         border-color:边框颜色
  4.         单独设置某一边:border-top/right/bottom/left-
  5.         例子： border-bottom：1px solid red
  6.         border：1px solid red，简化写法，没有顺序

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height:200px;	
				border-width: 3px;
				/* 边框宽度：上 右 下 左 */
				border-style:solid dashed dotted;
				background-color: #FFC0CB;
				/* 边框风格：solid：实线；
				         dashed:虚线
						 dotted:点线 */
				/* border-color: blue yellow; */
				/* 简化设置 */
				/* border: 5px solid blue; */
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

   边框三角形效果图：

4.5.2：边框制作三角形

        设置一个空的div，使用行内式style，给这个div进行修饰，

        宽高都设置0，给border设置一个长度，注意颜色要给白色，

        三角形要那边的角，给那边设置颜色就可以了。

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 0;
				height:0 ;
			
			/* 	要那边给那边设置颜色就可以*/
				border: solid 100px white;
				border-bottom-color: #0000FF;
			}
			.one{
				width: 0;
				height:0;
				border: solid 50px white;
				border-bottom-color: black;
				padding-left: -20px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="one"></div>
		</div>
	</body>

4.6：背景样式

        1.background-color:背景颜色

        2.background-image：url(),背景图片

           background-image: url('img/1.jpg');

        3.background-repeat:no-repeat，

                repeat:沿水平和垂直两个方向平铺

                no-repeat:不平铺，只显示一次

                repeat-x：只沿水平方向平铺

                repeat-y：只沿垂直方向平铺 */

        4.background-position:背景定位，px % left right center top bottom

         background-position: 20px 20px;

        5.background-size:背景尺寸，auto cover contain % px

                auto：默认值，使用背景图片保持原样

                percentage:当使用百分值是，不是相对于背景的尺寸大小来计算的

                而是相对于元素宽度来计算的

                cover：整个背景图片放大填充了整个元素，会导致图片失帧

                contain:让背景图片保持本身的宽高比例。

                将背景图片缩放到宽度或者高度正好适应所定义的背景的区域

                background-size: 不能写在缩写里面，不能写在background后面

        6.background-origin:背景渲染位置，boder-box，padding-box，content-box

        7.background-attachment:local（针对元素）/fixed（不滚动，针对body）/scroll（滚动。默认）

                background-attachment：定义背景图片是否固定或者随着页面的其余部分滚动,

         background-attachment: local;

                默认不随内容滚动 local:会随内容滚动

                针对body的滚动

                fixed:背景图片不随浏览器滚动条滚动

                scroll:背景图片会随浏览器滚动条滚动，默认会滚动

4.7：列表

        列表分为两大种 有序和无序

        1.list-style-type 列表标记样式 默认是实心圆

                none,无标记 square 实心方块

        2.list-style-image:url(),列表标记图片

        3.list-style-positon:inside/outside

                标记定位：

                outside:列表项目标记放置在文本以外

                inside：列表项目标记放置在文本以内

        简写： list-style：url(img/arrow-right.gif) inside;

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				/* padding: 0;
				margin: 0; */
			   /* list-style-type: none; */
			}
			li {
				border: red 1px solid;
				/* 列表风格，none无标记； */
				/* list-style-type:none; */
		
				list-style-image: url(img/arrow-right.gif);
				/* 标记定位：
				outside:列表项目标记放置在文本以外
				inside：列表项目标记放置在文本以内 */
				list-style-position:outside;
				/* 简写 */
				/* list-style：url(img/arrow-right.gif) inside; */
				
			}
		
		</style>
	</head>
	<body>
		<ul>
			<li>第一列</li>
			<li>第二列</li>
			<li>第三列</li>
		</ul>
	</body>

4.8：盒子模型 

1.外边距+边框+内边距+内容

2.margin:外边距

3.padding:内边距

单独设置某一方向:margin-top/right/bottom/left

元素在页面中显示成一个方块，类似一个盒子，CSS 盒子模型就是使用现实中盒 子来做比喻，助我们设置元素对应的样式。盒子模型示意图如下：

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 盒子模型:外边距+边框+内边距+内容 */
			div{
				/* 内容的宽高 */
				width: 300px;height: 300px;
					/* 遵循顺时针，上右下左 */
					/* 内边距：内容于父元素变宽四周的距离 */
				padding: 20px;
				border:10px solid #FF0000;
			}
			/* body标签的margin代表内容与浏览器边框的距离
			两个行内元素的margin-right和margin-left，采用“和”
			两个快元素的margin-top和margin-bottom  采用 “最大值” */
			.first{
				margin: 10px;
			}
			.second{
				margin: 50px;
			}
			span{
				margin: 20px;
				font-size: 50px;
				color: yellow;
				font-family: 隶书;
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<span>奇斌</span><span>奇斌</span>
	</body>

 五、浮动流与定位流

        5.1：浮动特性:

                1、浮动元素脱离标准文档流，形成浮动流
                2、块级元素看不到浮动元素
                3、bfc元素、行内元素、行内块元素和文本全都看得见浮动元素
                4、所有经过浮动的元素都会变成行内块元素包括span
                5、浮动元素剩余空间不够，会自动往下一行排列，
                6、不经过浮动的文本会自适应剩余空间,
                      经过浮动的文本不会自动换行去适应剩余空间,而是另起一行  

BFC 即 Block Formatting Contexts (块级格式化上下文)，

        通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，

都不会影响到外部。

触发BFC的条件

        1、浮动元素，float:left/right； (所有元素经过浮动会变为行内块元素(包括span))

        2、display:inline-block； (行内块)

        3、overflow:hidden/auto/scroll；(常用于块)

        4、 position：absolute (行内块)

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.first{
				width:300px;
				height: 200px;
				border: 1px dashed red;
				float: left;
			}
			.second{
				width:300px;
				height: 200px;
				border: 1px solid;
				float: left;
			}
			.third{
				border: 1px solid;
				/* float: left; */
			}
		</style>
	</head>
	<body>
		<div class="first"></div>
		<div class="second"></div>
		<div class="third">
我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥
我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥我是大帅哥
		</div>
	</body>

 5.2：解决父级边框塌陷：

        之前也说了，元素经过浮动之后会对父级产生影响，所以这里我们简单介绍一下消除浮动带来的影响。

1、给父级设置height高度,具有不确定性

2、父级触发BFC

3、添加空元素，清除浮动,clear:both,但是改变了原有的结构

4、伪类消除

        .box::after{

                        content: " ";

                        display: block;

                        clear: both;

                        }

5.3：定位流position

5.3.1、相对定位：relative:

        1、使用left right top bottom进行偏移

        2、相对于它本身进行定位 

        3、原来的位置依然保留(灵魂出窍)

         4、层级提高，可以把标准文档流中的元素及浮动元素盖在下边

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				background-color: pink;
				border: 1px solid;
				height: 600px;
				width: 600px;
				
			}
			.first{
				background-color: blue;
				border: #0000FF 1px dashed;
				height:100px ;
				width: 300px;
				position: relative;
				left:50px;
				top: 50px
			}
			.second{
				background-color: red;
				border: 1px dotted orange;
				height:150px ;
				width: 200px;
			}
			.third{
				background-color: orange;
				border: 1px dotted;
				height:100px ;
				width: 200px;
				float: left;
			}
			层级大小：定位流>浮动流>标准文档流
				1、用left、right、top、bottom、进行偏移
				2、相对于他本身进行偏移
				3、原本位置还保留（灵魂出窍）
				4、层级提高，可以把标准文档流的元素及浮动流元素盖在下面
		</style>
	</head>
	<body>
		<div class="box">
			<div class="first"></div>
			<div class="third"></div>
			<div class="second"></div>
		</div>
	</body>

5.3.2、 绝对定位:absolute

        1、如果“祖先”元素没有定位，相对于浏览器定位

        2、如果“祖先”元素有定位，则相对于父亲定位

        3、它原来的位置不会保留下来

        4、层级更高，可以把标准文档流和浮动流压在下面

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
			}

			.one {
				width: 600px;
				height: 600px;
				border: 1px solid;
				position: relative;
				padding: 50px;
				
				
			}

			.two {
				width: 400px;
				height: 400px;
				border: 1px solid blue;
				/* margin-left: 100px; */
					position: relative;
			}

			.three {
				width: 200px;
				height: 200px;
				border: 1px solid red;
				position: absolute;
				left: 100px;
				top: 100px;
				text-align: center;
				line-height: 200px;
			}

			.four {
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
			绝对定位：
			1 如果“祖先”元素没有定位，相对于浏览器定位
			2 如果“祖先”元素有定位，则相对于父亲定位
			3 它原来的位置不会保留下来
			4 层级更高，可以把标准文档流和浮动流压在下面
			}
		</style>
	</head>
	<body>
		<div class="one">
		淇滨是
			<div class="two">
				<div class="three">淇滨是
				</div>
				<div class="four">

				</div>
			</div>

		</div>
	</body>

 

5.3.3、fixed:固定定位特点：

        1、相对于浏览器定位

        2、偏移量不会随滚动条的移动而移动

        3、一般在网页中被用在窗口左右两边的固定广告，返回顶部图标、吸顶导航栏等

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				height: 1200px;
				background:url(img/bg.jpg) no-repeat fixed;
				
			}
			.father{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			/* fixed:固定定位特点：
				1、相对于浏览器定位
				2、偏移量不会随滚动条的移动而移动
				3、一般在网页中被用在窗口左右两边的固定广告，
					返回顶部图标、吸顶导航栏等 */
			.erzi{
				width: 200px;
				height: 200px;
				background-color: red;
				position: fixed;
				bottom: 300px;
				right: 0;	
			}
			a{
				background-color: black;
				position: fixed;
				bottom: 0;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="erzi"></div>
		</div>
		<a href="#">回到顶部</a>
	</body>

5.3.4、粘性定位：

        当position的值为sticky时，元素会根据正常文档流进行定位，

        粘性定位可以被认为是相对定位和固定定位的混合

        元素在跨越特定阈值前为相对定位，之后为固定定位。

        相当于word里面的冻结表格

        层级大小:定位流>浮动流>标准文档流

        这个感兴趣的小伙伴可以复制代码去查看一下，看一眼聪明的你就明白了

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				height: 1500px;
			}

			.one {
				width: 200px;
				height: 300px;
				background-color: #0000FF;
			}

			/* 粘性定位：当position的值为sticky时，元素会根据正常文档流进行定位，
				粘性定位可以被认为是相对定位和固定定位的混合
				元素在跨越特定阈值前为相对定位，之后为固定定位。
				 相当于word里面的冻结表格 */
			.two {
				width: 200px;
				height: 200px;
				background-color: red;
				position: sticky;
				top: 50px;
				left: 100px;
				text-align: center;
				line-height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two">我是个大帅逼</div>
	</body>

5.3.5：解决父子传递 

如同浮动流解决边框塌陷，定位流也有一点点小问题需要解决

margin-top传递：如果块级元素的顶线和父元素的顶部线重叠
                      那么这个块级元素的margin-top值会传递给父元素

        解决方式：
                 1、给父元素设置border
                 2、给父元素加padding值
                 3、给父元素BFC 

5.3.6 Z-index和透明度

1、rgba a:0-1.透明度

background-color: rgba(255,0,0,0.3);

z-index: 1; 数值越大，层级越高。只可以给定位流使用

透明度：0-1，值越小越透明

opacity: 0.3;

兼容IE8一下，0-100

filter: alpha(opacity=30);

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box {
				position: relative;
			}

			.erzi {
				position: absolute;
				left: 20px;
				top: 50px;
				width: 500px;
				height: 30px;
				/* background-color: grey; */
				/* rgba a:0-1.透明度 */
				background-color: rgba(255, 0, 0, 0.3);
				z-index: 1;
				/* 透明度：0-1，值越小越透明 */
				/* opacity: 0.3; */
				/* 兼容IE8一下，0-100 */
				/* filter: alpha(opacity=30); */
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/才女.jpg">
			<div class="erzi"></div>
		</div>
	</body>

六:元素显示与隐藏

6.1.1、元素隐藏第一种 不会保留原来位置

        display: none;

        元素显示

        display: block; 常用第一种

6.2.2、元素隐藏第二种：会保留原来位置 灵魂出窍

        visibility: hidden;

        元素显示

        visibility: visible; 两个需要同时使用

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;height: 100px;
			}
			.one{
				background-color: red;
				/* 元素隐藏第一种  不会保留原来位置 */
				/* display: none; */
				/* 元素显示 */
				display: block;
			}
			.two{
				background-color: blue;
				/* 元素隐藏第二种：会保留原来位置 灵魂出窍 */
				visibility: hidden;
				/* 元素显示 */
				visibility: visible;
			}
		
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
	</body>

composed person
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS详解
02-26
CSS 详解，包括规则，属性等。
css样式
切躁切勇,伏枥藏锋
11-04 3936
字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: b...
CSS全解析：从基础到实战，掌握每一个知识点
最新发布
一杯梅子酱的博客
06-27 1223
以上就是CSS的全面解析，从基础属性到实战应用，涵盖了大部分常见的场景。掌握了这些知识，你将能够更加自信地设计和优化网页样式。继续探索CSS的无限可能，让创意成为现实！关注！
前端基础--CSS
qq_50048558的博客
08-31 227
一、CSS介绍 ● CSS是指层叠样式表 cascading style sheets ● 通过CSS可以让我们定义HTML元素如何显示。 ● CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。 ● 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。 二、CSS与HTML结合方式 1.内联/行内样式 HTML标签上通过style属性来引用CSS代码 优点:简单方便 缺点:只能对一个标签进行修饰 <h1 style="color:red">我爱你</
CSS 基础使用.md
01-13
### CSS 基础使用详解 #### 一、CSS简介 **CSS**（Cascading Style Sheets）是一种用于描述文档中元素样式的语言，通常与HTML搭配使用来控制页面的布局与外观。它使得开发者能够将设计逻辑与内容逻辑分离，从而更...
纯CSS制作蜂巢效果详解
01-31
甚至有的网站已经完全抛弃图片，仅使用CSS和JavaScript创造出简介而又华丽的界面。下面是国外作者@jtauber的使用CSS创作蜂巢效果的技术介绍（上面是最终效果图）： height:100px;width:100px;border:30pxsolid#999;...
详解CSS中iconfont的使用
09-24
**CSS中的Iconfont详解** Iconfont，即字体图标，是一种将图标设计成字体的技术，它允许开发者通过CSS来控制图标的大小、颜色、阴影等样式属性。阿里巴巴的Iconfont库因其丰富的图标资源和易用性而备受推崇。下面将...
HTML-CSS-详解资源
07-25
### HTML-CSS 详解资源 #### 一、HTML 基础 **1.1 HTML 概述** HTML，即超文本标记语言(HyperText Markup Language)，是一种用于创建网页的标准标记语言。它允许开发者通过一系列预定义的标签来构建和布局网页...
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
CSS3 入门详解（一）
weixin_33965305的博客
11-26 575
前言 如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 1.选择器 CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。 1.1 属性选择器 属...
CSS入门详解
weixin_43893483的博客
04-21 856
一、CSS简介 现在互联网的前端三层： HTML 超文本标记语言 从语义的角度描述页面结构 CSS 层叠式样式表 从审美的角度负责页面样式 JS Javascript 从交互的角度描述页面行为 1、css整体感知 css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思。 css的最新版本是css3，我们学习的是css2.1。css3与css2.1不矛盾，所...
【CSS详解】一文掌握CSS基础用法
小新要变强的博客
09-27 4543
CSS入门教程，一文掌握CSS基础用法~
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS知识全解
qq_54334713的博客
03-23 2607
css3复习大纲
CSS基础：浮动与定位详解
"本章主要介绍了CSS基础知识，包括CSS简介、引入CSS的方法、基本选择器、复合选择器以及盒子的浮动与定位等关键概念。CSS是层叠样式表的简称，用于设计网页样式，使网页呈现出丰富的效果。CSS可以应用于HTML、XHTML...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值