CSS学习总结2

盒子模型相关属性

边框属性

1.边框样式(border-style)
语法格式：border-style:上边[右边 下边 左边];
属性值:solid:边框为单实线
dashed:边框为虚线
dotted:边框为点现
double:边框为双实线
2.边框宽度(border-width)
语法格式：border-width:上边[右边 下边 左边];
3.边框颜色(border-color)
语法格式：border-color:上边[右边 下边 左边];
属性：boder-top-colors （right，bottom，left）
4.综合设置边框
语法格式：border：宽度 样式 颜色
5.圆角边框(border-radius)
语法格式：border-radius:参数1/参数2
参数1：圆角的水平半径，参数2：圆角的垂直半径

边距属性

1.内边距padding
指的是元素内容与边框之间的距离，设置方法：
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding:上内边距[右内边距 下内边距 左内边距]，一个值四边，两个值为上下/左右，三个值上/左右/下
2.外边距margin
指的是元素边框与相邻元素的距离，与padding相似

背景属性

1.设置背景颜色(background-color)
2.设置背景图像(background-image)

浮动与定位

元素的浮动

1.元素的浮动属性float
语法格式:选择器{float:属性值} 常用属性值：
left,元素向左浮动；right:元素向右浮动；none，元素不浮动
2.清除浮动
语法格式:选择器{clear:属性值} 常用属性值:
left: 不允许左侧有浮动；right:不允许右侧有浮动;both:同时清除左右两侧浮动的影响

overflow属性

语法格式:选择器{overflow:属性值} 常用属性值:
visible:内容不会被修剪，会呈现在元素框之外
hidden:溢出内容会被修剪，并且被修剪的内容是不可见的
auto:在需要时产生滚动条，即自适应所要显示的内容
scroll:溢出内容会被修剪，且浏览器会始终显示滚动条

元素的定位

1.元素的定位属性
语法格式:选择器{position:属性值} 常用属性值:
(1)static:静态定位；默认定位方式
(2)relative：相对定位，相对于其原文档流的位置进行定位
(3)absolute：决定定位，相对于其上一个已经定位的父元素进行定位
(4)fixed：固定定位，相对于浏览器窗口进行定位

元素的类型与转换

元素的类型

1.块元素
常见块元素有:

~

,

,

,

,
,
1. 
   2.行内元素
   常见行内元素有:,,,,,,,,,

   元素的转换

   display常用属性值：
   (1)inline:此元素显示为行内元素
   (2)block:此元素显示为块元素
   (3)inline-block:此元素显示为行内块元素
   (4)none:此元素会被隐藏

   表单的应用

   表单语法格式:

   <form action="url地址" method="提交方式" name="表单名称">
   各种表单控件
   </form>
   

   表单属性

   1.action属性：用于指定接收并处理表单数据的服务程序的url地址
   2.method属性:用于设置表单数据的提交方式，取值为het或post
   3.name属性:用于指定表单名称
   4.actocomplete属性:用于指定表单是否有自动完成功能，取值on或off
   5.novalidate属性:用于指定在提交表单时取消对表单进行有效的检查

   input元素及属性

   1.input元素的type属性
   (1)单行文本输入框
   (2)密码输入框
   (3)单选按钮
   (4)复选框
   (5)普通按钮
   (6)提交按钮
   (7)重置按钮
   (8)图像形式的提交按钮
   (9)隐藏域
   (10)文件域
   (11)email类型
   (12)url类型
   (13)tel类型
   (14)search类型
   (15)color类型
   (16)number类型
   (17)range类型
   2.input元素的其他属性
   (1)autofocus属性，用于指定页面加载后是否自动获取焦点
   (2)form属性，
   (3)list属性，用于指定输入框所绑定的detailist元素
   (4)multiple属性
   (5)min,max,step属性
   (6)pattern属性
   (7)placeholder属性

   其他表单元素

   1.textarea元素，用于输入多行文本
   2.select元素，用于生成下拉菜单，option嵌套在其中
   3.detalist元素，用于定义输入框的选项列表
   4.keygen元素，用于表单的密钥生成器

   CSS高级应用

   过渡transition

   1.transition-property属性，用于指定应用过渡效果的CSS属性的名称
   语法格式:transition-property:none|all|property
   2.transition-duration属性，用于定义过渡效果花费的时间
   语法格式:transition-duration:time
   3.transition-timing-function属性，规定过渡效果的速度曲线
   4.transition-delay属性，规定过渡效果何时开始
   语法格式:transition-delay:time

   变形transform

   1.平移，使用translate()方法能够重新定义元素的坐标，实现平移的效果
   语法格式:transform:translate(x-value,y-value);
   2.缩放，scale()方法
   语法格式：transform:scale(x-axis,y-axis)
   3.倾斜,skew()方法
   语法格式：transform:skew(x-angle,y-angle)
   4.旋转:rotate()方法，负值为逆时针旋转
   语法格式:transform:rotate(angle)

   动画

   1.@keyframes,用于创建动画
   语法格式：@keyframes animationname{
   keyframes-selector{css-styles;}}
   2.animation-name属性，用于定义要应用的动画名称
   3.animation-duration属性，用于定义整个动画效果完成所需要的时间
   4.animation-timing-function属性，用于规定动画的速度曲线
   5.animation-delay属性，用于定义执行动画效果之前的延迟时间
   6.animation-iteration-count属性，用于定义动画的播放次数
   7.animation-direction属性,用于定义当前动画播放的方向