关于html和css布局的一些小技巧

最新推荐文章于 2023-02-25 13:41:21 发布
最新推荐文章于 2023-02-25 13:41:21 发布
阅读量242 收藏 1
点赞数
分类专栏： 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liguixl/article/details/88823783
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <div style="background: #0000DE;width: 420px;overflow: hidden;display: flex;justify-content: center;align-items: center;">
            <span>333333333</span>
            <div style="background: #00FFFF;width: 50px;height: 100px;display: inline-block;"></div>
            <div style="background: #008200;width: 120px;height: 100px;display: inline-block;"></div>
            <a href="#" style="background: #000000;width: 120px;height: 120px;float: left;"></a>
            <!--
                作者：
                时间：2019-03-26
                描述：当父级元素设置其子元素垂直居中，使用display: flex;justify-content: center;align-items: center;
                则，子元素设置浮动不生效
            -->
        </div>
        
        <br />
        <div style="background: #A00000;width:740px;height: 180px;overflow: hidden;position: relative;">
            <span>333333333</span>
            <div style="background: #00FFFF;width: 50px;height: 100px;display: inline-block;position: absolute;left: 50%;top: 50%;margin-top: -50px;margin-left: -25px;"></div>
            <div style="background: #008200;width: 120px;height: 100px;display: inline-block;position: absolute;top: 50%;margin-top: -50px;"></div>
            <a href="#" style="background: #000000;width: 120px;height: 120px;float: left;"></a>
            <!--
                作者：
                时间：2019-03-26
                描述：设置子元素垂直水平居中，如果想要内部元素可以使用浮动功能，需要设置父级元素为position: relative;子元素设置position: absolute;left: 50%;top: 50%;margin-top: -50px;（高度的一半）margin-left: -25px;（宽度的一半）
                如果仅仅设置其垂直居中，可以设置父元素position: relative;  子元素position: absolute;top: 50%;margin-top: -50px;（高度的一半）
            -->
        </div>
        
        <br />
        <div style="background: #0DA344;width: 100%;overflow: hidden;padding: 20px;">
            <div style="float: left;width: 120px;height: 50px;background: #007DDB;"></div>
        </div>
        <div>
            <a href="#"></a>
        </div>
        <!--
            作者：
            时间：2019-03-26
            描述：突然想到还有一种方式是，设置其父级元素的高度为自适应子元素的内容，然后使用父级元素的padding，来使子元素垂直居中
        -->
        <br />
        
        <div style="display: inline-block;float: left;">
            <div style="width: 120px;height: 50px;background: #620AC6;"></div>
            <img src="img/1.jpg" style="width: 100px;height: 50px;"/>
        </div>
        <div style="float: left;">
            <div style="background: #000035;width: 50px;height: 220px;"></div>
        </div>
        <!--
            作者：
            时间：2019-03-26
            描述：正常情况下，如果兄弟元素设置都为div，其中第一个div设置为display: inline-block;其另一个兄弟元素设置了float: left;
            其块级元素照正常文档流显示，但内联元素img还是会让步于浮动元素，即使是外部文档流的浮动元素。如果要避免这种情况，可以设置其第一个元素也为float: left;
        -->
    </body>
</html>

