一. 盒模型
概念: Css盒模型本质是一个盒子 它包括了外边距 内边距 边框 实际内容
1. 外边距 margin
有4个值: top bottom left right
注意: 外边距塌陷问题
解决:
1). 给父级元素设置边框或内边距
2). 给父元素添加溢出隐藏 overflow : hidden; 属性
2. 内边距 padding
有4个值: top bottom left right
3. 边框 border
属性:
1). border - width 边框宽度
2). border - style 边框样式
值:
Ⅰ. 实线 solid
Ⅱ. 虚线 dashed
Ⅲ. 点线 dotted
Ⅳ. 双线 double
3). border - color 边框颜色
简写方式 : border : 1px solid red;
4. 内容 content
二. Css背景属性
1. 背景颜色 background - color
2. 背景图片 background - image : url (图片路径)
3. 背景平铺 background - repeat
属性值:
Ⅰ.repeat (默认值) 在垂直和水平方向平铺
Ⅱ. repeat - x 水平方向平铺
Ⅲ. repeat - y 垂直方向平铺
Ⅳ. no - repeat 不平铺
4. 背景图片大小 background - size
5. 背景位置 background - position
取值:
Ⅰ. top bottom left right (一个值对应水平方向 一个值对应垂直方向)
Ⅱ. 百分比%
Ⅲ. 像素值 px
三. HTML表单域
1. form 表单标签
表单是一个包含表单元素的区域 用form标签设置
2. 常用表单元素
1). input 标签
input标签是最重要的表单元素
输入类型是由类型属性type定义 根据不同的type属性显示不同的形式
2). text 文本框
3). password 密码框
4). radio 单选框
5). checkbox 复选框
6). button 普通按钮
7). submit 提交按钮
8). reset 重置按钮
9). file 文件上传
10). image 图像形式提交
3. select 下拉列表
和子标签option搭配使用
4. textarea 文本域
使用resize : none; 属性可以防止调节大小
5.常用的表单属性
❶. action 定义提交表单时执行动作 (如省略action 则会被设置为当前页面)
❷. method 定义提交表单方式
有2种方式:
Ⅰ. GET (不安全 数据量小)
Ⅱ. POST (传递数据时 安全 数据量大)
❸. value 输入字段初始值
❹. maxlength 规定输入字段最大长度
四. Css复合选择器
1. 并集选择器 (用逗号分隔)
可以选择多个选择器为一组
2. 交集选择器
由两个以上单一选择器组成
3. 子代选择器 (用 > 号连接)
只选择作为某元素的子元素 ( 也可以看成亲儿子选择器 )
4. 后代选择器 (用空格 连接)
可以选择某元素的所有后代元素 ( 只要是后代 不管是儿子 还是孙子都可以)
5. 伪类链接选择器
语法: 选择器 : 伪类 { 样式; }
属性:
Ⅰ. a:link 未被访问过
Ⅱ. a:visited 已经访问过
Ⅲ. a:hover 鼠标悬停
Ⅳ. a:active 鼠标按下不放
