CSS 进阶学习（二）

最新推荐文章于 2024-07-25 08:14:42 发布
最新推荐文章于 2024-07-25 08:14:42 发布
阅读量109 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cherry_Zj/article/details/118439961
版权

文章目录

粘连布局

粘连布局（css sticky footer）:我们有一块内容<main>。
当<main>的高度足够长的时候，<footer>应该紧跟在<main>元素的后面。
当<main>元素比较短的时候（比如：小于屏幕高度），我们期望这个<footer>元素能够“粘连”在屏幕的底部。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			#wrap .main{
				padding-bottom: 50px;
			}
			#wrap{
				min-height: 100%;
				background: pink;
				text-align: center;
				
			}
			#footer{
				height: 50px;
				line-height: 50px;
				background: deeppink;
				text-align: center;
				margin-top: -50px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div class="main">
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
				main <br />
			</div>
		</div>
		<div id="footer">
			footer
		</div>
	</body>
</html>

效果图： 在这里插入图片描述

BFC

  • BFC是什么？

BFC(Formatting Context)直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box 如何布局，并且这个区域与外部毫不相干。

  • BFC布局规则：
    1、内部的Box会在垂直方向，一个接一个地放置
    2、BFC的区域不会与float box重叠
    3、内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    4、 计算BFC的高度时，浮动元素也参与计算。（清除浮动 haslayout）
    5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
  • BFC什么时候出现（哪些元素会生成BFC？）
    根元素
    float属性不为none
    position为absolute或fixed
    overflow不为visible
    display为inline-block，table-caption，flex，inline-flex

两列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			div{
				height: 200px;
			}
			#left{
				width:200px;
				background: pink;
				float: left;
			}
			#right{
				background: deeppink;
				overflow: hidden;	/*开启BFC，BFC和float box不重叠*/
			}
		</style>
	</head>
	<body>
		<div id="left">left</div>
		<div id="right">right</div>
	</body>
</html>

效果图：
在这里插入图片描述

商品列

  • 文字溢出，显示省略号：
    display:block;
    white-space: nowrap; (表示文本不换行)
    text-overflow: ellipsis;
    overflow: hidden;
    这四条缺一不可
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 300px;
				border: 1px solid;
				margin: 0 auto;
			}
			#left{
				float: left;
				width: 80px;
				height: 80px;
				background: url(../img/2.jpg) no-repeat;
				background-position: -28px -28px;
			}
			#desc{
				padding-left: 10px;
				overflow: hidden;
				display:block;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			/*
			 * 文字溢出，显示省略号
			 * display:block;
			 * white-space: nowrap;
			 * text-overflow: ellipsis;
			 * overflow: hidden;
			 * 这三条缺一不可
			 */
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="left"></div>
			<div id="desc">
				此商品买一送三此商品买一送三<br />
				此商品买一送三此商品买一送三<br />
				此商品买一送三此商品买一送三<br />
				此商品买一送三此商品买一送三<br />
				此商品买一送三此商品买一送三<br />
				此商品买一送三此商品买一送三<br />
			</div>
		</div>
	</body>
</html>

效果图:
在这里插入图片描述

margin重叠

内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。（相邻的父子元素、相邻的兄弟元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#up,#down{
				width: 200px;
				height: 200px;
				background: pink;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div id="up">up</div>
		<div id="down">down</div>
	</body>
</html>

效果图：
在这里插入图片描述

margin不重叠

margin不重叠有两种方法：BFC不同、不相邻

1、BFC不同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*
			 * 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
			 * 此时，它们的BFC不同
			 */
			#up,#down{
				width: 200px;
				height: 200px;
				background: pink;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div id="up">up</div>
		<div style="overflow: hidden;">
			<div id="down">down</div>
		</div>
	</body>
</html>

2、不相邻

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*
			 * 内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
			 * 此时，不相邻
			 */
			#up,#down{
				width: 200px;
				height: 200px;
				background: pink;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div id="up">up</div>	
		<div style="height: 1px;"></div>
		<!--<br />-->
		<!--br标签有默认高度-->
		<div id="down">down</div>
	</body>
</html>

检测低版本IE

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>自定义检测低版本ie的函数</title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
			console.log(isIE(8));
	
			//js中的作用域都是函数作用域
			function isIE(version){
				var b = document.createElement("b");
				b.innerHTML="<!--[if IE "+version+"]><i></i><![endif]-->";
				return   b.getElementsByTagName("i").length == 1 ;
			}

		//伪数组:  具有length属性的js对象
//		console.log(document.body.getElementsByTagName("i").length);
	</script>
</html>

左右查询

