本文详细介绍了CSS中实现元素自适应宽度和垂直水平居中的多种方法，包括使用calc()函数、flex布局、绝对定位配合transform、grid布局、table布局等。并提供了实际代码示例，包括模态框和信息录入系统的实现，帮助读者深入理解这些布局技巧。
7.15笔记
遇到的问题
老师今天用的css的width.calc()不会用：在网上看了一下一个博主的写的不错
链接: link
大概就是一个自适应的问题：如：我想让左边的元素自适应，但是我不知道左边元素的宽度大小，只知道右边的大小，这个时候我就可以给左边元素一个
.example{
width:calc(100%-60px);//这里的60px是自己经过计算后得出来的值
}
垂直水平居中实现
1、用flex实现
<style>
.out1 {
display: flex;
width: 200px;
height: 200px;
background-color: aqua;
}
.in1 {
width: 100px;
height: 100px;
background-color: azure;
margin: auto;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="out1">
<div class="in1">1</div>
</div>
</body>
结果：
2、利用calc()实现，calc用法在上面的问题中已有描述，这里就不多做赘述了
.out2 {
position: relative;
width: 200px;
height: 200px;
background-color: aqua;
}
.in2 {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: azure;
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="out2">
<div class="in2">2</div>
</div>
结果：
3、使用 margin:auto
当元素有给定的高度以及宽度的时候，使用 margin: auto; 元素仅会水平居中，并不会进行垂直居中。此时就需要设置元素的 position 为 absolute，父级元素的 position 为 relative，同时元素的上下左右都需要设置为 0
.out3{
width: 200px;
height: 200px;
position: relative;
background-color: aqua;
}
.in3{
width: 100px;
height: 100px;
background-color: azure;
margin: auto;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* 这后面两行主要是用来给里面的文字内容居中的 */
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="out3">
<div class="in3">3</div>
</div>
结果：
4、用定位和transform来实现
当我们已经知道了要进行水平垂直居中的元素的宽高时，就可以通过设置 position: absolute 来实现。但是，使用的同时还需要结合其他属性才完整实现，可以结合calc还有margin来实现，这里我是用transform
.out4 {
width: 200px;
height: 200px;
position: relative;
background-color: aqua;
}
.in4 {
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: azure;
position: absolute;
width: 100px;
height: 100px;
/* 这后面两行主要是用来给里面的文字内容居中的 */
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="out4">
<div class="in4">4</div>
</div>
结果：
5、利用grid布局，这个布局讲起来有些许麻烦和抽象，这里我是看了别的博主对grid布局的介绍，想了解的可以戳链接看一下，我这里对grid布局就不多做介绍了链接：link
.out5 {
width: 200px;
height: 200px;
background-color: aqua;
display: grid;
justify-content: center;
align-items: center;
}
.in5 {
width: 100px;
height: 100px;
background-color: azure;
/* 这后面两行主要是用来给里面的文字内容居中的 */
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="out5">
<div class="in5">5</div>
</div>
结果：
6、table 布局
.out6 {
width: 200px;
height: 200px;
background-color: aqua;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.in6 {
display: inline-block;
width: 100px;
height: 100px;
background-color: azure;
/* 这后面两行主要是用来给里面的文字内容居中的 */
text-align: center;
line-height: 100px;
}
</style>
<body>
<div class="out6">
<div class="in6">6</div>
</div>
结果：
练习代码
1、模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态弹框</title>
<style>
.modelbox {
width: 100%;
height: 800px;
background-color: rgb(70, 67, 67, 0.8);
position: fixed;
left: 0px;
top: 0px;
z-index: 10000;
}
.logbox {
/* 把这个div放在爸爸的中间:水平和垂直 */
/* 作业:6种 */
width: 400px;
height: 240px;
border-radius: 10px;
background-color: white;
position: relative;
margin: auto;
margin-top: 200px;
}
#mbc{
visibility:hidden;
}
</style>
</head>
<body>
<button id="qdl">模态弹框 ,请登录</button>
<!-- 验证用户输入的邮箱、密码的格式是否正确 -->
<div id="mbc">
邮箱<input type="text" id="email">
<br>
密码<input type="password" id="pwd">
<br>
<button id="log">登录</button>
</div>
<script>
let qdl = document.querySelector("#qdl")
// 给按钮绑定点击事件
qdl.onclick = function () {
// 创建半透明的蒙版层
let modelbox = document.createElement("div")
modelbox.classList.add("modelbox");
document.body.appendChild(modelbox)
// 在蒙版层中创建登录界面
let logbox = document.createElement("div")
logbox.classList.add("logbox");
modelbox.appendChild(logbox)
let mbc=document.querySelector("#mbc")
logbox.appendChild(mbc)
mbc.style.visibility="visible";
let log = document.querySelector("#log");
log.onclick = function () {
emailreg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
//6到16位字母或数字的组合
pwdreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
let email = document.querySelector("#email");
let pwd = document.querySelector("#pwd");
let emailv = email.value;
let pwdv = pwd.value;
console.log(emailv);
console.log(pwdv);
// if(emailreg.test(emailv)){
// // console.log("格式正确");
// email.style.border="1px green solid "
// }else{
// console.log("格式错误，请重新输入");
// email.style.border="1px red solid"
// }
// if(pwdreg.test(pwdv)){
// console.log("密码格式正确");
// pwd.style.border="1px green solid"
// }else{
// console.log("格式错误，请输入6到16位字母或数字的组合");
// pwd.style.border="1px red solid"
// }
if (emailreg.test(emailv) && pwdreg.test(pwdv)) {
console.log("格式正确");
email.style.border = "1px green solid"
pwd.style.border = "1px green solid"
} else {
console.log("邮箱或密码格式错误，请重新输入");
email.style.border = "1px red solid"
pwd.style.border = "1px red solid"
}
}
}
</script>
</body>
</html>
结果：
模态框演示视频
2、信息录入系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息录入系统</title>
<style>
.top {
color: blue;
width: 230px;
height: 200px;
/* background-color: antiquewhite; */
margin: auto;
margin-top: 50px;
}
input {
border-radius: 5px;
/* color: aqua; */
border-color: aqua;
}
button {
margin: 10px 20px 20px 45px;
border-radius: 5px;
background-color: azure;
}
.show {
/* margin-top: 20px; */
margin: 20px auto;
text-align: center;
width: 600px;
border: 1px #999 solid;
}
th {
background-color: aqua;
width: 100px;
}
.btn {
width: 50px;
height: 25px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: aqua;
color: #000;
outline: none;
}
td input {
width: 80px;
}
</style>
</head>
<body>
<div class="top">
学号：<input type="text" class="value">
姓名：<input type="text" class="value">
年龄：<input type="text" class="value">
爱好：<input type="text" class="value">
地址：<input type="text" class="value">
<button id="add">添加</button>
<button id="set">重置</button>
</div>
<div class="show">
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>地址</th>
<th>操作</th>
</tr>
</table>
</div>
<script>
let add = document.querySelector("#add")
let set = document.querySelector("#set")
// console.log(add, set);
// 添加
add.onclick = function () {
// 创建tr元素，添加到table中
let cretr_to_tab = document.createElement("tr")
let tab = document.querySelector("table")
// console.log(tab);
tab.appendChild(cretr_to_tab);
// 拿到所有的input
let inp = document.querySelectorAll(".value");
// console.log(inp);
inp.forEach((el) => {
// 创建td元素，将遍历到的input中用户输入的新的内容赋给新创建的td，添加到tr中
let cretd_to_tr = document.createElement("td");
cretd_to_tr.innerHTML = el.value;
cretr_to_tab.appendChild(cretd_to_tr);
})
// 在操作那里新创建一个td
let td_lastre = document.createElement("td")
// 将新创建的td放到刚刚创建的tr中
cretr_to_tab.appendChild(td_lastre)
// td_lastre.innerHTML="666"
// 新创建两个button--修改、删除，再在刚刚创建的td中放这两个新创建的button
let delbtn = document.createElement("button");
delbtn.innerHTML = "删除";
// 给新创建的button加一个类名btn，添加类名是为了给这个button更好的设置css样式
delbtn.classList.add("btn");
// 将新创建的button添加到新创建的td中去
td_lastre.appendChild(delbtn);
// 给新创建的button绑定点击事件
delbtn.onclick = function () {
// console.log(this);//这里打印的是这个新创建的button删除按钮
// console.log(this.parentNode.parentNode);
this.parentNode.parentNode.remove()//找到这个按钮的父节点的父节点就是tr，移除tr，就直接删除新创建的trtd
}
// 新创建一个删除按钮
let setbtn = document.createElement("button")
// 将这个按钮的内容改为“修改”
setbtn.innerHTML = "修改";
// 添加这个setbtn的类名为btn
setbtn.classList.add("btn");
// 再将这个创建好的修改按钮添加到td中去
td_lastre.appendChild(setbtn);
// 这里设置一个“开关”
let flag = true;
// 给新创建的setbtn绑定一个点击事件
setbtn.onclick = function () {
// console.log(this);
// 这里就是一个“开关”的思想 修改-->保存 保存-->修改
flag = !flag
if (flag) {
// console.log("open");
// console.log(this);
this.innerHTML = "修改"
// 将当前这一排的td内部的input输入框中的数据value获取了设置到td中
let tds = this.parentNode.parentNode.children
// console.log(tds);
// 将tds的类数组转为数组之后进行遍历，获取元素和下标
Array.from(tds).forEach((el, index) => {
// 当遍历到下标是最后的修改和删除键时直接return
// console.log(el, index);
// console.log(tds.length - 1);
if (index == tds.length - 1) { return }
el.innerHTML = el.children[0].value
})
} else {
// console.log("close");
this.innerHTML = "保存";
// 将当前这一排的td的innerHTML换成input供用户修改
let tds = this.parentNode.parentNode.children
Array.from(tds).forEach((el, index) => {
if (index != tds.length - 1) {
let text = el.innerHTML
el.innerHTML = "";
let inputNew = document.createElement("input");
inputNew.value = text;
el.appendChild(inputNew)
}
})
}
}
}
// 重置
set.onclick = function () {
let inp = document.querySelectorAll(".value");
inp.forEach((el) => {
// console.log(el);
// el是每个输入框，这里重置就是遍历输入框，将输入框中的内容置为空
el.value = ""
})
}
</script>
</body>
</html>
结果：
信息录入系统视频演示
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
