CSS设置宽高的小技巧

、css宽高自适应：

1.宽度自适应：

元素宽度设为100%（块状元素的默认宽度为100%）

注：应用在通栏效果中

2.高度自适应：

height:auto;或者不设置高度

3.最小，最大高度，最小，最大宽度：

a)最小高度 min-height:value;

IE6不识别min-height属性，解决方案如下：
 
方案一：min-height:100px; _height:100px;
 
方案二：min-height:100px; height:auto!important; height:100px;

b)最大高度：

max-height:value;

c)最大宽度：

max-width:value;

d)最小宽度：

min-width:value;

注：块状元素设置最小宽度时，需要将元素转换为内联块状元素，添加display:inline-block;

注：以上四个属性IE6及以下版本浏览器不支持

4.高度塌陷问题：

描述：子元素浮动，父元素高度自适应，造成父元素高度为0，简称高度塌陷问题

解决方案：

方案一：

给父元素添加overflow:hidden;
 
优点：简单，兼容性好
 
缺点：当有position:relative;出现时，会影响页面显示效果

方案二：

给父元素固定的高度 height:value;
 
缺点：不灵活，高度无法自适应

方案三：

在子元素的末尾添加一个空div，并设置样式
 
.clear{height:0; overflow:hidden;clear:both;}
 
优点：所有浏览器都支持
 
缺点：在页面中添加一个无意义的div，造成代码冗余

方案四：（万能清除浮动法，推荐使用）

通过伪元素的方式清除浮动

父元素:after{
 content:"";
 height:0;
 overflow:hidden;
 clear:both;
 display:block;
 visibility:hidden;
}

注：伪元素是内联元素,转换为块元素设置宽高才能生效

height:0;在IE6下不兼容，添加overflow:hidden;兼容IE6

二、元素隐藏不可见的两种方式（display:none;和visibility:hidden的区别）

1.display:none;元素隐藏不可见，位置不保留

2.visibility:hidden;元素隐藏不可见，位置保留

三、窗口高度自适应

首先，给html，body设置高度为100%

html,body{height:100%;}
 
然后给元素设置高度100%
 
div{height:100%}
 
注：常用于窗口内容不满一屏或者没有内容body高度为0时

四、水平居中和垂直居中：

1.行内元素水平居中设置

设置文本、图片等行内元素水平居中，给父元素设置text-align:center;

2.定宽块状元素水平居中设置

给定宽块状元素设置左右margin值为auto

注：当元素设置float或绝对定位，固定定位时，左右margin为auto失效

3.不定宽块状元素水平居中

方法一：

给父元素设置 {display:table;margin:0 auto;}

注： display:table;将元素转换为表格的形式

方法二：

子元素设置： {display:inline-block;}

父元素设置：{text-align:center;}

五、元素水平垂直都居中

1.未知宽高元素在屏幕窗口水平垂直都居中

方法一：

元素{
 
width:value;
 
height:value;
 
position:fixed;
 
left:50%;
 
top:50%;
 
margin-left:-width/2+px;
 
margin-top:-height/2+px;
 
}

方法二：

元素{
width:value;

height:value; 

position:fixed;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;
}

2.未知宽高元素在父元素中水平垂直都居中

方法一：

元素{
 
width:value;
 
height:value;
 
position:absolute;
 
left:0;
 
top:0;
 
right:0;
 
bottom:0;
 
margin:auto;
 
}

方法二：

父元素{
 
width:value;
 
height:value;
 
display:table-cell;
 
vertical-align:middle;
 
text-align:center;
 
}

注：display:table-cell;将元素转换为表格单元格形式

谷歌统计，全球有700多种编程语言，是不是听上去很耸人听闻？！现今，各种框架和各种编程语言一直是你方唱罢我登场，来来往往。

而对于HTML，不管你习惯与否，它始终在那。无论选择哪种框架或后端语言，所有Web开发人员都必须躲不开使用HTML。个人认为，即使是实现相同的功能，最好还是使用HTML编写，而非JS，尽管我也承认编写HTML可能显得比较“重体力”，而且很无聊。

