web前端入门到实战：css中display属性-创新互联

display属性共有4个值：

blcok：块级元素
inline-block：行内块级元素
inline：行内元素
none：隐藏元素，不占据空间

1.块级元素

常见的块级元素有div,p,ul,ol,li,h2~h7等
块级元素会默认占满父元素的宽度且独占一行

    
尽可能的占满父元素的宽度

2.行内元素

常见的行内元素有span,img,a,input,button,textarea、select等，他的宽度完全由内容撑开，不能为其设置宽高。
除非父元素一行放满了，行内元素不然不会换行
行内元素受父元素的text-align的影响，父元素设置text-align：center，行内元素会居中显示
行内元素受父元素的white-space的影响，父元素设置white-space：nowrap，行内元素将不会换行

3.行内块级元素

行内块级元素可以像跨级元素一样设置宽高
行内块级元素如果不设置宽高的话，他的大小默认由内容或者说子元素撑开。它的特性介于块级元素与行内元素之间
行内块级元素一样受父元素的text-align的影响，父元素可以设置父元素的text-align来决定他的对齐方式
行内块级元素素受父元素的white-space的影响，父元素设置white-space：nowrap，行内块级元素将不会换行

    行内元素


    行内块级元素

专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

4.实际运用

在轮播图中，最外层的容器宽度是固定的，且overflow:hidden
第二层容器ul的宽度则是它子元素的宽度之和，因为子元素的个数不确定，所以不能在css中设定确定的宽度值，通常我们都是利用js计算出它子元素的宽度之和再赋予ul元素，今天这个例子我们不用js，利用inline-block宽度由子元素撑开的特性,让ul的宽度由子元素撑开

设置ul的样式display:inline-block,同时为了让所有的li标签不换行，设置white-space: nowrap
为了能让ul的white-space: nowrap生效，li标签需要设置display:inline-block，要消除代码换行造成的间隔，可以让父元素的字体大小设置为0，,然后子元素里面再设置字体大小即可

    
inline-block
    
inline-block
    
inline-block
    
inline-block

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。