HTML-置换元素】的更多相关文章

转自:http://blog.doyoe.com 先进一个题外话 在面试一个 重构(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方,然后又换另外一个点. 例如:我可能会说,能简单聊聊 行内级元素 和 块级元素 的区别吗. 一般这时,候选人都会说到 行内级元素 不会换新行,而 块级元素 会格式化为块状,即换行.但也有些遗憾的方面(如:混淆了块元素和块级元素,行内元素和行内级元素),当然这看起来似乎不是特别重要. 这时我会继续问,行…
转载: https://blog.csdn.net/kingliguo/article/details/52643594 img是什么元素? 应是行内元素,判断一个元素是行内元素,还是块元素,无非就是看它是否是独占一行.img标签显然没有独占一行,固它是行内元素.这没有问题. 既然img是行内元素,那为什么可以通过CSS设置框高呢? 尽管img是行内元素,但同时它也是置换元素,置换元素一般内置框高属性,因此可以设置其框高. <img src="/i/mouse.jpg" heig…
我们都知道,行内元素不能够定义宽度和高度,但 img,input,button等标签作为行内元素却可以定义宽高,为什么呢?这就牵扯到了置换元素和非置换元素. 置换元素: w3c官方解释:“An element that is outside the scope of the CSS formatter, such as an image,embedded document, or applet” 直译过来就是,不受 css 格式化范围控制的元素,css 渲染模型并不考虑对此内容的渲染.如 img…
margin在块元素.内联元素中的区别 block元素(块元素)大致有:P|H1|H2|H3|H4|H5|H6|UL|OL|PRE| DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS(随着html5标准的推进,一些元素将被废除,而一些新的元素将被引入)注意的是并非所有的block元素的默认display属性都是block,像table这种display:table的元素也是block元素. inli…
置换元素: 1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素.  2. 置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容.  3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容:又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等.  4. HTML中的img.input.tex…
一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,而且元素本身一般拥有固定的尺寸(宽度.高度.宽高比)的元素. 行内级置换元素的宽度 对于行内级非置换元素,高度和宽度设置是不适用,垂直方向上的margin.padding设置也没有用.. 对于行内级置换元素,宽度: 如果宽高或者宽的值为…
置换元素: 一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素. 行内级置换和非置换元素的宽度定义 对于行内级非置换元素,宽度设置是不适用的. 对于行内级置换元素来说,其宽度的设置需遵循以下几点: 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度: 典型的例子是:拥有默认宽高的 input 当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度 若宽度的计算值…
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客…
1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距(i与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?5.CSS强制文本在一行内显示若有多余字符则使用省略号表示6.css中伪类属性修改a标签的样式:7. HTML dl 标签8. 置换元素与不可置换元素9.HTML的Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?10.…
inline-block前端程序猿们肯定不陌生,它是display属性的一个取值. 之所以称之为inline-block.是因为它兼具行内元素(inline-element)和块级元素(block-element)的特征. 块级元素(block elements),来源于CSS盒子模型.块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列. 行内元素,排列方式是水平排列. 行内元素(inline elements)排列方式是水平排列. 行…
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性. 题目的难点在于两点: 1.垂直居中: 2.图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell;…
判断是否为素数? 质数(prime number)又称素数,有无限个.质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数的数称为质数. 合数,数学用语,英文名为Composite number,指自然数中除了能被1和本身整除外,还能被其他数(0除外)整除的数.与之相对的是质数(因数只有1和它本身,如2,3,5,7,11,13等等,也称素数),而1既不属于质数也不属于合数.最小的合数是4. <!DOCTYPE html> <html lang="en">…
一道奇怪的数学题.为了这道题我看了很多题解,到底还是一知半解..整个感觉就是上了一场数学课. HNOI2008 Cards 题目描述 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张红色,Sb张蓝色,Sg张绝色.他又询问有多少种方案,Sun想了一下,又给出了正确答案. 最后小春发明了M种不同的洗牌法,这里他又问Sun有多少种不同的染色方案.两种染色方法相同当且仅当其中一种…
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的margin,将得到20px的空白. 何时应当时用padding: 需要在border内测添加空白时. 空白处需要背景(色)时. 上下相连的两个盒子之间的空白,希望等于两者之和时.如15px + 20px的padding,将得到35px的空白. margin是用来隔开元素与元素的间距:padding…
margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距).他是元素盒模型(box model)的基础属性. (该文章解释是否正确有待商榷,目前我的实验结果为:在默认情况或者div左浮动的情况下:margin-top/margin-left是有效的,margin-right/margin-bottom是无效的:当右浮动时,margin-right/margin-top是有效的.) 一.margin的基本特性 margin 属性包括 margin-top, margin-right, m…
分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/ 你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了…
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性…
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧,烦人的是没有具体或者相当详细的解决方法,希望本文所整理的知识点可以帮助到你 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样…
转自:http://www.blogjava.net/sham2k/articles/179825.html W3C XML Schema 教程 XML SCHEMA教程 本教程是笔者学习W3C的<XML Schema Tutorial>的笔记.如果你对原教程感兴趣,可以浏览http://www.w3schools.com/schema/default.asp. XML Schema是W3C制定的基于XML格式的XML文档结构描述标准.作为一种文档描述语言,通常我们将其简写为XSD(XML S…
在网页布局中,margin和padding绝对会占很重要的作用,但是在实际的项目中,很多新手前端程序员们往往不能正确的使用它们,导致会出现一些不必要的麻烦,下面是我在前几天的项目中遇到的一些问题,以及个人总结的一些方法,仅供参考. 想比margin,padding则是要乖巧的多,几乎没有让你不省心的地方,我们知道,简单的padding语法有四种: eg:1.div1{padding:1px;}  (表示上下左右的内边距都是1PX) 2.div2{padding:1px 2px}; (上下边距是1…
Margin是什么 CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素周围生成额外的空白区.“空白区”通常是指其他元素不能出现且父元素背景可见的区域.——CSS权威指南 我比较喜欢使用“外边距”这个词来解释margin(同理padding可以称之为“内边距”,但是我又恰恰喜欢称呼padding为“补白”或者“留白”),我们可以很清楚的了解到margin的最基本用途就是控制元…
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性.题目的难点在于两点: 1.垂直居中: 2.图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CS…
块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的display属性(行内元素和块级元素) 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 我们最关心的还是display:inl…
GNU scientific library 是一个强大的C,C++数学库.它涉及的面很广,并且代码效率高,接口丰富.正好最近做的一个项目中用到多元高斯分布,就找到了这个库. GNU scientific library下载地址:http://ftpmirror.gnu.org/gsl/ 相应说明文档下载地址: http://www.gnu.org/software/gsl/manual/gsl-ref.ps.gz 编译时需要加上一些后缀: g++ xxx.cpp -lgsl -lgslcbla…
块级元素 <address> information on author <blockquote> long quotation <button> push button <caption> table caption <dd> definition description <del> deleted text <div> generic language/style container <dl> defini…
盒子模型 每个盒子都有4个属性:内容(content).填充(padding).边框(border).边界(margin) 每个属性都有四个部分:上.右.下.左 块级元素 内联元素 块级元素(block element),内联元素(inline element),都是html规范中的概念. 块级元素和内联元素的基本差异:块级元素一般都从新行开始,相邻的块级元素将会在不同行显示:内联元素一般在同一行中显示而不会另起一行 块级元素可以设置 width, height属性,内联元素设置width,  …
最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客…
原文来自海玉的博客:http://www.hicss.net/do-not-tell-me-you-understand-margin/ [个人想法] 1."这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠".我认为把"一个盒子如果没有上补白(padding-top)和上边框(border-top)"中的"和"改为&qu…
input属于置换元素(replaced element),置换元素主要是指img,input,textarea,select,object等这类默认就有CSS格式化外表范围的元素,这些元素的垂直居中,可以直接设置vertical-align:middle;…