整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素
自动调整，这就是pc自适应。
自适应的优点：
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
元素宽度设置为100%。（块元素宽度默认为100%）
或者不设置宽度（width）;（宽度是父元素的宽度）
1)自适应元素高度：height:auto;或者不设置;（是子元素撑开父元素的高度）
?
2)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。
min-height属性：最小高度；(IE6浏览器不识别该属性) ?
hack1:min-height:value;_height:value; ?
hack2:min-height:value; height:auto!important;height:value;
当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷
hack1：给父元素添加声明overflow:hidden;(触发一个BFC)
hack2: 在浮动元素下方添加空div,并给该元素添加 声明：div{clear:both; height:0; overflow:hidden;}
hack3:万能清除浮动法
选择符:after {
content: "";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}visibility:hidden;和display:none;的区别：
visibility:hidden;属性会使对象不可见，但该对象在网页所占的空间没有改变，等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失不显示，也不再占用位置。
1）、::after : 与content属性一起使用，定义在对象后的内容。
语法：选择符:：after{content:”文字”;}
选择符:：after{content:url(图片路径)；}
如：div::after{content:url(logo.jpg);}
div::after{content:"文本内容";}
2）、::before: 与content属性一起使用,定义在对象前 的内容。
div::before{content:"在其前放内容";}
3）、::first-letter 定义对象内第一个字符的样式。
说明：
*(该伪元素只能用于块级元素)
4）、::first-line:定义对象内第一行的样式。
*(该伪元素只能用于块级元素。)
本文转自知乎号：千锋HTML5学院
家好，我是吉礻羊。
有人@我说不知道怎么写自适应的网页，今天就先不写优化的了，我把写自适应网页的方法说下。
自适应的网页
工具：dw网页设计软件；ps图像处理软件。
方法/步骤：
1，在<head></head>之间加入加入一行viewport标签。
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
由于大家使用的电脑分辨率不一样，大小也不一样，所以网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，对图像来说也是这样。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
2，字体也不能使用绝对大小（px），而只能使用相对大小（em）。
例如：
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代码指定，字体大小是页面默认大小的100%，即14像素。
3，"自适应网页"的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0" />
<title></title>
<style>
body {
height: 800px;
}
.header {
width: 100%;
height: 15%;
background-color: aquamarine;
}
.leftside {
width: 20%;
height: 75%;
background-color: skyblue;
float: left;
}
.main {
float: right;
width: 80%;
height: 75%;
background-color: steelblue;
}
.footer {
clear: both;
width: 100%;
height: 10%;
background-color: darkgray;
}
</style>
</head>
<body >
<div class="header"></div>
<div class="leftside"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
家都知道如果不给一个元素设定一个具体的height，它就会自动适应其内容的高度。但是如果我们希望width也有类似的行为，我们该怎么做呢？
下面是我们实际的HTML：
<body>
<p>Let’s assume we have some text here. Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat.</p>
<!--使用 <figure> 元素标记文档中的一个图像-->
<figure>
<img src="../img/adamcatlace.jpg" />
<!-- 使用 <figure> 元素标记文档中的一个图像。<figure> 元素带有一个标题：-->
<figcaption>
The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer ever.
</figcaption>
</figure>
<p>We also have some more text here. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta.</p>
</body>最初的实际效果如下：
如果我们为figure添加一道边框，在默认情况下，如下图所示：
<style>
figure{
border: red solid 5px;
}
</style>我们会发现边框实际是跟着屏幕的宽度在变化的，但我们实际上想要的是让figure这个元素跟它所包含的图片一样宽，并且使图片水平居中于屏幕中心。
那么我们应该怎么解决呢？
方案1：float
<style>
figure{
border: red solid 5px;
float: left;
}
</style>我们的确的到了想要的宽度，但是网页的布局也混款了。
方案2：display: inline-block
<style>
figure{
border: red solid 5px;
display: inline-block;
}
</style>我们得到了我们想要的宽度，但我们发现很难继续完成水平居中的任务，我们需要：
<style>
body{
text-align: center;
}
p{
text-align: left;
}
figure{
border: red solid 5px;
display: inline-block;
}
</style>但我们发现这样很麻烦，我们首先对其父元素设置了text-align:center，然后又对其父元素的其他子元素又设置了text-align:left，就算是这样，图片的说明文字还是比图片宽，很难看。
最终方案：
<style>
figure{
border: red solid 5px;
width: min-content;
margin: auto;
}
</style>这个min-content的意思就是将这个元素宽度设置为这个容器内部最大的不可断行的元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）。
*请认真填写需求信息，我们会在24小时内与您取得联系。
