盒子模型的初识及css标签使用

最新推荐文章于 2023-07-11 20:20:15 发布

Downhill Wind

最新推荐文章于 2023-07-11 20:20:15 发布

阅读量768

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/Cream336/article/details/131603539

版权

CSS盒子模型

1.常用样式

2.盒子模型 *

3.定位（绝对定位相对定位）*

4.CSS3常见效果

盒子模型介绍

常用样式

基础样式

样式名	描述
text-align	设置内容位置(指定块级元素中的内联元素(如文字和图片)的对齐方式) left center right
text-decoration	控制下划线 none没有 underline有
line-hight	行高
font-size	设置字体大小
font-weight	设置字体粗细的
font-famliy	设置字体样式
letter-spacing	设置中文字体之间的间距
word-spacing	设置英文单词之间的间距

行高：设置单行文字所占据的高度，实际位置是文字的大小+上下的空白间距

		<style>
			div{
				/* height: 300px;
				width: 500px;
				background-color: green; */
				
				height: 300px;
				width: 500px;
				border: 20px solid red;
				background-color: green;
				
				color: yellow;
				line-height: 180px;
				letter-spacing: 20px;
				
				font-size: 15px;
				font-weight: bold;
				font-family: '楷体';
			}			
		</style>
	</head>
	<body>		
		<div>
			轻轻的我走了，正如你轻轻来了<br>
			轻轻的我走了，正如你轻轻来了<br>
		</div>

盒子模型

页面中的每个元素都可以称为盒子，主要目的是为了计算元素在网页中的实际占位，通过F12/检查可以直观的查看到盒子模型

边框颜色

	.box{
        width: 251px;
        height: 251px;
        background-color: #D7D7D7;
        border: solid;
        border-color:red blue;/*上下 左右*/
        border-color:red blue blueviolet;/*red上 blue左右  blueviolet下*/
        border-color:red blue blueviolet green;/*上右下左*/

        /*border-top-color: yellow;
        border-left-color: orange;
        border-bottom-color: green;
        border-right-color: red;*/
	}

</style>
</head>
<body>
<div class="box">同学们！！</div>
</body>

边框粗细

<style>
    .box{
        width: 251px;
        height: 251px;
        background-color: #D7D7D7;
        border: solid;
        border-color: orange;
        /*border-width: 20px;*/
        border-top-width: 10px;
        border-left-width: 20px;
        border-right-width: 30px;
        border-bottom-width: 40px;
    }
</style>

边框样式

<style>
			.box{
				width: 251px;
				height: 251px;
				background-color: #D7D7D7;
				border: solid;
				border-color: orange;
				/*border-width: 20px;*/
				border-top-width: 10px;
				border-left-width: 20px;
				border-right-width: 30px;
				border-bottom-width: 40px;
                
				border-top-style: dashed;/*边框样式为虚线*/
				border-bottom-style: double;/*边框样式为双线*/
                  border-bottom-style: solid;/*边框样式为实线*/
			}
		</style>

边框的简写

		<style>
			.box{
				width: 251px;
				height: 251px;
				background-color: #D7D7D7;
				
				border:1px solid #3a6587
			}
		</style>
	</head>
	<body>
		<div class="box">同学们！！</div>
	</body>

外边距设置

<style>
			*{
				margin: 0px;
			}
			.box{
				width: 251px;
				height: 251px;
				background-color: #D7D7D7;
				border:1px solid #3a6587;
				margin-top: 30px;
				margin-left:60px ;
				/*margin: 0px auto;居中*/				
			}
			#h2id{
				margin-top: 20px;
				margin-left: 500px;
			}
		</style>
	</head>
	<body>
		<h2 id="h2id">会员列表</h2>
		<div class="box">过年好，同学们！！</div>
	</body>

margin可以设置块元素的水平对齐方式

div{
  margin:0 auto;			//让块元素在水平方向居中
}

内边距设置

.input{
		            font-size:16px;
		            background-color:#3a6587;
		            height:35px;
		            line-height:35px;
		            color:#FFF;
		            padding-left: 110px; 
		            padding-top:10px ;   /* 让标题左边留点空隙*/
		        }

