table边框

最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐; 2.用两个table模拟,第一个作为thead,第二个作为tbody; 需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框会错开一点点; 3.今天在<前端乱炖>上找到的一个好方法,很好用,利用transform动态设置thead的scrollTop属性 模拟出来的固定表头,相对前两个方法简单很多,效果也很不错; 下面是原文链接: http://www.html-js.com/article/cssyanjiu-css3shixiangudingbiaogetoubuerwuxushezhidanyuangetddikuandu%204019 2017-0524 有朋友发现了第三种方法的一个bug 没有边框是是没有任何问题的 如果th,td有边框的话 在滚动之后,th的边框会消失 经测试,发现原因为在transform时,th中的边框并没有移动,只有文字内容和背景色移动了, 而且再移动回初始位置时(即表格顶部), 背景色会盖在边框上面,导致看不到th的边框了 暂时只想到了一种勉强的替代方法,

一、属性 1、字体 font 1）font: font-style; font-variant; font-weight; font-size; font-height; font-family. 2) color: 指定颜色，写法： 十六进制值（或者简写）； rgb（）函数； css承认的颜色名。 3）font-family: 在后面直接输入名字，如果有英文，尽量用引号引起来。 4）font-face(导入外部字体) @font-face{ font-family src:url("url"); } 必须记住导入外部字体后，要进行引用。 5）font-size: A、absolute-size 绝对大小： xx-small; x-small; small; medium; large; x-large; xx-large. B、 relative-size 相对大小： larger; smaller. C、length 长度： 常以px为选项。 D、百分比： 其百分比取值是基于父对象中字体的尺寸。 6）font-style (字体的样式)： normal(正常); italic和oblique（斜体）. 7）font-weight(字重): normal(正常=400); bold(加粗=700); bolder(特粗，只在IE5中可行); lighter(细体，

1、什么是CSS盒模型？CSS盒子模型包括元素、内边距、边框、外边距，如下图： 　　　　 2、元素分类：元素可以分为块状元素、内联元素、内联块状元素。 　　　　常用块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 　　　　常用内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 　　　　常用内联块状元素：<img>、<input> 　　　　（1）块状元素（也叫块级元素）特点 每个块级元素都从新的一行开始，并且其后的元素也另起一行。 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 　　　　 注：可以使用 display: block ，将元素转为块状元素，使之具备块状元素的特点。 　　　　 　　　　（2）内联元素（也叫行内元素）特点 和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变。 　　　　 注：可以使用 display: inline ，将元素转为内联元素，使之具备内联元素的特点。 　　　 　（3）内联块状元素特点

目录 元素分类 元素分类--块级元素 元素分类--内联元素 元素分类--内联块状元素 盒模型--边框（一） 盒模型--边框（二） 盒模型--宽度和高度 盒模型--填充 盒模型--边界 元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素 、 内联元素(又叫行内元素) 和 内联块状元素 。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的 内联块状元素 有： <img>、<input> 元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将 内联元素a 转换为 块状元素 ，从而使a元素具有 块状元素 特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度

元素分类 在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素 、 内联元素(又叫行内元素) 和 内联块状元素 。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的 内联块状元素 有： <img>、<input> 元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将 内联元素a 转换为 块状元素 ，从而使a元素具有 块状元素 特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 元素分类--内联元素 在html中，<span>、<a>、<label>、<input>、 <strong> 和

1.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 2.元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。 如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： a、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道， 一个块级元素独占一行 ） b、 元素的高度、宽度、行高以及顶和底边距都可设置。 c、 元素宽度在不设置的情况下，是它本身父容器的100% （和父元素的宽度一致），除非设定一个宽度。 3.元素分类--内联元素 在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）

<table>标签 表格由<table>标签来定义，每个表格均有若干行(由<tr>标签定义)，每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据，即数据单元的内容。数据单元可以包含文本、图片、段落、表单、水平线、表格等等 表格和边框属性 如果不定义边框，表格就不显示边框。边框由<table border="1">决定，数字不同，边框的粗细不同。 表格的表头 表头由<th>标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。 表格中的空单元格 在一些浏览器中，没有内容的表格单元显示的不太好，如果某个单元格是空的（没有内容），浏览器就无法显示这个单元格的边框。为了避免这个情况，在空单元格中添加一个空格占位符，就可以把边框显示出来。no-breaking空格 横跨两列的单元格 横跨两列的单元格： 姓名 电话 Bill Gates 555 55 854 555 55 854 横跨两行的单元格： 姓名 Bill 电话 555 55 555 555 55 555 cellpadding设置单元格边距：cellpadding="20" cellspacing增加单元格的间距：cellspacing=“10” 给表格添加背景颜色：<table border="1" bgcolor="red"> 给表格添加背景图像：background="" 也可以单个单元格添加背景颜色和背景图像

一、CSS语法 CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。 1 ''' 2 selector { 3 property: value; 4 property: value; 5 ... property: value 6 } 7 ''' 例如： 1 h1 {color:red; font-size:14px;} 二、CSS的四种引入方式 1、行内式 行内式是在标记的style属性中设定CSS样式，这种方式没有体现CSS的优势，不推荐使用。 1 < p style ="background-color: rebeccapurple" > hello yuan </ p > 2、嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式 将一个.css文件引入到HTML文件中。 < link href ="mystyle.css" rel ="stylesheet" type ="text/css" /> 4、 导入式 将一个独立的.css文件引入HTML文件中

CSS 属性 CSS 属性组： 动画 背景 边框和轮廓 盒（框） 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 CSS3 动画属性（Animation） 属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function 规定动画的速度曲线。 3 animation-delay 规定动画何时开始。 3 animation-iteration-count 规定动画被播放的次数。 3 animation-direction 规定动画是否在下一周期逆向地播放。 3 animation-play-state 规定动画是否正在运行或暂停。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 CSS 背景属性（Background） 属性 描述 CSS background 在一个声明中设置所有的背景属性。 1

极客CSS笔记 基础语法: selector选择器{ property属性:value值 } 例： h1{ color:red; font-size:18px } 　　 高级语法： 选择器分组： h1, h2, h3, h4, h5, h6 { color : red; } 继承： 在最外层的元素添加样式，若里层元素没有样式，则套用该样式 body{ color:green; } CSS选择器： 派生选择器: 通过依据元素在其位置的上下文关系来定义样式。 例：li strong{}，中间用空格隔开 id选择器 ：以#号来定义，常用方式是id选择器常常用于建立派生选择器。 例：#pid a{} 类选择器 ：以 . 点号来表示，也可以用作派生选择器 属性选择器 ：对带有指定属性的HTML元素设置样式，属性和值选择器。 例：[title]{} 或 [title=t]{} 子元素选择器： element > element。例 <div> > <p> ，选择父元素为div的所有p元素 兄弟选择器： element + element。例 <div> + <p> ，选择紧接着div元素之后的所有p元素 CSS样式： CSS背景 属性 描述 background－attachment 背景图像是否固定或者随着页面的其余部分滚动 background－color 设置元素的背景颜色