一 表单元素及其属性
在HTML中,表单元素有:text 、password 、 textarea 、 checkbox、 radio、 file、 select 、button 、 submit 、reset,
分别为:文本框、密码、文本域、选择框、选择圆、文件、多选项、按钮、提交、重置。
而在HTML5中,表单如下表示:email、url、date、week、month、time、number、color、range、search,
分别为:邮件、网址、日期、周、月、时间、数字、颜色、滑动条,搜索框。执行结果如下所示:
H5的表单属性:
- required --------- 必填项
- autocomplete --------- 自动记忆
- plactholder --------- 提示信息
- pattern --------- 正则表达式
- autofocus --------- 自动聚焦
二 各种选择器
(1)关系选择器
- e f--------- 包含选择器
- e>f----------父子选择器
- e+f --------- 相邻选择器 :e元素后所有的f元素
- e~f --------- 兄弟选择器 :e后面所有的兄弟元素f
(2)伪类选择器
- :link--------- 访问前
- :hover--------- 鼠标悬停时
- :active --------- 点击激活状态
- :visited --------- 访问后
- :focus --------- 获取焦点时
(3)UI元素状态伪类选择器
- e:checked --------- 选中状态 (只针对单选按钮和复选框)
- e:enabled --------- 可编辑状态 (默认状态)
- e:disabled --------- 禁用状态
(4)属性选择器
e[attr]--------e[attr="value"]
- e[attr!="value"] 包含空格及value的e元素
- e[attr|="value"] 以value开头且有分隔符-的e元素
- e[attr^="value"] 以value开头的e
- e[attr$="value"] 以value结尾的e
- 有[attr*="value"] attr中包含value的e标签
(5)伪对象选择器
- e:first-letter --------- 第一个字符
- e:first-line --------- 第一行
- e:before --------- 前
- e:after --------- 后
- e::selection --------- 选中状态时触发的效果
(6)结构伪类选择器
- :root --------- 根选择器
- e:first-child--------- 第一个子元素e
- e:last-child --------- 最后一个子元素e
- e:only-child --------- 唯一的一个子元素e
- e:nth-child(n) --------- 第n个子元素e n=odd even 数字 公式
- e:nth-last-child(n) --------- 倒数第n个子元素e
- e:first-of-type--------- 第一个同类型元素
- e:last-of-type --------- 最后一个同类型元素
- e:only-of-type--------- 唯一同类型元素
- e:nth-of-type(n)--------- 第n个同类型元素e n=odd even 数字 公式
- e:nth-last-of-type(n)--------- 倒数第n个同类型元素e
- e:empty --------- 空元素
三 盒子标签及其属性
(1)box-shadow --------- 盒子阴影
#boxshadow{
width: 400px;
height: 300px;
padding: 10px;
box-shadow:1px 2px 15px rgba(0,0,0,.5);
background: #0dcd0c;
position: relative;
}
box-shadow --------- 水平位置 垂直位置 模糊距离 阴影大小 阴影颜色 [内置或外置]。
(2)背景
- background-origin:border-box,padding-box,content-box---------圆心位置
- background-clip:border-box,padding-box,content-box
- background:linear-gradient(方向,颜色,……)---------线性渐变
- background:repeating-linear-gradient(方向,颜色……) ---------重复线性渐变
- background:repeating-linear-gradient(方向,颜色……) ---------重复线性渐变
- background:repeating-radial-gradient() ---------重复径向渐变
- 大小:
closest-side ---------最近的边
farthest-side ---------最远的边
closest-corner --------- 最近的角
farthest-corner --------- 最远的角
- 形状:
circle 或 ellipse(默认椭圆)
(3)文本的列
- column-count:分列数
- column-gap:栏间距
- column-rule:分隔线
(4)弹性盒子
- 父元素中添加
display:flex;
display:-webkit-flex;
- 添加方向
祖先元素添加:direction:ltr/rtl ----------排列方向:从左到右/从右到左
父元素:flex-direction:row/row-reverse/column/column-reverse ----------按行分/按列分
- 子元素排列方式 :(父元素添加)
justify-content:flex-start/flex-end/center/space-between/space-around
- 子元素垂直对齐方式(父元素中添加)
align-items:flex-start/flex-end/center/baseline/stretch----------顶端/底端/居中/基线/默认auto
- 子元素换行方式(父元素添加)
flex-wrap:nowarp/wrap/wrap-reverse/initial/inherit----------单行(不换行,会溢出)/多行,自动换行/换行,反转排列/初始化默认效果相似/默认(不换行)
- align-content 设置行对齐方式 (添加到父元素中)
前提条件是flex-wrap为wrap时才可以用
align-content:stretch/flex-start/flex-end/center/space-between/space-around----------默认/顶端、底端、居中、两端、平均分布
- 子元素顺序(子元素添加)
order:1----------值越小越靠前 可以为负值
- 子元素对齐(子元素添加)
margin:auto;对象自动留白
- 子元素纵向对齐(子元素添加)
align-self:auto/flex-start/flex-end/center/baseline/stretch----------有父元素按align-item值走,无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走
- 按比例分配元素(子元素添加)
flex:比例值
代码如下:
.box1>.b-2{
/*order:-1;*/
/*margin: auto;*/
align-self: stretch;
flex: 3;
}
.box1>.b-1{
flex:1;
}
.box1>.b-3{
flex:1;
}
执行结果为: