最近跟着布尔教育的十八哥学习HTML,做了点笔记,记录一下,方便以后查看:
1.盒子与盒子之间优先使用margin。
2.盒子与文字之间优先使用padding。
3.margin与padding后面的参数按照上右下左顺时针的方向来定义,当某一个位置没有对应的值,这取对边的值。
例如:margin:10px 20px30px ==> 上右下左对应的值分别为:10px、20px、30px、20px(左这个位置没有确定的值,所以取对边即右这个位置对应的值20px)。
4.上下相邻的普通元素,上下边距并非简单的相加,而是取其中较大的边距值,这种现象成为margin重叠。
5.一个盒子,右margin,border,padding,实占多少空间?
竖直方向的长度:height + margin-top + margin-bottom+ padding-top + padding-bottom + border-top + border-bottom;
水平方向的长度:width + margin-left + margin-right + padding-left +padding-right + border-left + border-right.
6.XHTML究竟有多少个标签?答案:91个~
a, abbr, b,base, body, br, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6,head, hr, html, i, img, li, link, meta, ol, p, s, script, span, strong, style,title, u, ul, acronym, address, applet, area, basefont, bdo, big, blockquote,button, caption, center, cite, code, col, colgroup, del, dfn, dir, font, frame,frameset, iframe, input, ins, isindex, kbd, label, legend, map, menu, noframes,noscript, object, optgroup, option, param, pre, q, samp, select, small, strike,sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, var
常见的块状元素与内联元素
块状元素 |
address - 地址 li - 列表项目 |
内联元素 |
a - 锚点 |
7.当内联元素,在CSS中定义下列属性中的一种,便具有块元素的特征
1)display:block;
2)float:left; (不但具有块元素的特征,同时像左侧浮动)
但是这时候的内联元素,虽然具有块状元素的特征,但是这两种有一点区别,第一种,彻头彻尾和块元素一模一样,都要单独占一行,从左至右,前提没有width和height属性,严格遵循流动布局模型块状元素的流动方式,自上至下流动,第二种,大小是恰好能将内容包含,并且右侧浮动,可以多个在一行。
8..
text-indent | text-overflow | vertical-align | text-align |
layout-flow | writing-mode | direction | unicode-bidi |
word-break | line-break | white-space | word-wrap |
text-autospace | text-kashida-space | text-justify | ruby-align |
ruby-position | ruby-overhang | ime-mode | layout-grid |
layout-grid-char | layout-grid-type | layout-grid-line | layout-grid-mode |
9.img是单闭合标签而且是内联元素,同时是内联替换元素,替换元素是可以设置宽和高的,而内联元素是不可以设置宽和高的。
10.
双标签:
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
单标签:
<br><hr><img><input><param><meta><link>
11.相同的元素,如li,在不同的浏览器下,显示的效果稍有不同,是因为各浏览器对各元素的margin,borde,padding,size等略有不同,如果杜绝这种情况,我们通过CSS强制让所有的元素的属性值都一样,这个过程叫做CSS初始化。
12.替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。替换元素是其内容不受CSS视觉格式化模型控制的元素,例如img标签,嵌入的文档(iframe之类)或者applet,这些叫做替换元素。比如img元素通过src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,却看不到图片的实际内容,而且img元素的内容通常会被src属性指定的图像替换掉;例如input元素的type属性决定是显示输入框,还是单选按钮等。(x)html中的img , input , textarea , select ,object都是替换元素。这些元素没有实际的内容,即是个空元素。
13.
1)css允许我们针对a标签的4种状态(link(链接默认的样式)、hover(鼠标移到链接上的样式)、visited(链接被点击后的样式)、active(链接被点击那一瞬间的样式))设置各自的css特性,叫做css伪类;
2)active一般不写;
3)一定注意,顺序是LHVA,不可调换,调换了就没效果了;
4)a:link可以简写为a;
14.用em来表示文字大小,em是相对大小,简单理解就是父元素的font-size就是一个em单位。例如:父元素的font-size=10px,则1em = 1x10px = 10px;1.5em = 1.5x10px = 15px;
15.相对定位于绝对定位; 相对定位是指元素在其当前的位置偏移多少像素;(例如:position:relative;top:5px;相对原来的top位置偏移了5像素);
绝对定位是指相对于父元素的top、left、right、bottom来定位;使用绝对定位是父元素要求有position属性,否则依据父元素的父元素直到body,看那个父元素有position属性,如果都没有则相对于body;不占父元素里面其他元素的位置;如果有多个元素的用绝地定位的时候,谁的z-index越高谁就在最前面。(例如:position:absolute;top:5px;相对与于position属性的父元素的top位置偏移了5像素);