程晓堂
关注
专栏目录
CSS+DIV网页布局技巧（精髓）
09-05
一些解决 浏览器兼容问题的CSS技巧，看了之后你会觉得写出兼容的CSS代码会容易很多。不必在苦恼于控制float元素，等问题。
前端入门html和css布局
最新发布
07-20
学习前端开发，了解并熟练掌握HTML和CSS布局是至关重要的。实践中，可以通过编写简单的页面逐步提高，逐渐熟悉各种布局技巧和模式。同时，随着技术的发展，新的布局技术和框架如Bootstrap、Vue等也值得学习，以适应...
css布局小技巧
蒹葭的博客
10-28 1152
文章目录一、左右布局1. 使用display: inline-block;2. 使用浮动定位float，3. 使用绝对定位position: absolute;4. 使用display：flex,6. 其他方法,二、左中右布局---基本与上面的无异，稍作修改宽度就可以了三、水平居中1. margin2. 绝对定位3. flex布局四、垂直居中1.transform五等其他小技巧 一、左右布局 1....
HTML+CSS多种布局技巧
MY的博客
08-17 804
一、水平居中水平居中多用于标题以及内容区域的组织形式，以下是五种实现水平居中的方法：方法一： 使用inline-block和text-align实现<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>水平居中（1）</title> <style> .parent{ text-align
前端面试题总结 HTML+CSS篇（一）
全栈启示录
03-05 2858
里面是一些关于HTML+CSS的面试题汇总
收藏！40 个 CSS 布局技巧
阿里云开发者
07-20 9667
简介：CSS是Web开发中不可或缺的一部分，随着Web技术的不断革新，CSS也变得更加强大。CSS的众多属性你知道了多少？具体开发中该使用什么属性才最适合恰当？如今的一些CSS属性可以让我们节约更多的时间。比如在Web布局中，现代CSS特性就可以更好的帮助我们快速实现如等高布局，水平垂直居中，经典的圣杯布局、宽高比例、页脚保持在底部等效果。淘系前端技术专家大漠将详细介绍一些不同的CSS属性来实现这些效果，希望对同学们有所帮助。一 水平垂直居中如何实现水平垂直居中可以说是CSS面试题中的经典面试题，在多年前
html+css静态网页，适合学生作业，主要体现css布局技巧
01-03
总的来说，这个压缩包提供了一个实践HTML和CSS布局技巧的实例，涵盖了从基础的HTML文档结构到复杂的CSS样式设计，再到可能的JavaScript交互和响应式设计。对于学生而言，通过分析和修改这些文件，可以深入理解网页...
CSS整体布局声明的一些使用技巧
10-30
CSS整体布局声明的一些使用技巧 CSS是一种功能强大的样式表语言，用于描述HTML或XML文档的呈现方式。CSS整体布局声明是一种声明方式，用于为Web页面设置通用的样式，以提高页面的可读性和美观性。在本文中，我们将...
div+css页面布局的五个小技巧
10-30
以下就是五个关于`div+css`页面布局，特别是针对表单布局的小技巧，帮助你提升网站的用户体验。 1. **表单文本输入的移动选择**： 在表单中，通常我们会为文本输入框提供默认的提示文字，例如“请输入电子邮件......
百度新闻页面布局html+css
02-28
本教程将深入探讨“百度新闻页面布局”的HTML和CSS实现，旨在帮助初学者掌握页面布局的基本技巧，理解如何通过标签的使用来构建清晰、有效的新闻列表。 首先，HTML（HyperText Markup Language）是网页内容的结构化...
CSS常见布局技巧
qq_50121370的博客
01-29 632
1.margin负值技巧 负值margin可以让盒子向反方向移动。 当我们添加两个浮动并列的盒子时，原来为1px的边框会叠加起来变成2px的边框如图一。这时我们可以使用margin的负值技巧 图一 2.文字围绕浮动元素 3.行内块元素的巧妙运用 4.css三角强化 ...
css布局技巧
desson
03-01 77
参考 参考 参考margin负值 参考margin负值 margin负值布局
CSS-布局技巧
王子老师
09-28 92
人生不能太过圆满，求而不得也未必是遗憾。 margin负值巧妙应用 现在每个盒子中间的边框宽度是2px 添加属性：margin-left:-1px 鼠标滑过的时候显示红色的边框： 右边的被覆盖了 解决方法1：如果li都有定位，z-index:1提高层级 方法2：使用相对定位，占有原来的位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title.
css.布局技巧
m0_73782968的博客
02-25 73
当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。当前，新冠疫情的防疫已进入新常态
CSS布局技巧大全
long0801的博客
09-07 202
参考资料： http://www.imooc.com/article/2235 单列布局 水平居中 父元素text-align:center;子元素：inline-block; 优点：兼容性好； 不足：需要同时设置子元素和父元素 水平居中1 .parent { width: 500px; hei
CSS 布局小技巧
yanzhou1224的专栏
03-14 223
1. ul在IE7，IE6下的解释和FireFox，IE8 不同，前者默认margin的值，后者默认padding的值，因此设置的时候要把margin和padding都设置为0。但是当有border的时候，点还是会显示出来，所以还要设置list-style:none. 虽然预设标记不错，但是却没有办法精确控制，所以在实际应用中并不推荐使用，还是用背景图片来代替。2. Id的权重比class要大。3.定义链接的四种状态要注意先后顺序： Link Visited Hover Active, 否则可能影响效果。4
一次性设置HTML/CSS字体与布局技巧
这部分内容主要围绕CSS中的行高设置技巧，以及如何利用`font`简写属性来统一样式，同时也提醒了读者关于版权和使用规定的重要性。在实际网页设计中，合理配置字体和行高能够提升页面的可读性和美观度，同时遵守版权...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值