前端布局之传统布局

一、传统布局的相关CSS属性(红色为默认属性)

1、display: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-column | table-cell | table-caption | inherit

每个元素都有一个默认的display属性,但我们可以随时重写他。

元素分为块级元素和内联(内联级)元素,

(1)块级元素的display默认为block, 样式为新开一行并尽量撑满容器,能够设置尺寸如宽度和高度

(2)内联元素的display 默认为 inline, 样式为嵌入在行内,不换行也不能设置尺寸

(3)一些特殊元素的display 默认为none如script,样式为在不删除元素的情况下隐藏元素并脱离文档流

(注:display:none 隐藏元素时不会占据原来的空间,区别于visibility:hidden ,后者没有脱离文档流是占据空间的)

(4) 一些特殊元素的display 默认为list-item如

  • 标签,

    (4) 一些特殊元素的display 默认为table如

     标签,

    (未完……)

    2.1、float: none / left / right / inherit(未完……)

    (1)默认属性值为none, 即不浮动

    (2)设置为left 是向左浮动

    (3)设置为right 是向右浮动

    (4)设置为inherit 是继承父元素的浮动属性

    float能够使元素脱离文档流,但不脱离文本流,能够实现文字浮动在图片周围,这只因为设置float的元素在其容器内的高度为0,当设置float的元素高度大于其容器会溢出。

    2.2、clear: left / right /both (清除浮动)(未完……)

    (1)left为清除左浮动

    (2)right为清除右浮动

    (3)both为清除全部浮动

    清除浮动的方法:

    (1)当浮动元素的高度大于其容器而溢出时,在其容器上设置overflow: auto 来解决元素溢出容器塌陷的问题。(为满足IE6,设置成  overflow: auto; 和zoom: 1;)

     

    3、position: static / relative / absolute / fixed / sticky(css3新增)

    (1)position属性默认值为static,除了默认的static之外,设置其他任意一个属性值都标记为 “positioned”,此外还要设置top/bottom/left/right 其中某一个或几个属性(如设置top和left)才能实现效果,否则不会变化。

    (2)设置relative 属性值,效果为:元素相对改变前的其本身的位置进行偏移,偏移量由top/bottom/left/right决定,且其他元素不会因为他的改变而改变(改变前的其本身的位置还会保留)。

    (3)设置 absolute属性值,效果为:元素相对最近的“positioned”祖先元素进行偏移,若没有最近的“positioned”元素,则相对body进行偏移。其他元素的位置会被该元素影响(改变前的其本身的位置不保留)。

    (4)设置 fixed 属性值,效果为:元素相对视窗进行定位,即脱离文档流不受其他元素影响,偏移量由top/bottom/left/right决定,且改变前的其本身的位置不会保留,其他元素会占据其原有的位置。(注:水平或竖直的偏移量若不设置则默认原来的位置)据说fixed对移动浏览器不友好,解决办法:http://bradfrost.com/blog/post/fixed-position/

    (5)sticky是CSS3新增的属性值,使用top/bottom/left/right设置目标区域,若在目标区域则相当于relative,滑动到目标区域以外则相当于fixed,不脱离文档流,(改变前的其本身的位置还会保留)

    属性值 relative / absolute / fixed造成了元素的层叠,此时可以设置z-index改变层叠顺序(只有positioned属性值可以)

    4、margin: 0 auto(未完……)

    块级元素默认尽量撑满容器,设置width可以调节他的宽度,此时设置该元素的左右外边距 margin为auto时,

    若元素宽度小于容器宽度,则两边间距均匀平分,元素在容器内水平居中;

    若元素宽度大于容器宽度,则会出现水平滚动条来容纳页面。此时将width换成max-width即可解决。

    5、box-sizing: content-box / border-box / padding-box

    详情见盒模型

     

    二、盒模型

    页面的尺寸计算如下:

    前端布局之传统布局_第1张图片

    默认页面的宽度 = width + padding + border-width + margin, 即width不包含padding和boder-width

    可以通过设置box-sizing属性来改变宽度计算,box-sizing: content-box /  border-box / padding-box

    (1)默认属性值为content-box,默认页面的宽度 = width + padding + border-width + margin, 即width不包含padding和boder-width

    (2)border-box  页面宽度 = width + margin  即width包含padding和border-width 

    (3)padding-box  页面宽度 =  width + border-width + margin  即width包含padding 不包含border-width (注: padding-box 只有Firefox 中实现了,但在Firefox50中删除了,一般最好不要用)

    由于该属性比较新,为了兼容,最好设置成以下:

    * {
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

    三、居中问题

    1.水平居中

    (1)行内元素  text-align:  center

    (2)块级元素   margin :0  auto

    (3)对该元素 display :  inline-block   对其父元素  text-align : center

       优点:兼容性好

       缺点:子元素的文本也居中,可在子元素设置 text-align:left 还原

    (4)对该元素 margin :0 auto   对其子元素  display : table 

       优点:只设置了其子元素

       缺点:不兼容ie6、ie7,把子元素

    换成

    (5)对其父元素设置 display : relative   对该元素设置 position:absolute,left:50%,transform:translateX(-50%)

       优点:对其他元素没有影响

       缺点:transform是CSS3的内容,兼容性不太好,要加前缀

    (6)对其父设置display :flex   对该元素设置 justify-content :center 

       优点:只设置其父

       缺点:flex布局低版本(ie6,7,8)不支持

    2.垂直居中

    (1)已知高度的文本  line-height :  height 

    (未完)

    三、传统布局类型

    1.单栏布局

    2.两栏布局

    2.1  float + margin(左定宽,右自适应)

    (1)float:left + margin-left  (margin把浮动的位置空出来)

    (2)position:absolute + margin-left 

    (3)float:left ,margin-right  +  float:left ,负margin

    该方法同双飞翼,使用左浮动和左栏的右边距先铺满父元素,然后讲右栏设置负的margin放在左margin的位置

    (4)float + BFC 

    3.三栏布局

    (1)position:absolute + position:absolute +position:absolute

    注意:其父元素position:relative

    (2)position:absolute + margin +position:absolute

    注意:其父元素position:relative

    (3)float:left + margin + float:right

    注意div顺序为左float,右float,中margin ,若左中右,则右float会被挤到下一行,并且其父元素要清除浮动防止高度塌陷

    (4)圣杯布局和双飞翼布局(三个float:left)

    一个讲解简洁清楚的文章:https://www.jianshu.com/p/81ef7e7094e8

    其中的margin-left:-100% 中,100%是相对父元素的,向左移动100%个父元素,同类margin-left:-150px是向左移动150px

    前端布局之传统布局_第2张图片

    (5)inline-block布局

    注意事项:

    • vertical-align属性会影响到inline-block元素,你可能会把他的值设置为top

    • 需要设置每一列的宽度(如两列布局设置两列宽度为35%和65%)

    • 若HTML源代码中元素之间有空格,那么列与列之间会产生空隙

    (6)table

    其父元素设置display:table ,三栏设置display:table-cell

    (7)flex

    其父元素设置display:flex

    (8)grid

     

    1.静态布局

    2.自适应布局

    3.流式布局

    百分比宽度的浮动布局

    4.响应式布局

    5.弹性布局

     

    你可能感兴趣的:(前端)