CSS中的相关概念
CSS的几个概念:
包括块:一个元素的“布局上下文”。对于正常的HTML文本流中的一个元素,包括块由近期的块级祖先框、表单元格或行内块祖先框的内容边界(content
edge)构成。
考虑例如以下标记
<body>
<div>
<p>This is a paragraph.</p>
</div>
</body>
p元素的包括块是div元素,由于作为块元素、表单元格或行内块元素,这是近期的祖先元素。类似地div的包括块是body。
非替换元素:假设元素的内容包括在文档中,则称为替换元素。比如:假设一个段落的文本内容都放在该元素本省内。这个段落就是非替换元素。
替换元素:这是指作为其它内容占位符的一个元素。替换元素的一个经典样例就是img元素。它仅仅是指向一个图像文件。这个文件将被插入到文档流中该img元素本身所在的位置。大多数表单元素也能够替换(比如<input
type="radio">)。
块级元素:指段落、标题或div之类的元素。这些元素在正常流中时。会在其框和框主键生成‘换行“,所以处于正常流中的块级元素会垂直摆放。
通过声明display:block。能够让元素生成块级框。
行内元素:这是指strong或span之类的元素。这些元素不会在之前或之后生成”行分隔符“,他们是块级元素的后代。通过声明display:inline。能够让元素生成一个行内框。
根元素:位于文档树顶端的元素。在HTML文档中,就是HTML元素。
CSS中的相关概念的更多相关文章
- css中的线及vertical-align
行内元素格式化顺序: 相关概念: leading(行间距):指填充在两行文字间的铅条,等于line-height 和 font-size之差,其中一半leading加到文字上方,另一半leading ...
- css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
- CSS中一些常见的兼容性问题
CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- css中的负边距
css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...
随机推荐
- C/C++ Quick Sort Algorithm
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50255069 快速排序算法,由C.A. ...
- maven这些工具负责创建项目,然后maven负责打包好war包扔进tomcat容器,tomcat容器接受的只是jar包
maven这些工具负责创建项目,然后maven负责打包好war包扔进tomcat容器,tomcat容器接受的只是jar包 2.tomcat不管你什么编译的,也不管你开发工具是什么.Tomcat只接受w ...
- php学习之道:php empty()和isset()的差别
在使用 php 编写页面程序时,我常常使用变量处理函数推断 php 页面尾部參数的某个变量值是否为空,開始的时候我习惯了使用 empty() 函数,却发现了一些问题,因此改用 isset() 函数,问 ...
- scikit-learn:3.5. Validation curves: plotting scores to evaluate models
參考:http://scikit-learn.org/stable/modules/learning_curve.html estimator's generalization error can b ...
- Codeforces Round #261 (Div. 2)459A. Pashmak and Garden(数学题)
题目链接:http://codeforces.com/problemset/problem/459/A A. Pashmak and Garden time limit per test 1 seco ...
- 基于FPGA的跨时钟域信号处理——专用握手信号
在逻辑设计领域,只涉及单个时钟域的设计并不多.尤其对于一些复杂的应用,FPGA往往需要和多个时钟域的信号进行通信.异步时钟域所涉及的两个时钟之间可能存在相位差,也可能没有任何频率关系,即通常所说的不同 ...
- JAVA设计模式之【策略模式】
策略模式 定义一些独立的类来封装不同的算法 类似于common方法或者引用类 角色 环境类Context 抽象策略Strategy 具体策略ConcreteStrategy 重构伴随着设计模式 重构类 ...
- nyoj--301--递推求值(经典矩阵运算)
递推求值 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 给你一个递推公式: f(x)=a*f(x-2)+b*f(x-1)+c 并给你f(1),f(2)的值,请求出f(n ...
- gpg 的使用
GPG入门教程 GpG使用指南 1. 安装 源码编译安装:源码下载地址 ./configure make make install 直接安装编译好的二进制文件 # Debian / Ubuntu 环境 ...
- vue 如何实现在函数中触发路由跳转
this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...