css知识点

【外边距】---外边距合并，则子元素的外边距会设置给父元素

1，可以给父元素设置上边框，可以i解决这个问题

2，可以给父元素设置padding-top 内边距，解决问题

【溢出】---父元素默认将溢出的内容，在父元素外边显示

1，通过overflow可以对溢出的内容进行处理

--overflow:hidden 将溢出的内容进行 裁剪 不会显示

--overflow:scroll 增加滚动条 来查看完整内容 是否溢出都会添加水平垂直滚动条

--overflow:auto 只能增加滚动条 有加显示滚动条 没有则不显示

【文档流】 文档流--》文档流处在网页的最底层，表示一个页面中的位置，元素默认都在文档流中

1，--元素在文档流中的特点

：块元素--》独占一行，自上向下排列，默认宽度是父元素的100%，高度被子元素撑开

（当宽是默认值时，指定内边距不会影响盒子大小）

：内联元素--》　　只占自身的大小，从左往右排列，宽高都由内容撑开

【背图】--背景图片的处理

---background-color: 设置背景颜色

---background--image:url('') 设置背景图片

---background-repeat:no-repeat 设置背景不重复

---background-position:center center 设置背景图位置

---background-attachment:fixed 设置背景图不随滚动条滚动

------------背景图片简写 background-可设置以上所有属性，没有顺序要求--------------------------------------

【表格】--在html中使用table标签来创建表格

---<table>

　　<tr> <th> th是表头的样式，是特殊的td 和td效果一样 </th </tr>

<tr> 在table表格中使用 tr来表示表格中的一行，有几行就写几个tr

　　　　<td></td> 在table表格中使用td来创建一个单元格有几个单元格就有几个td

　　　　<td rowspan='2'></td> 纵向向下合并单元格，下一行相邻的单元格需删除

　　　　<td colspan='2'></td> 横向向右合并单元格，右边的单元格需删除

<tr>

----CSS设置表格的样式

table：{border:’边框可不设置‘;border-collapse:collapse} th,td:{border:设置边框}

--table和td边框之间默认有一个距离，通过border-spacing:0px属性可以设置这个距离

通过border-collapse:collapse可以设置表格的边框合并【一旦设置collapse边框合并，距离自动失效】

tr：nth-child(odd){background-color:设置行颜色}

tr:hover{ background:#red} 移入每行，变色

---有一些情况表格是非常长的，需要分为三部分

--thead 表头 tbody 表体 tfoot 表格底部 对表格进行分组

【表单】：表单的作用是用来将用户的信息提交给服务器

---使用form active='指定提交的地址'标签创建一个表单

---使用input 创建文本框，密码框，name属性是提交的属性，value指定默认值

---（ 单选按钮 ）：使用input 来创建一个单选按钮，它的type属性是radio

---单选按钮通过name属性进行分组，name属性相同则是一组按钮，可互斥

---必须指定一个value 属性这样被选中的单选框的value值 会提交到服务器

---（ 多选框 ）使用iput 来创建多选框input type='checkbox　

---多选框与单选框相同，也是通过name 来进行分组　'，也必须写value值，表示选中的信息提交服务器

---（ 下拉列表 ）使用select 来创建一个下拉列表，下拉的name指定给select ,value指定给option

---<select name='star' > <option value="fbb'> 范彬彬</.option> 《/select>

--《默认选中》单/多选框 可以在希望默认选中的项 中添加 checked="checked";下拉默认selected="selected"

---《下拉分组》在select中使用optgroup 对选项进行分组，同一个optgroup中的选项是一组，可通过label属性规定分组的名字

---《文本域》 使用textarea 创建一个文本域

---<textarea name="内容"> </textarea>

---《重置》 input type='reset' 点击输入框全部清空

---《label》 标签，用来选中表单的提示文字，通过for=“id” input 来绑定一组，点击文字时，输入框也会锁定光标