zoukankan      html  css  js  c++  java
  • display inline or block

    一、首先要了解什么是块级元素与行级元素

    块级元素

    会占领页面的一行,其后多个block元素自动换行、 可以设置width,height,设置了width后同样也占领一行、同样也可以设置   margin与padding属性。

    ps:常见的块级元素:div,img,ul,form,p等

    行级元素

    与其他元素在同一行上,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。

    ps:em,strong,br,input等

    display:inline-block,block,inline元素的区别

    1、display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始。

    2、display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变。多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行。

    3、display:inline-block看上去值名inline-block是一个混合产物,实际上确是如此,将元素显示为行内块状元素,设置该属性后,其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block,使其既有block的宽度高度特性,又有inline的同行特性,在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。

  • 相关阅读:
    HDU2502 月之数 组合数
    HDU1128 Self Numbers 筛选
    HDU2161 Primes
    HDU1224 Free DIY Tour 最长上升子序列
    HDU2816 I Love You Too
    winForm窗体设置不能随意拖动大小
    gridview 中SelectedIndexChanged 事件获得该行主键
    关于bin和obj文件夹。debug 和release的区别
    winform最小化时在任务栏里隐藏,且显示在托盘里
    wcf异常处理
  • 原文地址:https://www.cnblogs.com/ilovetheworld/p/10630911.html
Copyright © 2011-2022 走看看