本文主要是介绍1.8 表单、表格和高度塌陷，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

表单、表格和高度塌陷

一、表单

1、关于form的添加

一般只写样式的话，form可加可不加，但是涉及到功能就需要加。

有重置按钮和提交按钮的话，把外层form加上，代表提交或者重织该form集合内兄的表单元素。

2、input里面的属性

• placeholder=“提示文字” 提示信息
• checked=“checked” 默认选中
• disabled=“disabled” 禁止选中

3、内联块元素的垂直对齐方式 vertical-align

• baseline 基线
• bottom 底线
• top 顶线
• middle 中线

4、input边框

• input{border: none; 去掉本身自带的边框
• outline: none; 去掉获取焦点时候的内边框

二、表格css属性

table{
		border-spacing: 0px; 边框之间的距离
		border-collapse: collapse; 边框合并成细线边框
		table-layout: fixed; 表格固定，不会因为内容增多而导致单元格变大
	}

表格标签

表格标题标签：caption

表格列标题标签：th

表格行分组：

• thead 表头 一般把列标题对应的行放进去 只有一组
• tbody 表体 表格主要内容区域 可以有多组
• tfoot 表尾 一般把底部总计或者合计对应的行放进去 只有一组

选择列表中的第一列，让其靠右对齐：

table td:first-child{text-align: right;}

三、宽度自适应

1、宽度自适应

• 宽度不设置,宽度跟随父元素
• 宽度设置百分数,宽度跟随父元素

2、自适应的应用

• 通栏需要自适应
• 板块里面文字对应的标签一般不需要设置宽度

3、最大和最小值

• 最大宽 max-width 宽度可以无限变大，但是不能超过该值
• 最小宽 min-width 宽度可以无限变小，但是不能小于该值

四、高度自适应

1、高度自适应

• 高度不设置，由内容撑开
• 高度设置百分数，跟随父元素
• height：auto 由内容撑开

2、高度自适应使用

• 文字类的板块可以不加高，但由内容撑开就行

3、最大和最小值

• 最大高 max-height 高度可无限撑高，但是不能高于该值
• 最小高 min-height 高度可以无限减小，但是不能低于该值

4、实现全面屏页面

div{height:100%;width:100%;}
html,body{height:100%}

五、高度塌陷（重要）*

1、塌陷条件

• 父元素没有设置高
• 然后子元素浮动

2、解决方法

• 给塌陷的父元素设置 overflow:hidden;
  • 弊端: 会隐藏掉超出父元素之外的元素
• 在浮动元素的后面添加一个块级元素,给该元素设置clear:none(默认)/left(左浮动)/right(右浮动)/both(左右浮动)
  • clear只对块元素生效
  • clear虽然是清除浮动，但实际上清除浮动元素给自己带来的影响
  • 弊端: 造成代码冗余(多余)

3、完美清除法

高度塌陷的元素::after{
				content:"";
				clear:both;
				display:block; clear只对块生效，所以要转一下
				height:0; 如果里面加进来内容要处理的话
				overflow:hidden; 超出高度0的部分隐藏掉
			}

伪元素选择器

• 第一个字符 :first-letter{} ::first-letter{} 只针对块元素

• 第一行 :first-line{} ::first-line{} 只针对块元素

• 给元素的里面的最前面添加 加的是内联元素

  • ::before{
    		content:"";  里面可以写字
    		content:"url(小图路径)" 
    

• 给元素的里面的最后面添加 加的是内联元素

  ::after{
  		content:"";
  		content:"url(小图路径)"
  	}
  

六、引入外部样式表（重要）*

1、link和@import的区别

• 本质的区别 link来说属于html标签,rel属性是关联文件种类多，所以可以引入多种文件类型,@import属于css，只能引入css

• link引入小图标

  • 在在线地址.com或者.cn的后面 favicon.ico ,存到本地

  • <link rel="icon" type="images/x-icon" href="img/favicon.ico"/>
    

2、加载顺序

link引入的css，结构和样式是同时加载，@import引入css,先加载结构，后加载样式

3、浏览器的支持性

link几乎支持所有的浏览器，@import得ie5以上才支持

4、操作DOM(标签)区别

js可以操作link引入的css，不能操作@import引入的css

这篇关于1.8 表单、表格和高度塌陷的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！