一、总结:

在第一篇css布局实践心得总结中总结了通过给元素设置position:absolute的方式让元素处在BFC(块级格式化上下文)的环境中,处在BFC环境中的元素是独立的,它和外面其他元素毫无关系。

今天很兴奋的是实践到了通过将元素设置成inline-block的方式让元素处在BFC的环境中,让其与外面的元素隔绝关系。还是引用这张图。

问题:如何让一个块级元素在没有采用float或position:absolute的情况下(采用这两种方式布局的元素,元素都会脱离文档流,元素大小由元素里面的内容决定),其宽度随着里面的内容而变化?

实现效果:

html代码:

css代码:

为了让中间的内容和上面的头部对齐,我给父容器添加了宽度并设置了居中,ul这个块级元素虽然没有设置宽度,但是会继承父容器的宽度980px。但是现在我不想继承父容器的宽度,我想让ul的宽度和ul里面的内容的宽度一样大。这里把ul设置成inline-block(内联块级元素)之后,它就和父容器没有了关系,就不会去继承父容器的样式了。

css布局实践总结(part2)的更多相关文章

  1. css布局实践心得总结

    一.摘要: 今天在写一个页面,对css中的BFC(块级格式化范围)有了一点体会,今天把遇到的问题和解决方案总结下来,额外还总结一下强大的负外边距的使用心得. 二.总结:

  2. CSS 布局:40个教程、技巧、例子和最佳实践

    前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...

  3. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  4. CSS布局:Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  5. 转:CSS布局:Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  6. html css布局

    这几天有点急于求成了,原来每一门技术都像大海,只有深入其中才发现它比看到的更要深广的多. 虽然忙里偷闲的看了HTML5,NODE.JS,JAVASCRIPT核心等许多东西,但是真正掌握的不足十分之一, ...

  7. DIV+CSS布局-固定页面开度布局

    DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...

  8. 一览css布局标准

    回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...

  9. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

随机推荐

  1. Git 基础学习篇(应用-windows篇)

    此篇教程主要是讲应用,因为理论,,,额,我也说不出来.大家要深入学习还是看廖老师的教程吧. 可以把这篇当作一个简单应用的参考,因为当初看廖老师的也难看啊!!! 以下是资料: 廖雪峰-Git教程 [Gi ...

  2. 书评<<剑指offer 名企面试官精讲典型编程题>>

      前前后后阅读了一周, 感慨很多, 面试考察的是一个人的综合能力, 这一点从面试官的角度去解读, 确实对面试的理解更立体. *) 具体考察的点1) 扎实的基础2) 高质量的代码3) 清晰的思路4) ...

  3. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  4. ZOJ 1078 Palindrom Numbers

    原题链接 题目大意:判断一个数是不是palindrom.不限于十进制,可以在任何进制下判断. 解法:还好,数字的范围不大,int类型足够搞定.方法就是从2进制开始,先把数字转换成2进制,判断是否对称, ...

  5. 全排列 Permutations

    class Solution { public: vector<vector<int>> permute(vector<int>& nums) { sort ...

  6. Linux 命令ln

    在linux中可用ln命令创建一个文件的链接(软链接或者硬链接) 硬链接的使用: root@IdeaPad:~# ln 2.txt e.txt root@IdeaPad:~# ls 1.txt 2.t ...

  7. Python学习(1)

    幂运算符比取反(一元运算符)的优先级要高. >>>-3**2 -9 >>>(-3)**2 9 >>>pow(2,3) 8 abs函数可以得到数的绝 ...

  8. java编程之:按位与运算,等运算规则

    按位与运算符(&) 参加运算的两个数据,按二进制位进行“与”运算. 运算规则:0&0=0;   0&1=0;    1&0=0;     1&1=1; 即:两位 ...

  9. 【转】iOS websocket 及时通讯实现

    原文网址:http://blog.csdn.net/manyxh/article/details/48196209 2015-09-03 by 木易哥哥 开发一个类似QQ.微信的即时IM聊天功能,做到 ...

  10. 论文笔记之:Playing Atari with Deep Reinforcement Learning

    Playing Atari with Deep Reinforcement Learning <Computer Science>, 2013 Abstract: 本文提出了一种深度学习方 ...