表格表单布局

HTML 基本概念 常用标签： 块级元素：p 、h1-h6 、div 行级元素 : a、span、em/i 、strong/b等 行块级元素：img 列表标签 无序列表 有序列表 自定义列表 表格 table、caption、tr、th/td等 复杂表格：thead、tbody、tfoot 加在table标签身上的属性： width、height、border、cellpadding、cellspacing 单元格属性： rowspan、colspan css属性： 边框是否独立 表单 表单的作用 表单域 form 表单元素： input 、button、下拉列表、多行文本域 表单相关属性 CSS 基本概念和用法 文本属性：文字的水平对齐方式、首行缩进、文本装饰线 文字属性：文字的大小、文字的加粗、文字风格、字体设置、行高 盒模型： 盒模型是什么 盒模型的相关属性 标签的转化 三大特性：层叠性、继承性、css优先级 外边距塌陷问题：父子元素、兄弟元素 浮动 定位   css布局技巧 一、浮动与定位的对比 脱离正常文档流的属性：浮动：左浮动和右浮动 定位：固定定位和绝对定位 不同的地方： 浮动会脱离正常文档流，但是不脱离文本流 定位既脱离正常文档流，也脱离文本流 注意： 设置了定位和浮动的元素不再区分块级元素、行级元素，都可以设置宽高和所有盒模型属性 所有元素都可以设置浮动和定位 二、verticial-align属性 设置垂直对齐方式，用在行级元素或者行块级元素身上，对于块级元素不生效 常用属性值： baseline 基线对齐（默认值） top 顶端对齐 bottom 底端对齐 middle 居中对齐 sub 下标对齐 super 上标对齐    

      x2  

      o2  解决的问题 1、图片的下间隙问题 盒子中装有一张图片时，图片与盒子之间有小间隙 解决方案： （1）给图片设置vertical-align属性，值为middle、bottom、top都可以解决这个问题 （2）给img转块 （3）给图片的父盒设置font-size:0  

            x2  

              o2  

.box1 {   border: 1px solid red;   margin-bottom: 20px; } img {   width: 100px;   height: 100px;   /* vertical-align: top; */   /* vertical-align: bottom; */   vertical-align: middle; } img {   width: 100px;   height: 100px;   display: block; } .box1 {   border: 1px solid red;   margin-bottom: 20px;   font-size: 0; } img {   width: 100px;   height: 100px; }2、文本框与按钮的对齐 文本框与按钮不对齐的问题 解决方案： （1）给input添加vertical-align:middle （2）给input浮动   ieTester 官网：http://www.ietester.cn/ 三、透明度属性及兼容 1、rgba() 颜色模式 alpha参数取值0-1，0代表透明，1代表不透明，0-1代表的是半透明 用于背景颜色、color、border-color时使用 兼容：ie9+及标准浏览器是支持的，ie6，7，8不支持 2、opacity属性 x的取值是在0-1之间，0代表透明，1代表不透明，0-1代表的是半透明 设置opacity的元素，不仅自己会有透明度的效果（整体透明），连子孙后代也会有透明度的效果 兼容：ie9+及标准浏览器是支持的，ie6，7，8不支持 用途：设置整个模块的透明度 3、IE专属滤镜 .for1 input {   height: 20px;   border: 1px solid red;   vertical-align: middle; } /* 属性选择器 element[属性=属性值]{} */ .for1 input[type="submit"] {   height: 24px; } .for2 input {   height: 20px;   border: 1px solid red;   float: left; } /* 属性选择器 element[属性=属性值]{} */ .for2 input[type="submit"] {   height: 24px; } opacity：xx的取值是0-100之间 兼容：ie6,7,8,9下支持，ie10被废除 ie浏览器专属的属性，使用时需要注意： ie6、7中，如果设置filter不识别，需要加上以下代码： 如果想要实现元素的背景透明，子元素没有透明的效果时，需要给父元素添加静态定位 （position:static）,给子元素添加相对定位（position:relative）; 四、显示与隐藏 1、display属性 display:block 元素的显示 display:none 元素隐藏（原来的占位也不存在了） 2、visibility属性 visibility：visible 元素显示 visibility：hidden 元素隐藏（占位依然存在） 3、opacity属性 opacity:1 元素的显示 opacity:0 元素的隐藏（元素透明）   五、圆角属性 border-radius属性 ，可以是长度值，也可以是百分比 单边圆角的设置： border-top-left-radius 设置左上角的圆角 filter: Alpha(opacity=x); *zoom:1; .box3 {   width: 300px;   height: 200px;   background-color: red;   opacity: 0.5;   filter: Alpha(opacity=50);   position: static; } .box3>p {   position: relative; } .box1 {   /* 设置左上角的圆角 */圆角的复合写法： 六、多栏布局 宽度自适应布局 1、两栏自适应布局 左侧宽度固定，右侧宽度自适应为例： 实现原理： 需要有左右两个盒子，左侧盒子需要设置固定的宽度，右侧盒子设置width:100%; 左侧盒子设置绝对定位（position:absolute） 给右侧的盒子添加一个子盒，给子盒设置padding-left: 左侧盒子的宽度   border-top-left-radius: 50px;   /* 设置右上角的圆角 */   border-top-right-radius: 50px;   /* 右下角的圆角 */   border-bottom-right-radius:50px;   /* 左下角的圆角 */   border-bottom-left-radius: 50px; } .box2 {   /* 设置左上角的圆角 */     border-top-left-radius: 100%;   /* 设置右上角的圆角 */   border-top-right-radius: 100%; } .box3 {   /* 一个值 : 四个角的圆角都是50像素*/   /* border-radius: 50px; */   /* 两个值：左上角和右下角的圆角是100像素，左下角和右上角的圆角是50像素 */   /* border-radius: 100px 50px; */   /* 三个值：左上角的圆角是100像素，左下角和右上角的圆角是50像素，右下角的圆角是10像素 */   /* border-radius: 100px 50px 10px; */   /* 四个值：左上角的圆角是100像素，右上角的圆角是60像素，右下角的圆角是40像素，左下角的圆 角是10像素 */   border-radius: 100px 60px 40px 10px; }

   

左侧盒子

           

right

   

中间盒子

左侧盒子

右侧盒子

           

中间盒子

       

左侧盒子

   

右侧盒子