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的操作。

目录
相关文章
|
前端开发 开发者
[译] 从没有人告诉过我的 CSS 小知识
这篇文章绝对不是对任何一个曾经和我共事过的人的批判,仅仅是我最近在做一些个人研究的时候学到的关于 CSS 的一些要点。
1125 0
|
15天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG
|
6天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
10天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
17天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
18天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
13 0
|
1月前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码