web实训项目遇到的杂七杂八

最新推荐文章于 2024-06-23 10:20:53 发布

兜里ヌ有糖

最新推荐文章于 2024-06-23 10:20:53 发布

阅读量532

点赞数

分类专栏：笔记文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_43980232/article/details/106156455

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

HTML中有个font-size属性 默认是16px
此时进行移动端开发时 1rem(em)=16px

若对HTML的font-size属性进行更改
如：

<style type="text/css">
			html{
				font-size: 10px;
			}
</style>

此时进行移动端开发时 1rem(em)=10px

！important：多个属性发生覆盖时，以被！important修饰的属性为准

要设置页面高度为100% 现将HTML高度设置为height：100%;

box-sizing
有两个属性值：
content-box （默认属性）
设置宽度相当于给里面的内容设置宽度，不包括内外边距和边框
border-box
设置宽度相当于设置总体的宽度，包括内外边距和边框
总体宽度=左侧外边距+左侧边框宽+左侧内边距+内容（content）+右侧内边距+右侧边框宽+右侧外边距
应用实例：

.input-wrapper{
	border: 0;
	padding: 1em 0.8em;
	width: 100%;
}

效果图：
在这里插入图片描述
代码中添加：box-sizing: border-box;

.input-wrapper{
	border: 0;
	padding: 1em 0.8em;
	width: 100%;
	box-sizing: border-box;
}

效果图：
在这里插入图片描述
background-size: cover; cover 可能会导致图片失真等价于 background-size: 100% 100%;
background-size: auto 100%;aotu 自适应 100% 图片高度
background-size: 100% auto; 宽度100% 高度自适应
overflow: hidden; 横向纵向都不能滑动（没有滚动条）
overflow-x: hidden; 横向不能滑动
overflow-y: auto; 纵向可以滑动 auto自适应默认值就是auto

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{
				width:100%;
				height:100%;
				/* overflow: hidden; */
			    overflow-x: hidden;  /*横向不能滑动*/
			    overflow-y: auto;  /*纵向可以滑动  auto自适应 默认值就是auto*/
				
				margin:0px;
			}
			div{
				
				background-color: red;
				width: 50%;
				height: 80%;
				background-image: url(./img/fengjing.jpg);
				/* background-size: cover;  cover 可能会导致图片失真 
				等价于 background-size:  100% 100%;*/
				/* background-size: auto 100%; */ /*aotu 自适应    100% 图片高度*/
				background-size:  100% auto; /*宽度100%    高度自适应*/
				
				
				background-repeat: no-repeat;
			}
			
		</style>
	</head>
	<body>
		<div>
			
			
		</div>
		
		
		
	</body>
</html>

兜里ヌ有糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web实训项目遇到的杂七杂八

HTML中有个font-size属性默认是16px此时进行移动端开发时 1rem(em)=16px若对HTML的font-size属性进行更改如：<style type="text/css"> html{ font-size: 10px; }</style>此时进行移动端开发时 1rem(em)=10px！important：多个属性发生覆盖时，以被！important修饰的属性为准要设置页面高度为100% 现将HTML高度设置为heig
复制链接

扫一扫