CSS盒模型(2)
作者:糖伴西红柿 来源:前端观察 时间:2009-06-09 14:23:00
无宽度的绝对定位盒子
未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此,如果盒中只有一个单词,盒子就会像那个词的表现一样宽。如果变成两个词,盒子的宽度也会相应增加。这种情况会持续到盒子的宽度达到父元素宽度的 100%(最近的相对定位的父元素或者浏览器窗口),然后就会折行。
对盒子来说,垂直扩展以适应包含的内容是很自然的。值得奇怪的是,不仅仅是不同平台下的文本表现不同,不同的浏览器处理这个问题时,也有很多怪癖。
无宽度浮动盒子
同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度,直到其父元素的宽度(其父元素不必是相对定位的)。由于这些无宽度盒子的脆弱性,我们要学到的是关键任务模式的时候它们是不能依赖的,像总体页面布局中。如果浮动一列作为侧边栏使用,并指望那些内部元素(如图片)来负责包含它的宽度,你就是在自找麻烦。
内联元素也是盒子
我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子,但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形,它们也可以像其它盒子一样有 margin, padding he border
折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边,但是只在第一行有效,因为那是盒子的起点。padding 正常的应用在文本的上部或下部,当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。
亲眼目睹一下
想看看组成页面的每个单独的“盒子”吗?试着把这行代码暂时放入样式表:
* {
border: 1px solid red !important;
}
标签:前端,模型,css
0
投稿
猜你喜欢
Python中文分词实现方法(安装pymmseg)
2023-12-06 02:43:41
python进程间通信Queue工作过程详解
2021-04-12 01:15:58
Go语言pointer及switch fallthrough实战详解
2024-05-09 14:55:07
在ASP.NET 2.0中操作数据之四:使用ObjectDataSource展现数据
2024-05-13 09:15:45
详解python多线程、锁、event事件机制的简单使用
2022-03-16 19:48:25
Bootstrap Multiselect 常用组件实现代码
2024-05-21 10:14:36
Pytorch实现基于CharRNN的文本分类与生成示例
2023-06-29 03:40:32
MySQL如何保证备份数据的一致性详解
2024-01-19 17:25:45
Python3实现取图片中特定的像素替换指定的颜色示例
2022-08-31 15:33:21
详解RIFF和WAVE音频文件格式
2023-03-30 15:58:13
Python 获取当前所在目录的方法详解
2021-07-19 09:41:14
js中string转int把String类型转化成int类型
2024-05-03 15:30:11
mysql limit 分页的用法及注意要点
2024-01-21 06:44:50
Pytorch 的 LSTM 模型的示例教程
2021-08-01 22:28:41
Thinkphp结合ajaxFileUpload实现ajax异步图片传输全套代码
2023-06-14 04:01:53
Python统计可散列的对象之容器Counter详解
2023-09-23 18:30:50
Python抓取Discuz!用户名脚本代码
2023-06-20 00:34:40
python模仿网页版微信发送消息功能
2022-01-15 00:12:54
Python global全局变量函数详解
2023-02-02 07:00:17
JavaScript获取中英文混合字符串长度的方法示例
2024-05-02 16:27:25