HTML的总结
1.注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”
这样同一组的单选按钮才可以起到单选的作用。2.label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在
label 标签内点击文本,di就会触发此控件。
点击文字就可以选中按钮。
<label for="控件id名称"></label>
<input id="控件id名称" />
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
3.浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,
所以可以理解为继承的权值最低。
4.层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在
时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
p{color:red;}
p{color:green;}green被使用
5.我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,
如下代码:
p{color:red!important;}
p{color:green;}
6.
2em的意思就是文字的2倍大小。
7.常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
8.
内联元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
9.
inline-block 元素特点:
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置
10.在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer
11.
流动布局模型具有2个比较典型的特征:
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,
因为在默认状态下,块状元素的宽度都为100%。
2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。
12.
层模型有三种形式:
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
13.
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意:
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性
(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
14.
就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,
那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px(也就是两个字体大小的距离)。
下面注意一个特殊情况:
但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px(14 * 0.8 = 11.2px)。
15.
满足(定宽和块状)两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
16.不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):
1.加入 table 标签
2.设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
1.加入table后可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,
使其水平居中。
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
要注意是这个 div元素 居中,而不是里面的文本居中啊
2.
display:inline; text-align:center
这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,
变成了行内元素,所以少了一些功能,比如设定长度值。
17.
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差,在 CSS 中成为“行间距”。分为两半,
分别加到一个文本行内容的顶部和底部。
即:字体:height == line-height
18.
父元素高度确定的多行文本、图片等的竖直居中的方法有两种:
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle
方法二:display:table-cell vertical-align:middle
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7
而且这样修改display的block变成了table-cell,破坏了原有的块状元素的性质。
19.
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
1. position : absolute
2. float : left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,
当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。
-------------------------------------------------------------------------------
w3c
1.对齐:margin:auto;
2.position:absolute左右对齐
3.float:左右对齐
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
1.line-height = height
2.padding 上下设置相同的内边距
--------------------------------------------------------------------------
解决兼容性的问题bug
1.声明严格的<!doctype>
2.使用css初始化文件进行初始化
IEbug
1.双倍marginbug _display:inline;
2.不认识a:link 直接写a
3.3px 的margin bug 规范浮动与清除浮动
用绝对定位时,父元素要有position,否则一直向上找直到找到祖先元素有position
为止,同时也是相对于此时的祖先元素进行相对!
绝对定位相对于漂浮起来,不占位置;同时覆盖了下面的元素
相对定位,位置改变了原来的位置还是自己占的!
比较小的元素,有的浏览器最小为5px,使用此时overflow:hidden
margin-left:为负值的时候,当全部的空间左边全走完了,则像上面走!
如果行内元素放一个块级元素,块级元素会占父亲的父亲全部宽度,相当于父元素也是块级元素
父元素不设置高度,子元素是有高度的,会把父元素撑开*/
/*如果子元素设置浮动的话,就脱离了文档流,就不会把父元素撑开了
-----------------------------------------------------------------------------
CSS from Head first Html/CSS
1.文档流规定元素的排放方式就是流.块级元素由上至下,内联元素由左上至右下
2.对内联元素定位时,他们会考虑到浮动元素的边界因此会围绕元素;
对于内联元素进行浮动是可以的,不过除了图片其他的都不常见!
对于浮动元素,块级元素相当于忽略,而内联元素会在意。
当绝对定位的时候,元素会被文档流完全删除。
可以对任何元素绝对定位,包括内联和块元素!
绝对定位用百分比的时候,是相对于浏览器的宽和高。
css手册:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”这个很绕,打个比喻:假设有两个行内元素a和 b,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置
在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。
结构和表现分离的思想,用尽量少的div先控制框架,继而实现设计稿中的分离!
1.浮动让元素变成block
2.去空格化,浮动可以将空格去除,比如按钮
在html中已经声明 自闭合元素(单闭合标签)后的斜杠可以省略,既然可以省略,省略更好,省字节。(双闭合标签千万别省,不然错那都不知道了,经常会因为这些小细节,找一下午,中枪有木有?)