css知识

简介:

margin和padding是什么意思

margin外边距,padding内边距,外边距表示一个元素的边到相邻元素的距离,内边距表示元素之间的内容和元素边框的距离。

font:12px/1.5 表示什么意思?

其中12px/1.5表示:文字大小12像素,行高1.5倍,也就是150%

margin怎么设置

可以参考:http://www.w3school.com.cn/css/pr_margin.asp

margin简写属性在一个声明中设置所有外边距属性。四个属性是顺时针,上右下左

比如:

margin:10px 5px 15px 20px

上边距是10px

右边距是5px

下边距是15px

左边距是20px

 

它也允许只需要设置两个值就表示四个值,设置两个值的时候,第一个值代表上边距和下边距,第二个值代表左边距和右边距。比如:

margin:10px 5px

上边距是10px

右边距是5px

下边距是10px

左边距是5px

 

margin设置另外可以设置的是一个auto值,auto值就是让浏览器自己设置,比如

居中可以使用:margin:0 auto

居左可以使用:margin:0 auto 0 0

居右可以使用:margin:0 0 0 auto

display:inline/block是什么意思

举div和span元素为例,div是块级元素,而span是内联元素,就是说,假设没有任何其他设置的话,两个div元素会是上下排版关系,两个span元素会是左右排版关系

而比如你想修改div为内联方式,那么就需要使用display属性

内联举例:http://www.w3school.com.cn/tiy/t.asp?f=csse_display

块级举例:http://www.w3school.com.cn/tiy/t.asp?f=csse_display_block

float是什么意思

http://www.w3school.com.cn/css/pr_class_float.asp

是浮动的意思,这个属性是用于布局的时候用的,比如下面的这个图

Image

该怎么设计呢?

它分为左右两个活动区块,左边的区块是banner图,右边的区块是文字介绍和按钮。那么在假设父div是整个显示部分的话,我们看到左边的banner图距离父div左框有一定距离,右边的也有一定距离。

实现这个有个问题就是这两个div应该是内联的,但是内联的元素的margin属性是不能生效的。所以要让内联的元素生效就需要设置float属性。

大概有三种方法可以实现这个:

1 父div中设置padding,然后左边的子banner的div和右边文字的div分别设置float左边和右边

2 父div中不设置padding,然后左边的子banner的div设置float的时候同时设置margin。但是这个时候,在IE6,7下会出现双边距的问题,所以需要设置display:inline。

3 父div中不设置padding,然后左边的子banner的div再套在一个div里面,而这个div设置float,然后子div中在再做margin的操作。





本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/p/3476669.html,如需转载请自行联系原作者

相关文章
|
Kubernetes 架构师 算法
阿里面试:全国14亿人,统计出重名最多的前100个姓名
文章介绍了如何解决“从全国14亿人的数据中统计出重名人数最多的前100位姓名”的面试题,详细分析了多种数据结构的优缺点,最终推荐使用前缀树(Trie)+小顶堆的组合。文章还提供了具体的Java代码实现,并讨论了在内存受限情况下的解决方案,强调了TOP N问题的典型解题思路。最后,鼓励读者通过系统化学习《尼恩Java面试宝典》提升面试技巧。
阿里面试:全国14亿人,统计出重名最多的前100个姓名
(5)Qt中的日期和时间
本文介绍了Qt中处理日期和时间的类QDate、QTime和QDateTime,包括它们的格式化选项、构造函数、公共成员函数以及如何进行日期和时间的增减、比较,同时提到了QElapsedTimer作为QTime的替代品用于计时。
600 0
|
数据采集 自然语言处理 测试技术
CodeFuse-13B: 预训练多语言代码大模型
该论文针对蚂蚁集团的现实应用场景,详细介绍了CodeFuse-13B预训练模型的数据准备和训练过程,揭秘了CodeFuse是如何成为一款能够同时处理英文和中文提示的高效预训练代码大型语言模型(LLM)。论文还对CodeFuse在代码生成、翻译、注释和测试用例生成等应用场景中的性能进行了评估。CodeFuse-13B在蚂蚁集团内广
553 2
|
机器学习/深度学习 人工智能 自然语言处理
ai的技术阶段
【6月更文挑战第22天】ai的技术阶段
598 3
|
机器学习/深度学习 人工智能 自然语言处理
谷歌工程师Alex Irpan:2028年有10%概率实现AGI
【2月更文挑战第20天】谷歌工程师Alex Irpan:2028年有10%概率实现AGI
276 6
谷歌工程师Alex Irpan:2028年有10%概率实现AGI
|
机器学习/深度学习 人工智能 监控
探索人工智能在图像识别领域的创新应用
【5月更文挑战第25天】随着深度学习技术的飞速发展,人工智能(AI)在图像识别领域取得了重大进展。本文将深入探讨人工智能如何通过先进的算法和模型改进图像识别能力,并分析其在不同行业中的应用前景。我们将重点讨论卷积神经网络(CNN)与循环神经网络(RNN)的结合使用,以及生成对抗网络(GAN)在提高图像质量方面的作用。此外,文中还将提及数据增强、迁移学习等策略对提升模型泛化性能的重要性。
|
数据可视化 搜索推荐 vr&ar
增强现实(AR)技术在教育领域的应用研究
增强现实(AR)技术在教育领域的应用研究
658 0
|
机器学习/深度学习 人工智能 搜索推荐
未来互联网发展趋势分析与展望
当我们谈论互联网的未来,往往会聚焦于新技术的应用和发展趋势。然而,除了技术本身的创新,还有许多其他因素也将对未来互联网产生深远的影响。本文将探讨未来互联网发展的几个重要趋势,涉及人工智能、区块链、物联网等领域,并分析其可能带来的社会变革和商业机遇。
841 3
|
存储 人工智能 前端开发
课时1:AI人像动漫画实操教学
课时1:AI人像动漫画实操教学

热门文章

最新文章