css整理-04 基本视觉格式化
基本框
- 假定每一个元素都会生成一个火多个矩形框,为元素框
- 元素框中心有一个内容区,周围有内边距,边距和外边距
- 内容的背景会应用到内边距,外边距是透明的,可以看到父元素的背景
- 内边距不能是负值,外边距可以
包含块
- 每个元素相对于其包含块摆放,包含块就是一个元素的布局上下文
- 包含块是由最近的块级祖先框,表单元格火行内祖先框的内容边界构成
- 行内元素的摆放方式不直接依赖于包含块
水平格式化
使用auto
- 如果设置
width,margin-left,margin-right
中两个值为特定值,其余一个为auto
;则设定auto
的值会确定所需的长度使元素框的宽度等于父元素的长度 - 如果这三个值都为特定值,那么总会将
margin-right
强制为auto
- 如果
margin-left,margin-right
设置为auto
就会居中 - 如果将一个外边距和
width
设置为auto
,另一个设置为具体值,那么设置为auto
的外边距会成0,width
会设置为所需的值 - 三个都设置为0,等价于默认
负外边框
- 根据等式可能会超出父元素范围
百分数
- 边框的宽度不能使百分数
替换元素
- 非替换元素的所有规则同样适用于替换元素
- 除了:如果
width
设置为auto
,元素的宽度则是内容的固有宽度
垂直格式化
- 一个元素的默认高度由其内容决定
垂直属性
- 如果正常流中块元素
margin-top, margin-bottom
设置为auto
,会自动重置为0; - 合并垂直外边距
- 给
margin-top, margin-bottom
设置百分数,将会根据body
计算 - 负值的
margin
会将内容区上拉或下拉
列表项
ul
默认有个padding-left
的效果- 上面的情况下可以对
ul
或li
设置list-style-position: inside;
将li
的标志放在里面
行内元素
height,width,margin-top,margin-bottom
无效,其他有效
替换元素
- 替换元素具有行内元素的特性,但是
width,padding,border,margin
都是有效的 - 相当于
inline-block
改变元素显示
display
改变的只是元素的显示角色而不是本质;如行内元素可能是一个块元素的后代,反过来就不行
css整理-04 基本视觉格式化的更多相关文章
- css权威指南-基本视觉格式化(水平与垂直)
1.基本概念 (1)正常流:是指西方语言文本从左向右,从上向下显示.如果要让一个元素不在正常流中国,唯一的办法 就是使之成为浮动或定位元素. ( ...
- CSS权威指南 - 基本视觉格式化 4
改变元素显示 没有讨论与表格相关的.列表list-item的值.之后讨论. 改变显示角色 显示为块级元素 将一串链接(行内元素)改变垂直放置,若有如下一连串的链接: <div id=" ...
- CSS权威指南 - 基础视觉格式化 2
行内元素 em a 非替换元素 img 替换元素 两者在内联内容处理方式不一样. inline有时候被翻译成内联,比如inline content,有时候被翻译成行内 inline box. 行布局 ...
- CSS权威指南 - 基础视觉格式化 3
行内替换元素 替换元素比如图片的高度比line-height大,并不会影响整个文字段落的line-height,会让有图片那一行框的高度可以容纳这个图片. 这个图片依然有一个line-height,和 ...
- CSS权威指南 - 基本视觉格式化 1
定位 定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置 相对就是相对于默认位置的偏移.原来的static定位位置依然 ...
- CSS2.1SPEC:视觉格式化模型之包含块
原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且 ...
- 大前端学习笔记整理【二】CSS视觉格式化模型
1. 概念 在视觉格式化模型中,文档树中的每个元素都将会根据盒模型产生零到多个盒子.这些盒子的布局由如下因素决定: 盒子的尺寸和类型 定位策略(正常文档流,浮动或者绝对定位) 和文档树中其他元素的关系 ...
- CSS视觉格式化模型
CSS视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.这是CSS 2.1的一个基础概念.视觉格式化模型根据CSS盒模型为文档的每个元素生成0 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
随机推荐
- 【STL】next_permutation的原理和使用
1.碰到next_permutation(permutation:序列的意思) 今天在TC上碰到一道简单题(SRM531 - Division Two - Level One),是求给定数组不按升序排 ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- 20145213《Java程序设计》第十周学习总结
20145213<Java程序设计>第十周学习总结 教材学习总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接 ...
- 自定义Button 的图片设置不显示问题。
如果你是自定义button 那么你设置图片就要用 button.imageView.image = [UIImage imageName:@""]; 如果你是给系统原生的butt ...
- GoF23种设计模式
创建型模式 1.ABSTRACT FACTORY-追MM少不了请吃饭了,麦当劳的套餐和肯德基的套餐都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说"两个B ...
- 启动Eclipse弹出:Failed to load JavaHL Library 错误框的解决办法
一.问题背景描述: eclipse安装完svn插件以后,在启动时出现:Failed to load JavaHL Library. These are the errors that were en ...
- [Android Pro] static 和 Volatile 的区别
reference to : http://blog.sina.com.cn/s/blog_4e1e357d0101i486.html static也是各个业务方可以去全局修改: volatile是处 ...
- [Usaco2015 Feb]Censoring(bzoj 3942)
Description Farmer John has purchased a subscription to Good Hooveskeeping magazine for his cows, so ...
- hdu2030 汉字统计
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2030 解题思路:主要考察汉字的编码方式, 汉字机内码在计算机的表达方式的描述是,使用二个字节,汉字的每 ...
- ASP.NET MVCでResponse Headerのサーバーバージョンをどうやって隠しますか?
本来是发布在客户的Wiki上的,所以用日语写. ---------------------------------------------------------------------------- ...