弹性盒子布局
本部分笔记参考别人的笔记,为转载,原地址:https://www.jianshu.com/p/d9373a86b748/
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。
是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。
目前,它已经得到了所有浏览器的支持。
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
弹性盒子模型布局一大优点就是会把整个区域内所有的div都对齐,会把下边框拉到同一个水平
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div#contener{
display: flex;
width: 960px;
text-align: center;
}
#contener>div{
border: 1px solid #aaaaff;
box-sizing: border-box;
padding: 5px;
}
div#contener2{
width: 960px;
overflow: hidden;
}
#contener2>div{
border: 1px solid #aaaaff;
box-sizing: border-box;
padding: 5px;
float: left;
}
</style>
</head>
<body>
<div id="contener">
<div style="width: 220px;">
<h1>我是第一个div</h1>
<h1>我最瘦</h1>
</div>
<div style="width: 500px;">
<h1>我是第二个div</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
</div>
<div style="width: 240px;">
<h1>我是第三个div</h1>
<h1>我最帅</h1>
<h1>我最帅</h1>
<h1>我最帅</h1>
<h1>我最帅</h1>
</div>
</div>
<div id="contener2">
<div style="width: 220px;">
<h1>我是第一个div</h1>
<h1>我最瘦</h1>
</div>
<div style="width: 500px;">
<h1>我是第二个div</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
<h1>我最胖</h1>
</div>
<div style="width: 240px;">
<h1>我是第三个div</h1>
<h1>我最帅</h1>
<h1>我最帅</h1>
<h1>我最帅</h1>
<h1>我最帅</h1>
</div>
</div>
</body>
</html>
效果图示:
上半部分为弹性盒子布局,下半部分为浮动布局
flex的六个属性
一、flex-direction 容器内元素的排列方向(默认横向排列)
1:flex-direction:row; 沿水平主轴让元素从左向右排列
2:flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
3:flex-direction:row-reverse;沿水平主轴让元素从右向左排列
二、flex-wrap 容器内元素的换行(默认不换行)
1:flex-wrap: nowrap; (默认)元素不换行,比如:一个div宽度100%,设置此属性,2个div宽度就自动变成各50%;
2:flex-wrap: wrap; 元素换行,比如:一个div宽度100%,设置此属性,第二个div就在第二行了;
三、justify-content 元素在主轴(页面)上的排列
1:justify-content : center;元素在主轴(页面)上居中排列。空白会均匀放到两侧
2:justify-content : flex-start;元素在主轴(页面)上由左或者上开始排列,空白放到右边
3.justify-content : flex-end;元素在主轴(页面)上由右或者下开始排列,空白放到左边
4:justify-content : space-between;元素在主轴(页面)上左右两端或者上下两端开始排列,空白放到元素中间
5:justify-content : space-around;每个元素两侧的间隔相等。所以,元素之间的间隔比元素与边框的间隔大一倍。空白放到元素两侧
四、align-items 元素在主轴(页面)当前行的横轴(纵轴)方向上的对齐方式
1:align-items : flex-start; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界(靠上对齐)。
2:align-items : flex-end; 弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。(靠下对齐)
3:align-items : center; 弹性盒子元素在该行的侧轴(纵轴)上居中放置。(居中对齐)
4:align-items : baseline; 如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。(靠上对齐)尽量靠上对齐,但是以内容的第一行下侧为基准线,而不是上面的边
五:stretch:拉伸子元素,让它们占满父容器
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div#container{
border: 2px solid red;
padding: 5px;
width: 600px;
height: 600px;
display: flex;
}
div>div{
border: 1px solid #aaf;
padding: 5px;
}
</style>
</head>
<body>
<div id="container">
<div style=" font-size:15px">栏目一</div>
<div style=" font-size:25px">栏目二</div>
<div style=" font-size:35px">栏目三</div>
</div>
<button οnclick="change(this.innerHTML);">flex-start</button>
<button οnclick="change(this.innerHTML);">flex-end</button>
<button οnclick="change(this.innerHTML);">center</button>
<button οnclick="change(this.innerHTML);">baseline</button>
<button οnclick="change(this.innerHTML);">stretch</button>
<script type="text/javascript">
function change(val){
document.getElementById('container').style.alignItems=val;
}
</script>
</body>
</html>
四、align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)
1:align-content: flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
2:align-content: flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
3:align-content: stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
4:align-content: center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数,该值等效于’flex-start’。
5:align-content: space-between;元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
6:align-content: space-around;元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行,该值等效于’center’。
补充
意义:把除了三个div之外的剩余空白部分分成六份,分给栏目一一份,栏目二两份,栏目三三份。
html中form表单
input标签
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="www.baidu.com">
单行文本框: <input type="text" id="username" name="username"><br>
不能编辑的文本框:<input type="text" id="username2" name="username" readonly="readonly"><br>
密码框:<input type="password" name="password" id="password"><br>
隐藏域:<input type="hidden" id="hidden" name="hidden"><br>
第一组单选框:<br>
红:<input id="color" name="color" type="radio" value="red">
绿:<input type="radio" id="color2" name="color" value="green">
蓝:<input type="radio" name="color" id="color3" value="blue"><br>
第二组单选框: <br>
男性: <input type="radio" name="gender" id="gender" value="male">
女性: <input type="radio" name="gender" id="gender2" value="female">
<br>
两个复选框:<br>
<input type="checkbox" name="website" id="website" value="leegang.org">
<input type="checkbox" name="website" id="website2" value="crazyit.org">
<br>
文件上传域: <input type="file" name="file" id="file"><br>
图像域:<input type="image" src="index1.jpg" alt="疯狂java联盟" width="27" height="31">
<br>
下面是四个按钮<br>
<input type="submit" name="ok" id="ok" value="提交">
<input type="submit" name="dis" id="dis" value="提交" disabled>
<input type="reset" name="cancel" id="cancel" value="重填">
<input type="button" name="no" id="no" value="无动作">
</form>
</body>
</html>
代码效果
label标签
当鼠标点击文本框前面的文字的时候,文本框会获得焦点,用户体验更好
button标签
select标签与option标签
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" method="GET">
下面是简单下拉菜单:<br>
<select name="skills" id="skills">
<option value="java">java语言</option>
<option value="c">C语言</option>
<option value="ruby">Ruby语言</option>
</select>
<br>
<br>
<br>
下面是允许多选的列表框:<br>
<!-- size表示一次性显示出几个来 -->
<!-- multiple表示是单选下拉列表还是多选列表框 -->
<select name="books" id="books" multiple="multiple" size="4">
<option value="java"> 疯狂java讲义</option>
<option value="android">疯狂Android讲义</option>
<option value="ee">轻量级javaEE企业应用实战</option>
</select><br>
下面是允许多选的列表框:<br>
<select name="leegang" id="leegang" multiple size="2">
<optgroup label="疯狂java体系图书">
<option value="java">疯狂java讲义</option>
<option value="android">疯狂Android讲义</option>
<option value="ee">轻量级javaEE企业应用实战</option>
</optgroup>
<optgroup label="其他图书">
<option value="struts">Struts 2.1权威指南</option>
<option value="ror">ror敏捷开发最佳实践</option>
</optgroup>
</select><br>
<button type="submit">
<b>提交</b>
</button>
<br>
</form>
</body>
</html>
效果图
textarea标签
fieldset与legend
代码示例:
<form action="" method="GET">
<fieldset>
<legend>基本信息</legend>
用户名: <input type="text" id="username" name="username"><br>
密码:<input type="password" name="password" id="password"><br>
</fieldset>
<fieldset>
<legend>附加信息</legend>
身高: <input type="text" id="height" name="height"><br>
出生地: <input type="text" id="birth" name="birth"><br>
毕业学校: <input type="text" id="school" name="school"><br>
</fieldset>
<input type="submit" value="提交" id="ok" name="ok">
<br>
</form>
效果图示:
html新增form属性
formaction属性
使用该属性不用给form加action,给提交按钮单独加即可
formxxx属性
autofocus属性
自动获得焦点属性
placeholder属性
文本框提示语
list属性
代码实现:
<form action="" method="POST">
请输入图书:<input type="text" name="name" list="books">
<input type="submit" value="购买">
</form>
<datalist id="books">
<option value="java">疯狂java讲义</option>
<option value="ee">轻量级javaEE企业应用实战</option>
<option value="android">疯狂Android讲义</option>
</datalist>
效果图示:
自动完成属性:autocomplete属性
label的control属性
h5新增的input元素
meter属性
使用校验属性进行校验
指定某文本框必须填写,符合什么格式等等,日期,价格在什么范围之内
代码实现:
<form action="" method="POST">
图书名:<input type="text" name="name" required><br>
图书ISBN:<input type="text" name="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}"><br>
图书价格:<input type="number" value="" name="price" min="20" max="150" step="5">
<input type="submit" value="购买">
</form>
效果图示:
调用checkValidity方法进行校验
用js来实现弹窗提示输入错误
代码实现:
<form action="" method="POST">
生日:<input type="date" name="birth" id="birth"><br>
邮件地址:<input type="email" name="email" id="email"><br>
<input type="submit" value="提交" οnclick="return check();">
</form>
<script type="text/javascript">
var check =function(){
return commonCheck("birth","生日","字段必须是有效日期!") && commonCheck("email","邮件地址","字段必须符合电子邮件的格式!");
}
var commonCheck =function(field,fieldName,tip){
var targetEle = document.getElementById(field);
if(targetEle.value.trim() == ""){
alert(fieldName+"字段必须填写!");
return false;
}
else if (!targetEle.checkValidity()){
alert(fieldName+tip);
return false;
}
return true;
}
</script>
效果图示:
自定义错误提示
代码实现:
<form action="" method="POST">
图书名:<input type="text" name="name" id="name" required><br>
图书ISBN:<input type="text" name="isbn" id="isbn" required pattern="\d{3}-\d-\d{3}-\d{5}"><br>
图书价格:<input type="number" value="" id="price" name="price" min="20" max="150" step="5">
<input type="submit" value="购买" οnclick="check();">
</form>
<script type="text/javascript">
var check = function(){
if (!document.getElementById("name").checkValidity()) {
document.getElementById("name").setCustomValidity("图书名是必填的!");
}
if (!document.getElementById("isbn").checkValidity()) {
document.getElementById("isbn").setCustomValidity("图书ISBN必须填写,"+"\n而且必须符合xxx-x-xxx-xxxxx的格式(其中x代表数字)。");
}
if (!document.getElementById("price").checkValidity()) {
document.getElementById("price").setCustomValidity("图书价格必须填写,"+"\n而且必须在20-150之间,且是5的倍数。");
}
};
</script>
效果图示:
关闭校验
使用audio和video属性