左查询，对等号左侧的变量进行查询，沿着作用域链查询，若查询不到，则js会自动在全局作用域var b
右查询，对等号右侧的变量进行查询，沿着作用域链查询，若查询不到，则报错

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//左查询，对等号左侧的变量进行查询，沿着作用域链查询，若查询不到，则js会自动在全局作用域var b
		var a=8;
		test()
		function test(){
			b=a;//对a使用右查询，对b使用左查询
			console.log(b);
		}
		//右查询，沿着作用域链查询，若查询不到则报错
		//console.log(b);
	</script>
</html>

vertical-align

vertical-align用来指定inline-block的垂直对齐方式。
我们经常会在img、input（替换元素）上使用vertical-align属性。
使图片水平居中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				height: 400px;
				width: 400px;
				border: 1px solid;
				margin: 0 auto;
				text-align: center;
			}
			#wrap:after{
				content: "";
				display: inline-block;
				height: 100%;
				width: 0px;
				background: pink;
				vertical-align: middle;
			}
			#wrap img{
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<img src="../../../img/1.jpg" width="150px"/>
		</div>
	</body>
</html>

效果图：
在这里插入图片描述

Cherry_Zj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 526
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
前端css进阶学习笔记
a_big_panda的博客
01-29 839
注意：可以通过调试工具判断样式是否可以继承例如：效果：注意：如上图所示，如果标签本身带有css属性则不继承父标签属性2.1层叠性的介绍注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果例如：效果：注意：优先级相同时，后面的效果层叠前面的效果。
CSS进阶——学习笔记
2301_80194870的博客
10-12 171
css进阶、盒子模型、浮动
CSS进阶
李梵依的博客
11-03 103
CSS进阶的学习与复习
CSS进阶总结
m0_52336378的博客
06-17 571
每个浏览器都有一些自带的或者共有的默认样式，或造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致；/*内边距，上下左右，设置属性，会把盒子撑大,不能设置负数，负数就还原初始状态*//*融合行内于块级，用通俗的话讲，就是不独占一行的块级元素*//*复合样式：可以设置4个值，3个值，2个值，1个值*//*复合样式,可以设置4个值，3个值，2个值，1个值*//*复合样式：边框粗细1px，实线，红色线*//*外边距，可以设置负数，不会撑大盒子*//*第一种：右浮动*/
前端学习第五站——CSS学习进阶篇
qq_59212867的博客
01-31 738
CSS进阶学习篇
前端学习＜三＞CSS进阶——05-CSS进阶的知识 汇总
——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
04-03 957
CSS进阶的知识 汇总
CSS学习（二）进阶
qq_61623880的博客
06-29 22
4.hover伪类选择器。
css进阶
weixin_52504437的博客
12-27 135
控制文字的属性可以继承，继承出意外的是a标签不能继承，h系列标签的font-size会继承失效。块级标签作为大容器，可以嵌套文本、块级元素、行内元素、行内块级元素等等。a标签的color会继承失效，h系列标签的font-size会继承失效。background-image:url(‘图片的路径’)a标签内部可以嵌套如何元素，但是不能嵌套自己a标签。取值的时候是正数，负数的话向左和向上运动。：一行显示多个，宽高默认，不可以设置宽高。：一行显示多个，可以设置宽高。后边的层叠前边的，优先级相同。
深入学习CSS进阶（二） | 青训营笔记
weixin_46248051的博客
07-26 254
本期重新打卡学习CSS进阶（二）部分，进行查漏补缺。
CSS进阶学习资源 面试题
03-07
CSS需要注意的事情！面试官98%会问你的问题！没学这些好意思说自己是前端开发？我就是靠这份找到了实习！
css进阶学习 选择符
10-16
css这种没有程序逻辑的代码中，又能找出什么来说明谁做得更出色呢？下面小编给大家说明如何从css选择符的角度来提高css代码质量。
cssui:用于css进阶学习
07-06
而且这个代码主要用于学习交流，我们带着看看不吃亏的想法，还是可以接触一下他的嘛！！！支持情况该框架是移动端框架，主要支持IOS6+、android4+框架发展第一期-MVC该框架第一期的目标是简单的we
css进阶版欢迎大家学习可称为
07-08
css学习
网站基本布局CSS
m0_46608027的博客
07-24 791
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css实现线条中间高亮，左右两边模糊（linear-gradient的运用）
贵林之恋的博客
07-24 292
效果： CSS实现边框底部渐变色的方法:(最简单的一种) 参考文章：CSS实现边框底部渐变色的4种方法_css下边框渐变-CSDN博客
css 作业 2
最新发布
没有 bug 的代码是不完美的！
07-25 650
写完了
CSS 创建：从入门到精通
wjs2024的博客
07-24 380
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
CSS进阶指南：复习与实战技巧
本资源是一份专业的CSS复习和学习资料，旨在帮助读者巩固和提升对CSS（层叠样式表）的理解和应用能力。CSS是网页设计中至关重要的技术，它负责控制网页元素的布局、样式和呈现。这份文档涵盖了从基础语法到高级特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值