正文

[html]关于html标签的一些总结

IP云
IP云V管理员/3 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

以下内容纯属个人对项目细节的总结，因为只是为了自己回顾方便，所以比较杂乱。

1、img

如果不指定img的高度和宽度，则img显示的是原图片的大小；如果只指定了高度和宽度中的一者，则为指定的一者等比例的缩放因子相同；如果同时指定了二者，则高度和宽度都变化；

在img外面套上div的标签，指定div的width和height，如果比img的大小小，则img会溢出div；如果div指定的overflow为hidden，则溢出部分被隐藏。

2、div,article,section的区别(都是块级元素，可以用于盒子模型)

  1. <div> — the generic flow container we all know and love. It’s a block-level element with no additional semantic meaning (W3C:Markup, WhatWG)    【div没有任何语义，它就是一个基本流的容器】
  2. <section> — a generic document or application section . A <section> normally has a heading (title) and maybe a footer too. It’s a chunk of related content, like a subsection of a long article, a major part of the page (eg the news section on the homepage), or a page in a webapp’s tabbed interface. (W3C:Markup, WhatWG)  【section是一篇文章的一个章节，可以有自己的标题和页脚】
  3. <article> — an independent part of a document or site . This means it should be able to ‘stand alone’, and still make sense if you encountered it somewhere else (e.g. in an RSS feed). Examples include a weblog article (duh), a forum post or a comment. Like <section> these generally have a header, and maybe a footer (W3C:Markup, WhatWG) 【article是一篇文章，可以独立出去】

To decide which of these three elements is appropriate, choose the first suitable option:

  1. Would the enclosed content would make sense on it’s own in a feed reader? If so use <article>
  2. Is the enclosed content related? If so use <section>
  3. Finally if there’s no semantic relationship use <div>

3、对文本布局，可以使用column-count

4、行间距可以用百分数来设定，例如：line-height:100%

5、line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

6、div, h1,p, span,经常在这四个标签中包含文字，现在比较一下：

width和height:对div, h1, p均有效，span不支持

div:布局里有两个div，由于块级元素后面加了换行符，因此是上下各放置一个；相当于display:block;

如果设置display:inline-block的话，则这两个div会水平放置，width和height仍然生效；

如果设置为display:inline的话，则这两个div会完全变成span的样式，即水平放置，但是width和height都不生效；

h1和p同上。

span:布局里有两个span，会放置在同一行，相当于display:inline;

如果设置为display:inline-block和display:block时，和div标签相同；

注意的是：这4个标签，设置为display:block时，块级元素间的距离是不同的，这点不知道是为什么。

7、text-align的值，只用于文本，常用的有：left,right,start,center;

8、vertical-align:使用该属性的元素的display需要设置成inline-block

9、要想要块级元素中的文字居中，让line-height和块级元素的height相同即可

10、div标签要指定background，需要给【该】div标签指定width和height，才能显示

和img不同，img指定宽度和高度后，显示的仍然是完整的图片；background指定后，如果width或者height比图片（背景是图片的话）小，显示的是图片的部分；如果更大，也不会放大图片；因此可以通过指定width,height,position来完成只显示图片的固定部分。

11、两个块级元素要放置在同一行，需要把它们两个都设置成display:inline-block，而不是把它们的父级元素设置成inline-block

12、当设置一个元素的熟悉为box-sizing:border-box;时，此元素的内边距和边框不再会增加它的宽度。

13、 

 #outer {
         width: 500px;
         height: 200px;
         background: #FFCCCC;
         margin: 50px auto 0 auto;
         display: block;
 }
 #inner {
         background: #FFCC33;
         margin: 50px 50px 50px 50px;
         padding: 10px;
         display: block;
 }
 <div id="outer">
   <div id="inner">
       Hello world!
   </div>
 </div>

由于css的特性，以上inner的margin-top:50px的效果并不会呈现出来，解决办法有三个：

1）给inner元素加上display:inline-block属性

2）给outer元素加上：padding-top:1px

3) 给outer元素加上:overflow：auto

相关阅读

目录[+]