WEB前端

CSS布局 小知识

位置:首页 > WEB前端 > css教程,2018-08-10 12:06
display常见的块级元素<div> <p> <form>常见的行内元素<span> <a>dis

CSS布局(图0)

  • display

    • 常见的块级元素<div> <p> <form>

    • 常见的行内元素<span> <a>

    • display 是CSS中最重要的用于控制不具有的属性。每个元素都有一个默认的display值,这个默认值与元素的类型有关。有的默认值为block ,被称为块级元素,有的默认值为inline被称为行内元素。

    • 当 display 值为none时,元素会隐藏。与visibility不同,visibility:hidden;还会占据空间。而display:none 则不占据空间。<script>默认的display值为none

  • margin:auto;

    • #main { width: 600px; margin: 0 auto; }

    • 设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距。

  • 盒模型

    • 当设置了元素的宽度,实际展现的元素会超过你的设置,这是因为元素的边框border 和内边距会(padding)会撑开元素。

    • .simple { width: 500px; margin: 20px auto; }

    • .fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px; }

    • 将上面两个class运用在不同的div上,会发现fancy明显比simple要大,虽然给他们设置了相同的宽度

    • box-sizing属性:当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。

    • .simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    • .fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

    • 再来看看显示效果

  • position

    • absolute 是最棘手的position值。 absolute 与 fixed 的表现类似,但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。 absolute元素也不会保留它原本在页面应有的空隙(脱离文档流)

    • position: relative 在一个相对定位(position属性的值为relative)的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

    • position: fixed 一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。 一个固定定位元素不会保留它原本在页面应有的空隙(脱离文档流)。

  • position:absolute

TAGS:CSS布局

猜你喜欢

NewHot