表单、表格和高度塌陷
一、表单
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