css高级

css

1. 表格相对于页面居中：使用margin:auto 设置

2. 表格边线合并：border-collapse:collapse

3. 文档流：按照标签的顺序来显示文档的一种格式

4. 定位：用于打破文档流显示顺序的一种方式。定位可以让标签漂浮起来，可以覆盖于其他标签之上，可以放在任意位置 ，不受文档限制。

   定位的样式属性：我们可以使用css的position属性来设置元素的定位类型postion的设置项如下:

   ●relative 生成相对定位元素:一般是将父级设置相对定位子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位，

   ●absolute生成绝对定位元素,元素脱高文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位I如果找不到I则相对于body元素进行定位,

   ●fixed生成固定定位元素元素脱离文档流不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位，不受父级定位的约束。

   定位元素的偏移

   定位的元素还需要用left、right.top或者bottom来设置相对于参 照元素的偏移值，

   定位元素层级

   定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

5. CSS权重

   CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式，

   权重的等级

   可以把样式的应用方式分为几个等级,按照等级来计算权重
   1、内联样式如: style=" ,权重直为1000
   2、ID选择器,如; #content权重值为100
   3、类，伪类，如: .content .hover权重值为10
   4、标签选择器如:div、p权重值为1

6. Photoshop辅助测量与取色

   图片预览的方法
   1、图片放缩
   2、图片平移

   尺寸测量方法
   1、设置单位
   2、矩形框测量、调整矩形框
   3、文字大小的测量

   取色方法
   1、取色工具
   2、前景色按钮

   css颜色表示法
   css颜色值主要有三种表示方法：
   1、颜色名表示，比如:red红色，gold金色
   2、16进制数值表示,比如; #f0000表示红色这种可以简写成#f00

7. CSS显示特性

   display属性是用来设置元素的类型及隐藏的,常用的属性有:
   1、none元素隐藏且不占位置
   2、inline元素以行内元素显示
   3、block元素以块元素显示

8. 列表标签

   列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单,它是含有语义的标签结构如下:

    <ul>
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</i>
    </ul>
   

   列表的内容一般是可以链接的,点击链接到新闻或者文章的具体内容,所以具体结构一般是这样的:

    <ul>
    <li><a href="#” >列表标题一</a></1i>
    <li><a href="#" >列表标题二</a></1i> 
    <li><a href="#" >列表标题三</a></i>
    </ul>
   

   列表相关样式：list-style去掉列表顶的小圆点，比如: lststyte:none

9. CSS盒子模型

   盒子模型解释
   元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。盒子模型示意图如下:

   

   把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width).盒子的高度(height) .盒子的边框(border) ,盒子内的内容和边框之间的间距padding) .盒子与盒子之间的间距(margin)。

   ●设置宽高

    width:200px; /* 设置盒子的宽度,此宽度是拖盒子內容的宽度，不是盒子整体宽度(难点) */
    height:208px; /* 设置盒子的高度，此高度是指盒子內容的高度,不是盒子整体高度(难点) */
   

   ●设置边框
   设置一边的边框,比如顶部边框，可以按如下设置:

    borden-top:18px solid red;
   

   其中10px表示线框的粗细; slld表示线性。
   设置其它三个边的方法和上面一样I把上面的1op换成1ef就是设置左边,换威right就是设置右边，换成ottom，就是设置底边。

   ●四个边如果设置一样,可以将四个边的设置合并成一句:

    border:10px solid red;
   

   设置内间距padding

   ●设置盒子四边的内间距可设置如下:

    padding-op:20px; /* 设置顶部内间距20p*/
    padding-left:30px; /* 役置左边内间距30px */
    padding-right:40px; /* 没置右边内间距40px*/
    pading-bottom:50px; /*没置底部内间距50px */
   

   ●上面的设置可以筒写如下:

    padding: 20px 40px 50px 30px; /* 四个值按照顺时真方向,分別设置的是上右下左四个方向的内边距值· */
   

   ●padding后面还可以跟3个值，2个值和1个值,它们分別设置的项目如下:

    padding : 20px 40px 50px; /*设置内部边距为20px ;左右内边距为40px ,底部内治距力50px */
    padding: 20px 40px; /*置上下内边距为20pX '左右内边距为40px*/
    padding ; 20px; /* 设置四边内边距为20p*/
   

   ●设置外间距margjin
   　　外边距的设置方法和padding的设置方法相同,将上面设置项中的paddin换成margin就是外边距设置方法。

   ●盒子的真实尺寸
   　　盒子的width和height值固定时，如果盒子增加border和padding ,盒子整体的尺寸会变大，所以盒子的真实尺寸为:

   ◆盒子宽度= width + padding左右 + border左右
   　◆盒子高度= height + padding上下 + border上下

   ●块元素居中技巧

   块元素如果想设置相对页面水平居中可以使用margin值中的auto关键字, “auto” 只能用于左右的margin设置，不能用于上下的:

   表单常用样式、属性及示例

   outine设置input框获得焦点时,是否显示凸显的框线，一般设置为没有比如: outline:none;placeholder设置input输入框的默认提示文字。

html表单

1. 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

   1、<form>标签定义整体的表单区域
   　　●action属性定义表单数据提交地址
   　　●method属性定义表单提交的方式,一般有get方式和p方式
   2、<labe>标签为表单元素定义文字标注
   3、<input>标签定义通用的表单元素

   ●type属性
   　◆type=“text” 定义单行文本输入框
   　◆type=“password"定义密码输入框
   　◆type=“radio” 定义单选框
   　◆type=“checkbox” 定义复选框
   　◆type=file’ 定义上传文件
   　◆tye=“sbmit” 定义提交按钮
   　◆type='reset” 定义重置按钮

   ●type="utton"定义一个普通按钮
   ●value属性定义表单元素的值
   name属性定义表单元素的名称，此名称是提交数据时的键名

   4、<textarea>标签定义多行文本输入框
   5、<select>标签定义下拉表单元素
   6、<coption>标签与<select>标签配合,义下拉表单元素中的选项

2. 表格元素及相关样式
   　1、<table>标签:声明一个表格
   　2、<tr>标签:定义表格中的一行(换行)
   　3、<td>和<th>标签:定义一行中的一个単元格, td代表普通単元格，th表示表尖単元格

3. 表格相关样式属性
   border-collapse 没置表格的边线合并，如:borer-collapse:collapse

4. 定位
   1、文档流
   　　文档流，是指盒子按照htm1标签编写的顺序依实从上到下，从左到右排列，块元素占一行，行內元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。

   2、关于定位
   　我们可以使用css的position属性来设置元素的定位类型:postion的设置项如下:
   　●relative 生成相对定位元素:一般是将父级设置相对定位I子级设置绝对定位,子级就以父级作为参照来定位，否则子级相对于body来定位，
   　●absolute生成绝对定位元素,元素脱离高文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
   　●fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。

   3、定位元素的偏移
   　　定位的元素还需要用Iet、right. top或者bottom来设置相对于参 照元素的偏移值，

   4、定位元素层级
   　　

   定位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级