html+css最常用的代码

作者:一笑为红颜

也是基本代码,在日常中会经常使用,最好的背下来

学会以下知识基本上,就入门了,

在HTML和css中也够用了

<!doctype html>
<html>
          <head>
		        <title>盒子模型</title>
				<meta charset="utf-8"/>
				<style type="text/css">
				/*清除浏览器默认样式(*)是通配符*/
				/*
				*{
				  margin:0;
				  padding:0;
				}
				*/
				文本居中text-align:center ;
				
				.box1{
				
				/*设置盒子内容区
				*使用设置width宽度
				*使用设置heigt高度
				*/
				width: 400px;
				height:300px;
				background-color:#bfa;
				
				/*为元素设置边框
				*设置边框必须指定三个样式
				*  border-width:0px;   边框宽度
				*  border-color:red;  边框颜色
				*  border-style:solid;   边框样式none默认值,solid实线,dotted点状,dashed虚线, double双线
				*/
				/*圆角矩形*/
				border-radius:4px;同时设置4角
				border-top-right-radius:4px;右上角
				
				
				
				/*使用border-width分别设置4个边框的宽度
				*例如设置四个值(顺时针),border-width:10px;20px;30px;40px;
				*设置 三个值(上,左右,下)
				*设置两个值,(上下,左右,)
				*此规则适用于下面两个样式
				*单独设置边(border-xxx-width:10px;)
				*xxxx表示(top,rigth,bottom,left)
				*/
				
				
				
				*设置边框的颜色
				*color同样可以设置四个边颜色,规则同上
				border-color:red;
				*style同样可以分别设置四个边,规则如上
				*/
				  border-style:solid;
				*************
				边框渐变色
				边框大小  border-width:5px;
                颜色    box-shadow:rgb(254, 67, 101) 0px 0px 18px inset;
				
				
			/********************************************/
				*内边距(padding)指的是盒子内容区与盒子边框之间的距离
				*一共有四个方向的内边距,可以通过
				
						padding-top:50px;
						padding-right:50px;
						padding-left:50px;
						padding-bottom:50px;
				
				
				/*
				 /*外边距是与其他盒子之间的距离
				 *不影响可见框大小
				 *影响可见框位置
				
				外边距设置盒子位置*/
				    margin:auto;
						 margin-top:10%;
						 margin-right:10px;
						 margin-left:auto;
						 margin-bottom:auto;
						 
						 
		
			/*************************************//	
				
				背景颜色 background-color:yellow;
			
				设置背景图片background-image:url("");
				//图片随着背景放大缩小保持比例
				background-size: 100%;
                background-repeat:no-repeat;
				/////背景透明//
				background-color:rgba(255,255,255,0.5);
				
				
		/***********************************/
				自适应根据不同页面加载不同背景图
@media screen and (min-width: 1201px) { 
最小屏幕1201px加载这里css
}
}
@media screen and (max-width: 865px) {
最大屏幕800px的时候加载这里css
}
				
		/************************************/
				
				 
				垂直外边距
				 *在网页中垂直方向的相邻外边距会发生重叠
				 *所谓的外边距重叠值兄弟元素之间,且相邻外边距是取最大值,不是取和。
				 *如果父子元素的重叠的垂直外边距相邻了,则子元素的外边距会设置给父元素
				
				盒子模型要素:内容区,内边距,边框,外边框
				 *内联元素不能设置width和height
				 *内联元素可以设置水平方向的内边距
				 *内联元素可以设置垂直方向内边距,但不会影响页面布局
				 *内联元素可以设置边框,垂直方向边框不影响布局,水平方向影响布局
				*支持水平方向外边距且不重叠,求和,垂直方向重叠取最大值
				
				
				
		/*********************************************/
			div块元素---内联元素(a标签,img标签....)	
				display
				inline将元素转换为内联元素
				block将元素转换为块元素
				inline-block
				
				.box4{
				display:inline-block;
				width:500px;
				height:500px;
				background-color:red;
				/*border-style:solid;
				border-color:yellow;
				border-width:5px;
				font-size: 20px;*/
				
			
		//////////////////////
		把文字打一横线表示划掉
		  <p class="line-2020">2020-06-12所有任务完成</p>
          <style>.line-2020{text-decoration:line-through} </style>
		  
          </body>
</html>

日出东方落于西,朝思暮想念于你。