首页 > 代码库 > html基础

html基础

div布局 css控制
1、区别
    html
    htm
    xhtml
html和htm没什么区别  只是在一起dos系统下 只支持扩展名是3个字符的,随着后来的发展,扩展符字符个数没有限制了 就用html

xhtml比html更严格 简单举例就是XHTML 区分大小写,所有元素必须关闭,属性值用双引号,id属性代替name属性
2、三部分 doctype  head  body
doctype 三种 struct 严格类型,通用类型和 框架类型
head 存放的信息供机械 搜索使用
body 供人类观看
3、css引入方式
1)行内式  在标记的style属性中设定css样式 不推荐
2)嵌入式  将css样式集中写在head标签内的style中
3)导入式  在一个css文件中引入其他的css文件  @import url(css文件名.css)
4) 链接式  将样式写在。css的文件中 然后用link导入

    

4、将2个div并排显示
    用float 浮动起来 ,缺点是会下面的普通div被浮动的div所覆盖 所以要用clear 声明某div上不许有浮动的div
5、田字格布局
6、清楚覆盖
    clear: left/right/both
7、子div能否将父div 撑起来(子div是浮动 若父div的 height 或者width 没有设定 ,则不会自动适应)
    解决方法:1) 在子div后加一个空的<div id="clear">  #clear{ clear:both }
        2) 在父div 属性里面加上 overflow:hidden
        3) 给父div设置 高 或宽
8、margin top right button left  没有设定的取对边的值
9、border三要素  颜色 线型 宽度
10、padding 内边距  A4纸的内部  其颜色就是 background的颜色 他会延伸 所以要注意原来 div与父div之间像素是否正好相容
11、class 定义的div有很多相似的地方  可以重复使用
12、div所占空间大小 为 div的宽度+2*padding+2*margin+2*border
13、利用margin实现div的居中  auto   、
   margin重叠现象  普通元素相邻  上下边距并非简单相加(如果出现左右边距 就是float了 就不是普通的div了) 而是取其中较大的边距值
           父div与子div之间也会有 margin重叠现象,(但不是padding和margin)




14、行内元素(内联元素) span 其对竖直方向的margin 和padding 都是无效的 原因是 行内元素再怎么设置也不会
    跳出行高的设置
15、内联(inline)与块状(block)的转化  完成width 和height 的有效无效等
    display inline;
    display block;
    display none;隐藏所有信息(位置没有空白 占据)
16、css控制段落:
    text-align:left|right|center
    text-indent:20px;首行缩进
    text-decoration:underline| overline| linethrough|
    letter-sapcing: 2px;
    
17、#test{
    font-style:
    font-weight:
    font-size:
    line-height:
    font-family:"微软雅不黑","微软雅黑","黑体",sans-serif;

    也可以使用    font:italic bold 23px/46px "SimHei";
}
18、    background-color:
    background-image:url();
    background-repeat:repeat-x|repeat-y|no-repeat;
    background-position:
    
    background:color image repeat attachment position
19、选择器  id选择器 class选择器 标签选择器 派生选择器


html基础