首页 > web前端 > css教程 > 正文

学习web前端常用知识点的详细介绍

高洛峰
发布: 2017-03-22 15:19:26
原创
1505 人浏览过

1、常见的块级元素  内联元素

p -最常用的块级元素

     dl - 和dt-dd 搭配使用的块级元素

     form - 交互表单

     h1 -h6- 大标题

     hr - 水平分隔线

     ol – 有序列表

     p - 段落

     ul - 无序列表

     fieldset - 表单字段集

     colgroup-col - 表单列分组元素

     table-tr-td  表格及行-单元格

     pre - 格式化文本

 a –超链接(锚点)

     br - 换行

     i - 斜体

     em - 强调

     img - 图片

     input - 输入框

     label - 表单标签

     span - 常用内联容器,定义文本内区块

     strong - 粗体强调

     sub - 下标

     sup - 上标

     textarea - 多行文本输入框

     u - 下划线

     select - 项目选择

2、实现文本三个点的几个条件

text-overflow属性仅是:当文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:

1、容器宽度:width:value;(px、%,都可以)

2、强制文本在一行内显示:white-space:nowrap;

3、溢出内容为隐藏:overflow:hidden;

4、溢出文本显示省略号:text-overflow:ellipsis;

注:必须是单行文本才能设置本文溢出!!!

IE6+;chrome1.0+;safari3.1+(firefox,opera暂不支持)

3、垂直居中的几个条件

设置一个元素在一个容器中垂直居中,必须更改默认的display属性值为inline-block;

并加上同级元素(标尺)(同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;) 。

三个条件:

1:必须给容器(父元素)加上text-align:center;

2:必须给当前元素转成行内块元素(display:inline-block;)再给当前元素加上vertical-align:middle;

3:在当前元素的后面(没有回车)加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block

4、置换元素与非置换元素

置换元素与非置换元素

a) 置换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。 例如:浏览器会根据标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;标签的type属性来决定是显示输入框,还是单选按钮等。 (x)html中的