背景

用于设置元素的背景样式，包括背景色、背景图、大小等，背景样式的设置前提是元素有大小

属性名	描述
background-color	设置背景颜色 √
background-image	设置背景图片 √
background-position	设置背景图片的位置
background-size	设置背景图片的大小
background-repeat	设置背景图片是否重复
background-attachment	设置背景图片相对浏览器的定位位置

div{
  width: 1000px;
  height: 1000px;
  /* background-color: #008B8B;
  background-image: url(./timg.jpg);
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed; */
  background: #008B8B url(./timg.jpg) no-repeat;
}

背景图表片

		<style>
			.title{
				font-size: 25px;
				font-weight: bold;
				text-indent: 1.5em;/* 首行缩进 */
				background-color: #E91917;
				color: aliceblue;
				line-height: 40px;
				
				background-image: url(img/arrow-down.gif); /* 引入背景图片 */
				background-repeat: no-repeat;             /* 图片不重复 */
				background-position: 205px  10px;         /* x轴 y轴 */				
			}
			
			ul li{
				
				list-style: none;      /*去掉列表的样式*/
				line-height: 30px;
				
				/* 引入背景图片 */
				background-image: url(img/arrow-right.gif); /* 引入背景图片 */
				background-repeat: no-repeat;
				background-position: 165px 6px;
				
			}
			
			a{	
				text-decoration: none;
				color: black;
			}
			a:hover{
				color: orange;
			}
			#nav{
				width: 230px;
				height: 320px;
				background-color: #D7D7D7;
			}
		</style>
	</head>
	<body>
		
		<div id="nav">
			<h2 class="title">全部商品分类</h2>
			<ul>
                <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
                <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
                <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
                <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
                <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
                <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
                <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
                <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a><a href="#">票务</a>
                </li>
			</ul>
		</div>

	</body>

背景图大小及位置属性都有两个值，不容易区分，建议单独设置

display属性

display用于改变元素的生成类型，从而增加元素的使用方式

属性名	描述
display:none;	隐藏元素
display:block;	将行元素变为块元素
display:inline;	将元素变为行元素
display:inline-block;	将元素变为行内块元素

		<style>
			ul li{
				list-style: none;
				display: inline-block;
			}
			h4,p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h3>热播</h3>
<ul>
    <li>
        <img src="image/img1.png" alt=""/>
        <h4>神武赵子龙</h4>
        <p>怒，林更新不抱网红抱女神</p>
        <p>点击次数：242445次</p>
    </li>
    <li>
        <img src="image/img2.png" alt=""/>
        <h4>旋风十一人</h4>
        <p>胡歌变教练在撩前女友</p>
        <p>点击次数：242445次</p>
    </li>
    <li>
        <img src="image/img3.png" alt=""/>
        <h4>狂飙</h4>
        <p>安信PK大佬高启强</p>
        <p>点击次数：242445次</p>
    </li>
    <li>
        <img src="image/img4.png" alt=""/>
        <h4>山海经之赤影传说</h4>
        <p>娜扎张翰再度联手</p>
        <p>点击次数：242445次</p>
    </li>
</ul>
	</body>

案例：使用display属性实现导航栏效果

<ul>
  <li>
    <a href="">首页</a>
  </li>
  <li>
    <a href="">公司简介</a>
  </li>
  <li>
    <a href="">业务方向</a>
  </li>
  <li>
    <a href="">联系方式</a>
  </li>
</ul>

a{
  text-decoration: none;
  color: white;
}
ul{
  list-style: none;
  font-size: 0px;
}

/* 使用inline-block属性后，元素块之间会出现一个间距
方案：将其所在的父元素的font-size设为0，具体的元素字体大小再针对性的设置
*/
ul li{
  display: inline-block;
  width: 120px;
  height: 35px;
  color: white;
  text-align: center;
  line-height: 35px;
  background-color: darkslateblue;
}
ul li{
  font-size: 16px;
}
ul li:hover{
  background-color: #008B8B;
}
ul li:hover a{
  color: #483D8B;
}

