响应式布局内减盒模型媒体查询嵌入式布局

忘是亡心i 2021-09-18 13:54 331阅读 0赞

## **百分比布局：** ##

标准流和浮动：

1width，padding，margin父盒子内容宽比值

2 height父盒子内容高的比值

3 border不能使用百分数

*  ## **内减盒模型** ##

盒子设置width,height，再设置padding，border盒子的占有区域变大，内容区域不变。这种称为外扩盒模型

css3增加的属性，内减盒模型

盒子设置width,height，再设置padding，border盒子的占有区域不变，内容区域变小。

width:盒子的占有宽度

height:盒子的占有高度

box-sizing: border-box;

1	.box2 {
    2		/*通栏*/
    3		width: 100%;
    4		height: 200px;
    5		background-color: #eee;
    6	}
    7	.box2 p {
    8		float: left;
    9		/*width:占有宽度  一定是内减盒模型*/
    10		width: 50%;
    11		height: 100%;
    12		background-color: orange;
    13		padding: 20px;
    14		border: 1px solid #000;
    15		box-sizing: border-box;
    16	}
    17	.box2 p:last-child {
    18		background-color: lightblue;
           }

![20190321201849517.png][]

## **如何写响应式布局** ##

**    通过视口决定 当用户拉伸浏览器时 可以自行设置不同的css文件加载**

<table style="width:214px;"> 
 <tbody> 
  <tr> 
   <td style="width:397px;">&lt;!-- 视口大于或者等于1200 p均分 01.css--&gt;&nbsp; 当视口大于等于1200加载第一个css</td> 
  </tr> 
  <tr> 
   <td style="width:397px;">&lt;link rel="stylesheet" type="text/css" href="<a rel="nofollow">css/01.css</a>" media="screen and (min-width: 1200px)"&gt;</td> 
   <td style="width:29px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:397px;">&lt;!-- 视口小于1200px 同时大于 700px p独占一行 --&gt;</td> 
   <td style="width:29px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:397px;">&lt;link rel="stylesheet" type="text/css" href="<a rel="nofollow">css/02.css</a>" media="screen and (max-width: 1199px) and (min-width: 700px)"&gt;</td> 
   <td style="width:29px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:397px;">&lt;!-- 视口小于700 p改变颜色 加载03.css--&gt;</td> 
   <td style="width:29px;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="width:397px;">&lt;link rel="stylesheet" type="text/css" href="<a rel="nofollow">css/03.css</a>" media="screen and (max-width: 699px)"&gt;</td> 
   <td style="width:29px;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 媒体查询 ##

css3不需要借助js也可以实现媒体查询。

同一个html网页根据视口不同，显示不同的样式（加载不同的css）

外链式实现媒体查询：

screen:屏幕

media:媒体

min-width: 最小值，视口大于或者等于该值加载这个css

max-width:最大值，视口小于或者等于该值加载这个css

媒体查询可以划分多个段口：使用and链接

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td style="width:521.1pt;"> 
    <ol> 
     <li>&lt;!-- 视口大于或者等于1200&nbsp; p均分 01.css--&gt;</li> 
     <li>&lt;link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width: 1200px)"&gt;</li> 
     <li>&lt;!-- 视口小于1200px&nbsp;&nbsp; 同时大于 700px&nbsp; p独占一行 --&gt;</li> 
     <li>&lt;link rel="stylesheet" type="text/css" href="css/02.css" media="screen<span style="color:#ff0000;"> and</span> (max-width: 1199px) and (min-width: 700px)"&gt;</li> 
     <li>&lt;!-- 视口小于700 p改变颜色 加载03.css--&gt;</li> 
     <li>&lt;link rel="stylesheet" type="text/css" href="css/03.css" media="screen and (max-width: 699px)"&gt;</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

IE8不认识media，“留活口”

<table style="width:695px;"> 
 <tbody> 
  <tr> 
   <td style="width:521.1pt;"> 
    <ol> 
     <li>&lt;!-- 留活口&nbsp; 所有视口都会加载该css --&gt;</li> 
     <li>&lt;!-- 大于等于1200px加载01.css --&gt;</li> 
     <li><span style="color:#ff0000;">&lt;link rel="stylesheet" type="text/css" href="css/01.css"&gt;</span></li> 
     <li>&lt;!-- 小于1200px加载04.css --&gt;</li> 
     <li>&lt;link rel="stylesheet" type="text/css" href="css/04.css" media="screen and (max-width: 1199px)"&gt;</li> 
    </ol></td> 
  </tr> 
 </tbody> 
</table>

嵌入式布局

/*清除默认样式*/
    	* {
    		padding: 0;
    		margin: 0;
    	}
    	ul, ol {
    		list-style: none;
    	}
    	a {
    		text-decoration: none;
    		color: #000;
    	}
    	.box {
    		width: 100%;
    		overflow: hidden;
    	}
    	/*媒体查询 and连接视口*/
    	@media screen and (min-width: 1200px) {
    		p {
    			float: left;
    			width: 50%;
    			height: 200px;
    			background-color: green;
    		}
    		.no2 {
    			background-color: orange;
    		}
    	}
    
    	/*小于1200px  更改样式*/
    	@media screen and (max-width: 1199px) {
    		.box p {
    			width: 100%;
    			height: 200px;
    			background-color: red;
    		}
    		.box .no2 {
    			background-color: lightblue;
    		}
    	}
    
    	</style>
    </head>
    <body>
    	<div class="box">
    		<p>1</p>
    		<p class="no2">2</p>
    	</div>
    </body>

[20190321201849517.png]: /images/20210812/9060ab6708954b609a6995345aa92f93.png