CSS盒模型（2）
作者：糖伴西红柿 来源：前端观察 发布时间：2009-06-09 14:23:00
标签：前端,模型,css
无宽度的绝对定位盒子
未设定宽度的绝对定位的盒子的表现有点不一样。它们的宽度只需要适合它们所包含的内容即可。因此，如果盒中只有一个单词，盒子就会像那个词的表现一样宽。如果变成两个词，盒子的宽度也会相应增加。这种情况会持续到盒子的宽度达到父元素宽度的 100％（最近的相对定位的父元素或者浏览器窗口），然后就会折行。
对盒子来说，垂直扩展以适应包含的内容是很自然的。值得奇怪的是，不仅仅是不同平台下的文本表现不同，不同的浏览器处理这个问题时，也有很多怪癖。
无宽度浮动盒子
同无宽度的绝对定位盒子的表现一样。盒子的宽度只需要扩展到所包含内容的宽度，直到其父元素的宽度（其父元素不必是相对定位的）。由于这些无宽度盒子的脆弱性，我们要学到的是关键任务模式的时候它们是不能依赖的，像总体页面布局中。如果浮动一列作为侧边栏使用，并指望那些内部元素（如图片）来负责包含它的宽度，你就是在自找麻烦。
内联元素也是盒子
我们这里一直把重点放在块级元素的盒子上。很容易就可以把块级元素想象为盒子，但是内联元素也是盒子。可以把他们想象为非常长而窄的长方形，它们也可以像其它盒子一样有 margin, padding he border
折行使它看起来有些不好理解。如上所示的左 margin 把盒子推向右边，但是只在第一行有效，因为那是盒子的起点。padding 正常的应用在文本的上部或下部，当折行时它会忽略上面行的 padding 并且以行高(line-height)要求的位置作为起点。透明背景是为了让效果看起来更清楚。
亲眼目睹一下
想看看组成页面的每个单独的“盒子”吗？试着把这行代码暂时放入样式表：
* {
border: 1px solid red !important;
}
0
投稿猜你喜欢
CentOS7安装mysql笔记1 CentOS7默认安装mariadb数据库，卸载mariadb。rpm -qa|grep mariadb- 几个特殊的函数（待补充）python是支持多种范型的语言，可以进行所谓函数式编程，其突出体现在有这么几个函数： filter、map、red
- SQL触发器实例1 定义： 何为触发器？在SQL Server里面也就是对某一个表的一定的操作，触发某种条件，从而执行的一段程序。触发器是一
- bootstrap前端开发工具栅格系统版心 .container栅格布局 (一行分为12格，响应式布局).row.col-md-12.col
- 安装Python环境ANACONDA是一个Python的发行版本，包含了400多个Python最常用的库，其中就包括了数据分析中需要经常使用
- Batch Normalization和Dropout是深度学习模型中常用的结构。但BN和dropout在训练和测试时使用却不相同。Batc
- asp使用SQL语句，查询数据库中的第10-20条记录的l方法，两种sql语句写法如下：1、select top 10 * from tab
- 简介使用的核心模块是python标准库中的zipfile模块。这个模块可以实现zip文件的各种功能，具体可以查看官方参考文档。这里的暴力破解
- 1.简述：xlrd是读取excel表格数据；支持 xlsx和xls 格式的excel表格；三方模块安装方式：pip3 install xlr
- 在上章节讲述到图像特征检测与匹配 ，本章节是讲述目标检测与识别。后者是在前者的基础上进一步完善。在本章中，我们使用HOG算法，HOG和SIF
- 摘要With the continuous development of time series prediction, Transform
- Anaconda是一个开源的Python发行版本，包括Conda、Python以及一大堆安装好的工具包，比如：numpy、pandas等。其
- 目录精确调整工作表的行高和列宽批量更改多个工作簿的数据格式批量更改工作簿的外观格式设置字体格式修改字体为宋体修改字号字体加粗字体颜色单元格填
- 需求描述：在公司老旧系统里，数据库表很多，但是在设计之初并没有建立好关系图，导致新人刚入职,面对N个库，每个库几百张表，很不方便。例如：公司
- 前言相当不错的 Javascript 编程风格规范，建议大家采用此规范编写 Javascript。原文链接： http://dojotool
- 代码和说明如下：<％Const ForReading = 1 &nbs
- 学过 Python 的朋友应该都知道 f-strings 是用来非常方便的格式化输出的，觉得它的使用方法无外乎就是 print(f'
- 我们都知道float:left和float:right，但是否想过float:center呢？居中浮动。。。<div id="
- 但是用IN的SQL性能总是比较低的，从SQL执行的步骤来分析用IN的SQL与不用IN的SQL有以下区别： SQL试图将其转换成多个表的连接，
- 一、lambda关键字的使用方法func=lambda x:x+1print(func(1))#2print(func(2))#3#以上la