visibility控制元素的显示与隐藏

		<style>
			.box1{
				width: 280px;
				height: 280px;
				background-color: #008000;
			}			
			body:hover div{				
			   display: none;        /* display属性在隐藏元素时，不占据页面的位置*/			  
			   visibility: hidden;   /* visibility隐藏后，位置仍然被占据着 */
			}		
		</style>
	</head>
	<body>
		轻轻的我走了，正如你轻轻的来了。。。
		<div class="box1">			
		</div>
		轻轻的我走了，正如你轻轻的来了。。。
	</body>

display属性在隐藏元素时，不占据页面的位置，visibility隐藏后，位置仍然被占据着

浮动

浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版

float:left/right

	<head>
		<style type="text/css">
			img {
				float:left;
			}
		</style>
	</head>

<body>
	<p>
	<img src="img/yiyan.jpg" width="200px" />
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	This is some text. This is some text. This is some text.
	</p>
</body>

清除浮动

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.wrapper{
				border: 1px solid black;
				width: 360px;
				height: 360px;
			}
			.content{
				/*float: left;  排列，会按照父级来排*/
				float: left;/* 会按照从左向右浮动  */
				/*float: right;*/
				width: 70px;
				height: 70px;
				border: 1px red solid;
				background-color: green;
				color: white;
			}
			#id9,#id8{
/*清除浮动，因为content浮动后面的div都会根着浮动，清楚 id8,id9不能左浮动（标准的从上往下显示）*/
			clear: left;			
}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">1</div>
			<div class="content">2</div>
			<div class="content">3</div>
			<div class="content">4</div>
			<div class="content">5</div>
			<div class="content">6</div>
			<div class="content">7</div>
			<div id="id8" class="content">8</div>
			<div id="id9" class="content">9</div>
		</div>
	</body>

