CSS+DIV基础知识大观

盒状模型解析

CSS2中的盒模型是关系到我们排版定位的关键,例如<div>就遵循盒模型规范。盒模型定义的margin,background-color,background-image,padding ,content,border

需要说明的是:IE和Mozilla浏览器对盒模型的解释不一致,造成我们定位上的困难,主要差别是:

  • IE计算2个div之间的距离时候,会把1px的border计算在内,而mozilla没有;
  • 设定div的宽度后,如果给padding加一个值,IE会在宽度内减去这个值,而M ozilla会在宽度基础上加上这个值。

CSS基础知识

文字属性

  1. font : font-style || font-variant || font-weight || font-size || line-height设置或检索对象中的文本特性。该属性是复合属性。
    默认值为: normal normal normal medium normal “Times New Roman” 。
    参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。
  2. color : color指定颜色
    可以采用省略样式:如:#FFFFFF-#FFF
  3. text-decoration : none || underline || blink || overline || line-throughnone : 默认值。无装饰 blink : 闪烁 underline : 下划线 line-through : 贯穿线 overline : 上划线
  4. text-underline-position : below | above设置或检索 text-decoration 属性定义的下划线的位置。
  5. text-shadow : color || length || length || opacity设置或检索对象中文本的文字是否有阴影及模糊效果 color:指定颜色 opacity:指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。
  6. text-transform : none | capitalize | uppercase | lowercasenone: 默认值。无转换发生 capitalize:将每个单词的第一个字母转换成大写,其余无转换发生 uppercase:转换成大写 lowercase: 转换成小写
  7. line-height(行高)|letter-spacing(文字之间的间隔)|word-spacing(单词之间插入的空隔)

文本

  1. text-indent:50px;(文本的缩进)|text-overflow:ellipsis(省略标记(…)标示对象内文本的溢出)|text-align :left|right|center(文本的对齐方式)|word-wrap(超过指定容器的边界时是否断开转行)
  2. background : background-color || background-image || background-repeat || background-attachment || background-positionbackground transparent none repeat scroll 0% 0%

定位

  1. position :absolute对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。

布局

  1. clear:none|left|right|both(不允许有浮动对象的边)
  2. float:left|right(漂浮)
  3. overflow:visible|auto|hidden|scroll(超过其指定高度及宽度时如何管理内容)
  4. display:block|inline(象都是块对象(block element)或者内联对象(inline element)。)

边框

  1. border : border-width || border-style || border-color(border-bottom:;border-right:;border-top:;border-left:;)

列表

  1. list-style : list-style-image || list-style-position || list-style-type

相关文章:

1、经典DIV + CSS Layout
https://www.onexin.net/classic-div-css-layout/

2、CSS如何让图片垂直并水平居中等比缩放?
https://www.onexin.net/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

3、纯CSS制作随着鼠标跑动的裸男
https://www.onexin.net/naked-man-running-the-pure-css-production-with-the-mouse/

4、网站重构:利用CSS改善网站可访问性
https://www.onexin.net/site-reconstruction-using-css-to-improve-website-accessibility/

5、DIVC+SS网页特效欣赏:非常酷的角BANNER
https://www.onexin.net/divc-ss-web-effects-appreciate-very-cool-angle-banner/

转载请注明出处:https://www.onexin.net/css-div-basics-of-grand/

Leave a Reply

Your email address will not be published. Required fields are marked *