干货：CSS盒子模型、浮动+代码分析

上篇博客分享了一个登录界面及相关的源码，这篇博客分享这个登录界面实现用到了哪些知识点效果图知识点盒子模型浮动实现接下来咱们一点点来实现，先写出HTML代码，把界面主干写...

上篇博客分享了一个登录界面及相关的源码，这篇博客分享这个登录界面实现用到了哪些知识点

效果图

知识点

盒子模型

浮动

实现

接下来咱们一点点来实现，先写出HTML代码，把界面主干写出来

<body>
    <form id="form1" runat="server" class="login-box">
        <h1>E-boy网咖</h1>
        <div class="textbox">
            <input type="text" placeholder="请输入用户名" name="username" />
        </div>
        <div class="text">
            <input type="password" placeholder="请输入密码" name="password"/>
        </div>
        <input class="btn" type="button" value="登录" runat="server" />
    </form>
</body>

浏览器显示图

一、CSS样式实现把网页控件挪到中间

CSS代码

.login-box {
    width: 280px;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50,-50);
}

解释

当表单具体宽和高不确定时，可以用上述代码实现界面居中

效果图

二、以E-boy网咖字样式样式变化介绍浮动

先将字样式变为下面的效果图

代码如下

.login-box h1 
{
    border-bottom: 6px solid #4caf50;
}

然后就会发现下面的绿色下划线过于长，如何解决这个问题，就用咱们的知识点

浮动

什么是浮动：

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

如何浮动：

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

对于第二条：

提到的包含框就是就是上面说到的表单，将表单的宽度设置到了280px，因此下划线也变为了280px

如何解决呢，用下列代码

.login-box h1 
{
    float:left;
    border-bottom: 6px solid #4caf50;
}

效果图：

解释（向左浮动的作用）：

因为E-boy网咖字样是一个div块级元素，会独占一行，使用浮动后会清除之前设置的样式，因此浮动使div元素实现从零开始自适应，推荐浮动使div宽度从零开始自适应博客

三、以两个文本框为例介绍盒子模型

盒子模型

所有的HTML元素都可以看作盒子，上图的两个文本框就是典型的两个盒子

盒子模型图

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

下面拿两个文本框，假如以“请输入用户名（请输入密码）”为研究对象对应一下

Margin(外边距) - 两个文本框之间的距离
Border(边框) - 文本框外围的线
Content(内容) - 请输入用户名（请输入密码）
Padding(内边距) - 内容到边框线的距离

这就比较清晰了，但在本例中是以文本框为研究对象的，周围的边距没有显示出来，类比一下就知道了

如何实现图中效果

从图中就可以看出来是以文本框为研究对象的

实现代码

.textbox {
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #4caf50;
}

之后将文本框的边框线去掉即可

总结

前端的布局本质就是摆弄盒子的过程，理解了这个基础，后面会好走一些，上边的代码没有完全列出来，希望咱们一起举一反三

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-05-15 11:13
阅读 ( 456 )
分类：WEB前端开发