解决浮动塌陷问题

		<style>
			#box1{
				width: 600px;
				background-color: olive;
				border: 1px solid red;
				
				height: 400px;      /* 方式一：解决浮动塌陷问题，给父级设置固定高 */
				overflow: hidden;   /* 方式二：解决浮动塌陷问题，给父级overflow: hidden */				
			}
			img{
				float: left;
			}
			
			/* 方式三：在浮动的下面清楚浮动 */
			.divclass{
				clear: left;
				clear: right;
				clear: both;   /*清楚左右浮动 */	
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div>
				我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
				我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
				我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
				我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
				我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
				我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云
			</div>
			<img src="img/江一燕.jpg" width="200px" />			
			<div class="divclass"></div>
			
		</div>
		
	</body>

定位

浮动更多的用于对模块化（无具体像素值要求）区域进行整体排版，对于精确到像素值的页面调整需要使用定位，例如：购物车上的数量、消息通知等

属性名	描述
position:relative;	相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
position:absolute;	绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器）
position:fixed;	相对浏览器进行固定定位

相对，绝对定位

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: black;
				opacity: 0.5; /*透明度*/
				/*绝对定位 不会保留原来的位*/
			     position: absolute;
			     left: 150px;
			     top: 150px;
/*绝对定位：会脱离原来的层，box1这一层被腾空了，别的层就可以上去了，只是不同的层而已，每个absolute都是一层，可以自由动*/
			 
			 	/*相对定位 会保留原来的位置*/
				/*position: relative;
				left: 150px;
				top: 150px;*/
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>

固定定位

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.divid{
				width: 150px;
				height: 30px;
				background-color: #ff4200;
				border-radius:32px ;
				text-align: center;
				line-height: 31px;
				color: white;
				position: fixed;/* 固定定位*/
				top: 220px;
				right: 10px;
			}
		</style>
	</head>
	<body>
		<p>我是天空里的一片云，</p>
		<p>偶尔投影在你的波心──</p>
		<p>你不必讶异，</p>
		<p>更无须欢喜──</p>
		<p>在转瞬间消灭了踪影。</p>
		<div class="divid">TEL:13140008888</div>
		<p>你我相逢在黑夜的海上，</p>
		<p>你有你的，我有我的，方向；</p>
		<p>你记得也好，</p>
		<p>最好你忘掉</p>
		<p>在这交会时互放的光亮！</p>
		<p>我是天空里的一片云，</p>
		<p>偶尔投影在你的波心──</p>
		<p>你不必讶异，</p>
		<p>更无须欢喜──</p>
		<p>在转瞬间消灭了踪影。</p>

堆叠顺序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级

语法：z-index 数值越大越靠前

案例一

		<style>			
			img{
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: -1;  /* 图片就在文字下方*/
			}
			p{
				color: #E91917;
			}
	</style>
	</head>
	<body>		
		<img src="img/江一燕.jpg" width="200px" />
		<P>This is some text. This is some text. This is some text.</P>
		<P>This is some text. This is some text. This is some text.</P>
		<P>This is some text. This is some text. This is some text.</P>
		<P>This is some text. This is some text. This is some text.</P>
		
	</body>

案例二

<div></div>
<div></div>
<div></div>

div{
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
}
div:nth-of-type(1){
  z-index: 1;
  background-color: #008B8B;
}
div:nth-of-type(2){
  z-index: 2;
  background-color: #483D8B;
}
div:nth-of-type(3){
  background-color: #808080;
}

注意：z-index的使用前提是元素必须要有定位属性

CSS3常见效果

CSS3中对样式进行了进一步的优化，此处显示部分开发中常见的效果

圆角效果

控制盒子的四个角的弧度

语法：border-radius

控制的是元素的四个角的弧度，当弧度值大于或等于元素宽高的一半时，元素会变成一个圆

<div>
  消息通知
  <span>1</span>
</div>

div{
  position: relative;
  width: 60px;
  height: 30px;
  font-size: 14px;
  color: grey;
  margin: 50px auto;
}
span{
  position: absolute;
  right: -5px;
  top: -7px;
  display: block;
  width: 16px;
  height: 16px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  border-radius: 50%;
  background-color: red;
}

透明效果

透明效果的应用比较广泛，特别是在商城网站中的图片+文字描述

背景透明

背景透明只针对背景颜色进行透明

background-color:rgba(x,x,x,x) 透明度在0~1之间

<style>
    div{
        width: 200px;
        height: 200px;

        background-color:rgba(255,0,0,0.5); //红色
        background-color:rgba(0,255,0,0.5); //绿色
        background-color:rgba(0,0,255,0.5); //蓝色
        background-color:rgba(255, 255, 255, 0); //则表示完全透明的白色
        background-color:rgba(0, 0, 0, 1); //则表示完全不透明度的黑色
    }
</style>
	</head>
	<body>
	<div></div>
</body>

整体透明

针对整个元素进行透明，包括该元素的所有子元素

opacity 透明度在0~1之间

		<style>
			div{
			  width:100px;
			  height:35px;
			  background-color: #FF0000;
			  color: white;
			  line-height: 35px;
			  text-align: center;
			  border-radius: 10px;
			  
			  opacity: 0.2;
			}
		</style>
	</head>
	<body>
			<div>百度一下</div>
	</body>

盒子阴影

对块元素添加阴影效果从而达到视觉效果上的立体感

		<style>
			div{
				width: 200px;
				height: 200px;
				margin: 50px auto;
				/*  
					参数一 X轴偏移量 
					参数二 Y轴偏移量 
					参数三 阴影模糊程度 
					参数四 阴影扩展半径
					参数五 阴影颜色 
					参数六 inset内阴影 
				*/
				box-shadow: 3px 3px 9px 100px gray ;
			}
		</style>	
	</style>
	</head>
	<body>
			<div></div>
	</body>

文本阴影

对文本添加阴影从而达到视觉效果上的立体感

		<style>
			p{
			    text-align: center;
			    text-shadow: 3px 3px 9px grey;
			}
		</style>
	</style>
	</head>
	<body>
		<p>轻轻的我走了，正好我轻轻的来了</p>
	</body>

响应式效果（了解）

早期页面的开发，需要有前端人员、Android工程师和IOS工程师，因为PC端和移动端的屏幕大小差别比较大，需要针对PC端和移动端分别开发整套项目；从H5出现之后，前端人员在开发PC端可以通过技术将PC端的页面在IPAD和移动端上都进行自适应，因此前端就变得更加重要了。

自适应方式两种：响应式、弹性盒子；目前基本上所有用于前端页面开发的流行框架中都封装了响应式或弹性盒子的操作

界面：

大屏： pc 各种pc

小屏： pad

小小屏：手机

手机屏幕的适应

H5的出现可以让PC端的应用直接在手机端进行等比例使用，需要设置其视图模式

<meta name="viewport" content="width=device-width, initial-scale=1">

页面自适应

对网页中的元素的大小，根据电脑屏幕的大小进行动态设置，从而达到一种响应式的效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<!-- width = device-width：宽度等于当前设备的宽度
			 initial-sacle=1：初始的缩放比例为1(默认是1) 
		-->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<title></title>
		<style>
			
			/* 设置初始样式 */
			*{
			    margin: 0px;
			    padding: 0px;
			}
			.heading,.container,.footing{
			    margin: 10px auto;
			}
			.heading{
			    height: 100px;
			    background-color: cadetblue;
			}
			.left,.right,.main{
			    background-color: green;
			}
			.footing{
			    height: 100px;
			    background-color: orange;
			
			}
			
			/* 设置宽度大于960px的页面布局 */
			@media screen  and (min-width: 960px){
			    .heading,.container,.footing{
			        width:960px;
			    }
			    .left,.main,.right{
			      float: left;
			        height: 500px;
			    }
			    .left,.right{
			        width: 200px;
			    }
			    .main{
			       margin-left: 5px;
			        margin-right: 5px;
			        width: 550px;
			    }
			    .container{
			        height: 500px;
			    }
			 
			}
			
			/* 设置处于600px-900px之间的页面布局 */
			@media screen and (min-width: 600px) and (max-width:960px){
			    .heading,.container,.footing{
			        width: 600px;
			    }
			    .left,.main{
			        float: left;
			        height: 400px;
			    }
			    .right{
			        display: none;
			    }
			    .left{
			        width: 160px;
			    }
			    .main{
			        width: 435px;
			        margin-left: 5px;
			    }
			    .container{
			        height: 400px;
			    }
			 
			}
			
			/* 设置小于600px的页面布局 */
			@media screen and (max-width: 600px) {
			    .heading,.container.footing{
			        width: 400px;
			    }
			    .left,.right{
			        width: 400px;
			        height: 100px;
			    }
			    .main{
			        margin-top: 10px;
			        width: 400px;
			        height: 200px;
			    }
			    .right{
			        margin-top: 10px;
			    }
			    .container{
			        height: 400px;
			    }

			
		</style>
			
			
	</style>
	</head>
	<body>
                数据一样
			<div class="heading"></div>
			<div class="container">
			    <div class="left"></div>
			    <div class="main"></div>
			    <div class="right"></div>
			</div>
			<div class="footing"></div>
	</body>
</html>

本章小结

1.text-align是针对行元素进行水平方向对齐，line-height是针对块元素进行垂直方向对齐

2.外边距要注意塌陷问题，可以考虑使用padding代替，要注意padding会撑开父元素

3.网页布局要选择浮动，需要控制元素进行调整的使用定位

实现小米官网部分效果

.container{
height: 400px;
}

		}
		
		/* 设置小于600px的页面布局 */
		@media screen and (max-width: 600px) {
		    .heading,.container.footing{
		        width: 400px;
		    }
		    .left,.right{
		        width: 400px;
		        height: 100px;
		    }
		    .main{
		        margin-top: 10px;
		        width: 400px;
		        height: 200px;
		    }
		    .right{
		        margin-top: 10px;
		    }
		    .container{
		        height: 400px;
		    }

		
	</style>
		
		
</style>
</head>
<body>
            数据一样
		<div class="heading"></div>
		<div class="container">
		    <div class="left"></div>
		    <div class="main"></div>
		    <div class="right"></div>
		</div>
		<div class="footing"></div>
</body>

```