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

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

该怎么设计呢?

它分为左右两个活动区块,左边的区块是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的操作。

时间: 2024-08-03 22:21:41

css知识的相关文章

css知识梳理

写完之前的一篇"一起领略css3动画的强大"之后,我发现自己以为的懂得并不是真的懂得,所以现在来好好把css3来梳理一下 css属性组 动画属性(Animation) @keyframes - 规定动画 通过@keyframes规则能够创建动画,创建动画的原理是:将一套CSS样式逐渐变化为另一套样式;在动画过程中能够多次改变这套CSS样式;以百分比来规定改变发生的时间,或通过关键词"from"/"to",等价于0%和100%;为了获得最佳的浏览器

网页制作知识总结:常用的CSS知识

css|网页 1. Block和inline元素对比 所有的HTML元素都属于block和inline之一.block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: 和其他元素都在一行上:高,行高及顶和底边距不可改变:宽度就是它的文字或图片的宽度

恶补web之二:css知识(3)

    css有3种定位机制:普通流,浮动和绝对定位.     除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定.     通过使用position属性,可以选择4种不同类型的定位: static 元素框正常生成 relative 元素框偏移某个距离:正常元素可以通过设置垂直或水平位置,让这个元素"相对于"它的起点进行移动.若将相对定位中的top设为20px,则框将在原位置下面20像素地方,类似如果left设为30像素,则会在元素左边创建

常用的CSS知识

css 1. Block和inline元素对比所有的HTML元素都属于block和inline之一.block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: 和其他元素都在一行上:高,行高及顶和底边距不可改变:宽度就是它的文字或图片的宽度,不可改

CSS知识总结

  Cascading Style Sheets(简称CSS),翻译为"层叠样式单"或"级联样式单",又简称"样式表". CSS的引入是用来扩展HTML的,而不是用来替代HTML的.也就是说CSS离不开HTML,它只是一项辅助工具,是对HTML功能的一种补充. 在CSS标准里,不仅重新定义了HTML原有的样式,如文字的大小.颜色等;更加入了重叠文字.区块变化及任意位置放置等多项新属性.通过CSS可以使用更丰富.更灵活的样式,更简单地设计出更美观的

恶补web之二:css知识(1)

    css指层叠样式表(Cascading Style Sheets)     样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式表可以极大提高工作效率,外部样式表存储在css文件里,多个样式定义可层叠为一.     html标签原本被设计为用于定义文档内容,由于netscape和ie不断将新的html标签和属性(比如字体和颜色属性)添加到html规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难.为解决该

学习样式表CSS参考-常用的CSS知识_经验交流

1. Block和inline元素对比 所有的HTML元素都属于block和inline之一. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. 相反地,inline元素的特点是: 和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图片的宽度

50款实用的CSS工具

包含CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器.  50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器. 网格和布局 The 1KB CSS Grid 新颖的 CSS 网格工具,可用于简化内容管理

实现div垂直居中的CSS代码

   我学到的第一个CSS知识就是如何把一个固定宽度和高度的元素水平或者垂直居中.这些居中的内容可能是入站欢迎页面(Splash Page http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci213036,00.html)中图片,或者是一些设计喜欢的居中设计的网站等.最原始的解决办法就是把元素在窗口中距左和距上边缘进行50%的绝对定位.当然这只是把元素的右上角移动到了窗口的中央,接下来你还需要设置负的margin-left和margin