html dvi如何设置置顶不能空白位置,[html]关于html标签的一些总结
以下内容纯属个人对项目细节的总结，因为只是为了自己回顾方便，所以比较杂乱。
1、img
如果不指定img的高度和宽度，则img显示的是原图片的大小；如果只指定了高度和宽度中的一者，则为指定的一者等比例的缩放因子相同；如果同时指定了二者，则高度和宽度都变化；
在img外面套上div的标签，指定div的width和height，如果比img的大小小，则img会溢出div；如果div指定的overflow为hidden，则溢出部分被隐藏。
2、div,article,section的区别(都是块级元素，可以用于盒子模型)
— a generic document or application section. A 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是一篇文章的一个章节，可以有自己的标题和页脚】
— 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 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:
Would the enclosed content would make sense on it’s own in a feed reader? If so use
Is the enclosed content related? If so use
Finally if there’s no semantic relationship use
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;
}
Hello world!
由于css的特性，以上inner的margin-top:50px的效果并不会呈现出来，解决办法有三个：
1)给inner元素加上display:inline-block属性
2)给outer元素加上：padding-top:1px
3) 给outer元素加上:overflow：auto
a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签 缺失或错误 这 ...
【CSS进阶】伪元素的妙用--单标签之美
最近在研读 (CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
TODO：Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
css-父标签中的子标签默认位置
& ...xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
多个Img标签之间的间隙处理方法
1.多个标签写在一行 ...
html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
JSP目录
JSP目录 课时1 jsp概述和背后原理31:11 课时2 三种jsp的scriptlet语法27:29 课时3 jsp的注释14:00 课时4 JSP4个域对象的作用域3 ...
JS浏览器全屏
//全屏 function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el ...
转载——PLSQL developer 连接不上64位Oracle 解决办法
前两天刚下载了oracle 11g 64位的最新版本,安装成功之后,再安装PLSQL.结果使用PLSQL访问数据库时,死活连接不上.报错如下: Could not load "……\bin\ ...
Android学习笔记1 android adb启动失败问题 adb server is out of date. killing...