前端html和css总结

1、html知识总结

1.1 表格的的相关属性

属性	表示
border-collapse	设置表格的边框是否被合并为一个单一的边框
cellpadding	单元格边距
cellspacing	单元格间距
valign: top	顶对齐 单元格内容垂直方向的对齐方式
valign: middle	居中对齐
valign: bottom	底部对齐
colspan	单元格可横跨的列数
rowspan	单元格可竖跨的行数

1.2 表单常用属性

属性	表示
name	对提交到服务器后的表单数据进行标识
checked	在页面加载时被预先选定的input元素
selected	规定在页面加载时预先选定该选项
readonly	只读元素
disabled	禁用元素
size	下拉列表中可见选项的数目

1.3 选择器的优先级

行内选择器 > id选择器 > 父代选择器 > class选择器 > 标签选择器 > *{}通配符选择器

1.4 有关间距的css属性

• margin/padding:
  一个值：上下左右
  两个值：上下，左右
  三个值：上，左右，下
  四个值：上，右，下，左

1.5 有关边框的css属性

• border-color:
  一个值：上下左右
  两个值：上下，左右
  三个值：上，左右，下
  四个值：上，右，下，左

1.6 取边框的圆角

• border-radius: 20px;
  一个值情况下。四边都为20px;
  border-radius: 50px 10px;
  2个值得情况下:
  border-radius: (左上角 右下角)(右上角 左下角)
  3个值情况:
  border-radius: 50px 10px 20px;
  border-radius:(左上角) (右上角 左下角) (右下角)
  四个值得情况:
  border-radius: 80px 30px 15px 5px;
  border-radius:(左上) (右上) (右下) (左下)

1.7 有关浮动

属性	表示
float: left	左浮动 正常从左到右
float: right	右浮动 逆序 从右到左
float: none	不浮动(默认)

• 特点：
  内容不覆盖，上一个元素做了浮动，下一个元素没有做浮动，下一个元素会自动顶上去。浮动不占位。
• 清除浮动
  1、在哪个位置浮动,就在下方新建一个div
  clear: both; 清楚浮动

  不会去影响整体布局结构。
  2、父元素下的子元素浮动,会导致父元素塌陷 height=0 默认的div高度是根据内容来自动撑开
  解决方案:
  1:在父元素设置高度 弊端:不够灵活。
  2:在浮动的后面，添加一个div，清除浮动。 弊端:代码不够美观,可能会出现嵌套。
  3:在父元素上添加一个元素 overflow: hidden; 溢出隐藏