码迷,mamicode.com
首页 > Web开发 > 详细

CSS笔记

时间:2014-08-04 20:42:27      阅读:310      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   使用   os   strong   

CSS Display - Block and Inline Elements

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

  • <h1>
  • <p>
  • <li>
  • <div>

An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

  • <span>
  • <a>

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it

 


 

CSS Positioning

  该属性可以设置元素的位置。position属性有四种:

static

  HTML元素默认就使用static定位的。它根据页面流来定位。static属性,不支持top、bottom、left和right属性的设置。

fixed

  固定定位——相对浏览器窗口定位。IE7和IE8需要描述 !DOCTYPE才支持。可以通过top/bottom/left和right属性来微调。

relative

  相对定位——相对于static布局的位置。可以通过top、bottom、left和right属性来微调。

absolute

  绝对定位——相对直接父元素布局。没有父元素就相对html布局。支持位置属性设置进行微调。

重叠元素(Overlapping Elements)

  元素支持z-index来设置显示顺序。没有设置z-index的重叠元素,最后渲染的将显示在上面。

CSS Combinators

  CSS配合选择器

  四种:子元素选择器、亲子选择器、下一个兄弟选择器、后兄弟选择器

#Descendant Selector
div p {
    background-color: yellow;
}

#Child Selector
div > p {
    background-color: yellow;
}

#Adjacent Sibling Selector
div + p {
    background-color: yellow;
}

#General Sibling Selector
div ~ p {
    background-color: yellow;
}

 

CSS笔记,布布扣,bubuko.com

CSS笔记

标签:des   style   blog   http   color   使用   os   strong   

原文地址:http://www.cnblogs.com/javawer/p/3890623.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!