HTML有如此广泛的用途和“坚强的生命力”，仍有开发人员所不太知晓的标签和属性。以下是您应该了解的5个HTML标记和属性：

1 . 懒加载图片

懒加载避免加载浏览器上那些不需要去即可加载的图像，而是当向下滑动页面或接近图像时，图像才开始加载。

换句话说，当用户下滑页面时加载图像，呈现他们，否则不做加载。懒加载图像可以帮助提高网站性能和响应速度。

这可以通过HTML轻松实现，所要做的就是将loading=“lazy”属性添加到图像文件中。

添加属性后，我们的图片元素会是这样：

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

通过使用Google的Lighthouse工具，你可以get到相关的一些技巧。

相关地址：https://developers.google.com/web/tools/lighthouse/

2 . 输入推荐

用户在做搜索录入时，如果能够拿到相关的输入内容推荐，应该会提升使用体验。

如今，输入补全推荐功能是相当普遍的，你可以在天猫、头条、抖音等太多平台见到。你可以通过JS添加输入补全推荐，方法是在输入字段上设置事件侦听，这样能够把搜索到的词条与预定义推荐进行匹配。

但是，通过HTML也可以使用<datalist>标签显示一组预定义的补足推荐，需要注意下，此标记的ID属性必须与输入字段列表属性相同。

<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
  <option value="UK">
  <option value="Germany">
  <option value="USA">
  <option value="Japan">
  <option value="India">
</datalist>

3 . 图片标签

你是否曾经遇到图像无法按预期缩放的情况？我是遇到过的，譬如当我要使用大图，同时把它显示为缩略图时，很可能会发生这种情况。

更改viewport width时，你会注意到某些图像未按预期缩放。幸运的是，HTML通过使用<picture>标记使开发人员很容易地解决这个问题，该标记允许你添加适合不同宽度的多个图像，而不必单个缩放。

如下所示：

<picture>
  <source media="(min-width:768px)" srcset="med_flag.jpg">
  <source media="(min-width:495px)" srcset="small_flower.jpg">
  <img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>

如你看到的，我们指定了必须显示特定图像的最小宽度。

这个标签和<audio>和<video>标签非常相似。

4 . base URL

在创建网站索引或站点地图的时候，这应该算是我最喜欢的标签之一。

如果我们有很多锚标签重定向到某个URL，并且所有URL都以相同的base address开头时，这个标签应该非常有用。

例如，如果我要指定zhang san和wang er的微博handles的URL，则URL的开头会相同，而其后是它们各自的ID。通常，我必须将链接与相同的域名一起粘贴两次。

不过，HTML有一个<base> tag，这使我可以设置基本URL的标记，如下所示：

<head>
  <base href="https://www.weibo.com/" target="_blank">
</head>
<body>
<img src="zhangsan" alt="Zhang San">
<a href="wanger">Wang Er</a>
</body>

上面的代码将生成一个图像重定向到“ https://www.weibo.com/zhangsan”和一个锚标记重定向到“ https://www.weibo.com/wanger”。

这个<base> tab应该要么是具有“href”或是所提供对象的属性。

5 . 文档刷新

如果要把用户重定向到另一个页面，那么是可以用纯HTML来轻松实现的。

过往你打开某些网站的时，可能注意到了这个功能：弹出“你会在5秒钟内被重定向”。

你是可以通过<meta> tab，并对它进行设置http-equiv=“refresh”从而使用它。

<meta http-equiv="refresh" content="4; URL='https://google.com' />

在此，content属性指定重定向发生的秒数。

HTML加CSS是很强大，我们其实是可以仅使用它们两就构建出像样的网站的，只要你足够沉浸于其中，不断学习。

级标签

一个页面的布局就像一张报纸需要排版，需要分为多个区块。块内为多行逐一排列的文字、图片、超链接等内容，这些区块一般称之为块级标签；而文字、图片、超链接等称之为行级标签。

