当前位置：首页 > ds >正文

197-200CSS3响应式布局，BFC

ds 2025/9/1 23:41:59

CSS3响应式布局-媒体查询

举例

<title>01.媒体查询_媒体类型</title><style>h1 {width: 600px;height: 400px;background-image: linear-gradient(60deg,red,yellow,green);font-size: 40px;color: white;text-shadow: 0 0 20px black;text-align: center;line-height: 400px;margin: 0 auto;}/* 打印机设备 */@media print {h1 {background-color: transparent;}}/* 在屏幕上面应用的样式  */@media screen {h1 {font-family:'Trebuchet MS';}}/* 一直应用的样式 */@media all {h1 {color: pink;}}</style>
</head>
<body><h1>媒体类型（print / screen）</h1>
</body>

<title>02.媒体查询_媒体特性</title><style>h1 {background-color: blue;font-size: 40px;color: white;text-align: center;height: 400px;line-height: 400px;}/* 当检测到视口为 800px 时候变为黄色  */@media (width:800px) {h1 {background-color: yellow;}}/* 最大宽度为700px，那么也就是小于 700px的时候所产生的效果   */@media (max-width:700px) {h1 {background-color: green;}}/* 最小宽度为900px   那么代表的意思就是屏幕超过 900px 产生的效果 */@media (min-width:900px) {h1 {background: chocolate;}}/* 视口高度 小于300px时候  */@media (max-height:300px) {h1 {background: goldenrod;}}/* device 设置前缀  *//* @media (device-width:1920px) {h1 {background-color: aquamarine;}} */</style>
</head>
<body><h1>(宽度  高度计算）</h1>
</body>

<title>03.媒体查询_运算符</title><style>h1 {background-color: rgba(236, 230, 219,.7);font-size: 40px;color: white;text-align: center;height: 300px;line-height: 300px;}/* and 运算  并且   大于 700px ~ 900px  *//* @media (min-width:700px) and (max-width:900px) {h1 {background-color: tomato;}  } *//* 方式2  兼容ie写法  and 运算 *//* @media screen and (min-width:700px) and (max-width:900px) {h1 {background-color: tomato;}  } *//* or 或 ， *//* @media (max-width:700px) or (min-width:900px) {h1 {background-color: gold;}  } */@media screen and (max-width:700px) , (min-width:900px) {h1 {background-color: green;}  }/* not 否定 */@media not screen {h1 {background-color: yellow;} }/* only 肯定 当屏幕在800px时候生效 */@media only screen and (width:820px){h1 {background-color: purple;} }</style>
</head>
<body><h1>(媒体计算，运算符 ）</h1>
</body>

CSS3响应式布局-常用阈值

 <title>04.媒体查询_常用阀值</title><style>div {background-color: rgba(212, 159, 61, 0.7);font-size: 20px;color: white;text-align: center;height: 100px;line-height: 100px;display: none;}/* 超小屏幕 */@media screen and (max-width:768px) {.small_width {display:block;background-color: red;}}/* 中等屏幕 */@media screen and (min-width:768px) and (max-width:992px){.middle_width {display:block;background-color: pink;}}/* 大屏幕 */@media screen and (min-width:992px) and (max-width:1200px) {.large_width {display:block;background-color: green;}}/* 超大屏幕 */@media screen and (min-width:1200px) {.huge_width {display:block;background-color: skyblue;}}</style>
</head>
<body><div class="small_width">我是最小的宽度，宽度 768px</div><div class="middle_width">我是中等屏幕，宽度 768px ~ 992px </div><div class="large_width">我是大屏宽度，宽度 992px ~ 1200px</div><div class="huge_width">我是超大宽度，宽度 1200px 以上</div>
</body>

 <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05.媒体查询_常用阀值(外部引入方式1)</title><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/small.css"><link rel="stylesheet" href="./css/middle.css"><link rel="stylesheet" href="./css/large.css"><link rel="stylesheet" href="./css/huge.css"></head>
<body><div class="small_width">我是最小的宽度，宽度 768px</div><div class="middle_width">我是中等屏幕，宽度 768px ~ 992px </div><div class="large_width">我是大屏宽度，宽度 992px ~ 1200px</div><div class="huge_width">我是超大宽度，宽度 1200px 以上</div>
</body>

  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05.媒体查询_常用阀值(外部引入方式1)</title><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" media="screen and (max-width:768px)" href="./css/small.css"><link rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px)" href="./css/middle.css"><link rel="stylesheet" media="screen and (min-width:992px) and (max-width:1200px)" href="./css/large.css"><link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/huge.css"></head>
<body><div class="small_width">我是最小的宽度，宽度 768px</div><div class="middle_width">我是中等屏幕，宽度 768px ~ 992px </div><div class="large_width">我是大屏宽度，宽度 992px ~ 1200px</div><div class="huge_width">我是超大宽度，宽度 1200px 以上</div>
</body>

BFC

举例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;}.continer{width: 100px;height: 200px;background: pink;overflow: hidden; //设置BFC}.box{margin-top: 50px;height: 50px;width: 50px;background: skyblue;}</style>
</head>
<body><div class="continer"><div class="box"></div></div>
</body>
</html>

结果