前端html和css总结

2023-03-04 17:07:56 浏览数 (1)

本文最后更新于 128 天前,其中的信息可能已经有所发展或是发生改变。

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; 溢出隐藏
css

0 人点赞