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

css布局

时间:2018-05-12 13:51:01      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:span   isp   支持   机制   put   inpu   忽略   ali   nbsp   

块级元素与行内元素

首先谈谈人们经常提及的块级元素行内(内联)元素

p, ul, form, div等元素被称为块级元素,这些元素显示为一块儿内容(会自动换行),span, input 等元素称为行内元素,这两者主要区别就是块级元素会从上到下一个个垂直排列,每个自占一行

 

<div style="height: 100px; width: 100px; ">
    </div>
    <div style="height: 100px; width: 100px; ">
    </div>

 

 

 

而行内元素在一行中水平排列,行内元素的高度由其内容撑开,不可显示的设置其高度,这就是为什么我们一次次的在span上设置height属性不好使的原因。

 

 

描述
none

此元素不会被显示。

block

此元素将显示为块级元素,此元素前后会带有换行符。

inline

此元素会被显示为内联元素,元素前后没有换行符。

inline-block

行内块元素。(CSS2.1 新增的值)

我们在显示隐藏元素的时候经常会用到把display设为none或者’’,设为none效果很明显,就是让元素脱离文档流,不显示,不占文档空间,而设为’’其实就是设置为元素默认属性block或inline,inline-block属性是CSS2.1新加值,IE8以上及其他主流浏览器都已经支持,它可以使元素像行内元素那样水平一次排列,但是框的内容符合块级元素行为,能够显示设置宽,高,内外边距。很有意思。

通过将display属性设置为block,可以使行内元素表现的想块级元素一样,反之亦然。

定位

要想了解CSS元素定位就需要了解position属性了,position属性有几个常用值如下

属性
inhert

规定应该从父元素继承 position 属性的值。

static

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

relative

生成相对定位的元素,相对于元素本身正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

 

CSS有三种基本的定位机制:普通流,浮动和绝对定位

普通流是默认定位方式,在普通流中元素框的位置由元素在html中的位置决定,元素position属性为static或继承来的static时就会按照普通流定位,这也是我们最常见的方式。

相对定位比较简单,对应position属性的relative值,如果对一个元素进行相对定位,它将出现在他所在的位置上,然后可以通过设置垂直或水平位置,让这个元素相对于它自己移动,在使用相对定位时,无论元素是否移动,元素在文档流中占据原来空间,只是表现会改变。

css布局

标签:span   isp   支持   机制   put   inpu   忽略   ali   nbsp   

原文地址:https://www.cnblogs.com/James23/p/9028445.html

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