div知识点

 

div知识点

 

 Div基本的单词和知识点

 

Left（左）   right（右）   center（中间）  image（装图片的文件夹）   color（颜色）   text（文本文档）   body（主体部分）  size（大小） Font（字体）indent(缩进)  decoration 装饰，修饰

 

文本属性：

 color:#f00; 

font-size:14px;    文字大小

font-family:"宋体";   字体类型

font-weight:bolder/bold/normal/600;文字加粗

font-style:normal/italic/oblique;   文字倾斜（了解）

text-align:left/right/center; 文字对齐方式

 line-height:18px-24px; 行高

text-indent:24px/2em; 首行缩进

 letter-spacing:10px;   控制英文字母和汉字的字距（了解）

word-spacing:10px;   控制英文单词字距（了解）

text-decoration:none|overline|underline|line-through

  border（边框）  html（网页的后缀名）   head（头部）   title（标题）  default（ 默认）  width（宽度 ） height（高度） top（顶部）  bottom（底部）  style （样式）display（显示）   none（没有） background（背景） Margin (外边界) padding(填充)

---

盒子的基本属性

Width (宽度)

Height(高度)

Border( 边框)

Background (背景)

Margin(外边距)

Padding(填充)

 

background 五个属性 :

background-color:#f00   背景颜色

background-image:url(../images/bg.jpg) 背景图片、

background-repeat:repeat-x|repeat-y|no-repeat|repeat     背景重复

background-position:left|right|center  top|center|bottom   背景位置（background-position:50px 100px;）

background-attachment:scroll|fixed   背景固定

background:url(../images/bg.jpg) no-repeat  center center;

 

margin,padding的方向

margin-top(上)  margin-right（右）  margin-bottom（底部 下）  margin-left（左）

margin:5px 6px 7px 8px; (上-5px 右-6px 下-7px 左-8px) 

margin:5px 6px 7px;  (上-5px，左右-6px，下-7px)

margin:5px 6px;  (上下-5px，左右-6px)

margin:5px   (上右下左 都是5px)

 

边框设置三个值(重点)

border:5px solid #f00;  四个边 设置 宽度，样式，颜色

border-width:5px; 边框宽度

border-style:solid; 边框样式

border-color:#f00; 边框颜色

border-width:3px 10px 20px 5px; 边框的四个方向的宽度

border-left-color:#00f; 一个边框的颜色

site（站点）  file （文件） news（ 新闻） target（目标） blank（ 空白的） type（类型）Property（ 属性） value（ 值 ）list （列表） font-size （字体大小）

Strong (强壮的)  table（表格) selector (选择器)  select(选择)  line(线)  import(导入)

link(连接)  hover(鼠标滑过)  visited (被访问过的） active(活动状态)

---

超链接的四个状态

a:link (普通状态)

a:visited(被访问过的)

a:hover(鼠标滑过状态)

a:active(鼠标活动状态)

 

float （浮动）  weight （体重）  bold （粗体的）  clear （清除的）  both （两者）  decoration（装饰） Navigation（ 导航）  solid（ 实心）  repeat （重复）

main(主要的)  foot(脚)  wrap(包裹)  auto(自动)  small(小)  large(大)  family(家庭) 

vertical(垂直的)  middle(中部的)  letter(字母)  space(空间)  position(位置)

scroll(滚动)  fixed(固定)  cursor(鼠标)  pointer(指针)  content(内容)   product（产品） copyright(版权)

move(移动)  help(帮助)  wait(等待)  position(定位)   absolute(绝对)  relative(相对)

Circle（圆） square（方块）  outside（外）  inside（内）  dot（点） solid 实心 thick （粗）  medium （中等的）

---

定位postion:

postion:relative; 相对定位

postion:absolute;相对定位

---

radio（单选框） check（检查)  checkbox (复选框)  file (文件)  area (地区)  select (下拉列表框)  option (选择)  submit (提交)  reset (重置)

Form表单

form:  action 动作（连到动态处理页面）    method 方法  （get 小文本  post 大文本）

1. 文本框  <input type="text" name="uname"/>   <input type="password" name="uname"/>

2. 单选框  <input type="radio" name="sex"/>

3. 复选框  <input type="checkbox" name="aihao"/>

4. 文件框  个人图片：<input type="file" name="pic"/>

5. 下拉列表框   

 <select>

<option>小学</option>

<option>中学</option>

<option>高中</option>

</select>

6. 文件域     

 <textarea rows="10" col="50"></textarea>

7.提交按钮     

<input type="submit" value="注册"/> 

<input type="reset" value="重置"/>

 <input type="image" src="reg.jpg"/>

 <input type="button" value="删除"/> 

---

其他属性

Float:left|right|none; 元素浮动方式（左中右）

margin:0 auto; （上下0， 左右auto自动）给盒子居中

Display:block； 将行元素转换成块元素

List-style:none;  去掉项目符号

Clear:both; 清除浮动

Overflow:hidden 隐藏元素

Vertical-align:middle 元素垂直居中

Cursor:pointer; 实现超链接小手