块级标签显示的外观按“块”来显示，具有一定的高度和宽度，如：<div>、<p>等；

行级标签显示的外观按“行”来显示，类似于文本的显示，如：<img>、<a>等。

1.基本的块级标签

1.1.标题标签<h1>~<h6>

标题标签表示一段文字的标题（主题），并且支持多层次的内容结构，一级标签使用<h1>，二级标签使用<h2>，以此类推。html提供六级，<h1>最大，<h6>最小代码及显示效果如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>标题标签对比</title>
	</head>	
	<body>
		<h1>一级标签</h1>
		<h2>二级标签</h2>
		<h3>三级标签</h3>
		<h4>四级标签</h4>
		<h5>五级标签</h5>
		<h6>六级标签</h6>
	</body>
</html>

标题标签代码预览

1.2.段落标签<p>

段落标签是表示一段文字内容的，一个段落可以包含多行文字，文字内容将随浏览器窗口的大小自动换行。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落标签</title>
	</head>	
	<body>
		<h1>标题</h1>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

段落标签代码预览

1.3.水平线标签<hr/>

水平线标签显示一条水平线，这个标签比较特殊没有结束标签，直接是用来<hr/>表示标签的开始和结束。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落标签</title>
	</head>	
	<body>
		<h1>标题</h1>
    <hr/>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

水平线标签代码预览

2.常用于布局的块级标签

2.1.有序列表标签<ol>

使用<ol>,</ol>(有序列表)，<li></li>(列表项)HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>有序列表</title>
	</head>	
	<body>
		<ol>
			<li>第一条数据</li>
			<li>第二条数据</li>
			<li>第三条数据</li>
		</ol>
	</body>
</html>

有序列表代码预览

2.2.无序列表标签<ul>

使用<ul>,</ul>(无序列表)，<li></li>(列表项)HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>无序列表</title>
	</head>	
	<body>
		<ul>
			<li>第一条数据</li>
			<li>第二条数据</li>
			<li>第三条数据</li>
		</ul>
	</body>
</html>

无序列表代码预览

2.3.定义列标签<dl>

使用<dl>（定义列表）<dt> （定义列表中的项目）和 <dd> （列表中项目的描述）HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>dl-dt-dd的使用</title>
	</head>	
	<body>
		<dl>
			<dt>项目名称</dt>
			<dd>项目描述的第一行</dd>
			<dd>项目描述的第二行</dd>
		</dl>
	</body>
</html>

定义列标签<dl>代码预览

2.4.表格标签<teble>

使用<teble>，</teble>（表格），<tr>，</tr>（行），<td>，</td>（列）HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>table标签的使用</title>
	</head>	
	<body>
		<table width="200" border="1">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>20</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>22</td>
			</tr>
		</table>
	</body>
</html>

表格标签代码预览

2.5.表单标签<form>

使用<form>,</form>（表单），<input/>（内容）HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
		<title>form的使用</title>
	</head>
	<body>
		<form action="" method="post">
			<p>
				用户名：
				<input name="username" type="text" size="20" />
			</p>
			<p>
				密   码：
				<input name="password" type="password" size="20" />
			</p>
			<input name="submit" type="button" value="登录" />
		</form>
	</body>
</html>

form标签代码预览

2.6.分区标签<diy>

<diy>标签相当于一个大容器，可以容纳无序、有序列表，表格等标签，也可以容纳图片、文字、标题、段落等内容HTML代码如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>div的使用</title>
	</head>	
	<body>
		<div style="width: 500; height: 300; background-color: aquamarine;">
			<p>段落标签</p>
			<h1>标题标签</h1>
			<ul>
				<li>无序列表标签第一行</li>
				<li>无序列表标签第二行</li>
			</ul>
			文字可以直接输入在这里
		</div>
	</body>
</html>

div标签代码预览

在线咨询

上一篇：JS常用方法和一些封装：dom相关
下一篇：红色故事：一封迟到的信（PPT课件）