CSS笔记

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笔记,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。