我们都知道,行内元素不能够定义宽度和高度,但 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…

转自:http://blog.doyoe.com 先进一个题外话 在面试一个 重构(各大公司的叫法可能不太一样)时,我喜欢从一个点开始问,然后一直延展下去成为一条线,甚至是一个面,直到问到不会的地方,然后又换另外一个点. 例如:我可能会说,能简单聊聊 行内级元素 和 块级元素 的区别吗. 一般这时,候选人都会说到 行内级元素 不会换新行,而 块级元素 会格式化为块状,即换行.但也有些遗憾的方面(如:混淆了块元素和块级元素,行内元素和行内级元素),当然这看起来似乎不是特别重要. 这时我会继续问,行…

置换元素: 1. 一个内容 不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素.  2. 置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容.  3. 例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容:又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等.  4. HTML中的img.input.tex…

一个来自面试的坑. 面试的时候考官先问了行内元素和块级元素的区别,这个不难理解.然后一脚就踩进了,置换元素的坑.例如img就是行内置换元素,这种行内元素是可以设置宽高的. 什么是置换元素 一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,而且元素本身一般拥有固定的尺寸(宽度.高度.宽高比)的元素. 行内级置换元素的宽度 对于行内级非置换元素,高度和宽度设置是不适用,垂直方向上的margin.padding设置也没有用.. 对于行内级置换元素,宽度: 如果宽高或者宽的值为…

5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为 三种类型:块状元素,内联元素,行内块元素.可变元素 1.块状元素(block element) A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6…

1.元素不设宽度第一种情况:元素为文档流中元素<!-- 父元素宽度为100px --><div style="width:100px;">     <div style="background:orange;">dd</div></div> <!-- 父元素宽度为200px --><div style="width:200px;">     <div sty…

1.常见的块级元素 内联元素 div -最常用的块级元素 dl - 和dt-dd 搭配使用的块级元素 form - 交互表单 h1 -h6- 大标题 hr - 水平分隔线 ol – 有序列表 p - 段落 ul - 无序列表 fieldset - 表单字段集 colgroup-col - 表单列分组元素 table-tr-td 表格及行-单元格 pre - 格式化文本 a –超链接(锚点) br - 换行 i - 斜体 em - 强调 img - 图片 input - 输入框 label - 表…

1.html+css经典布局 ①左列定宽,右列自适应 .left{width:100px;float:left;} .right{overflow:hidden;} ②两列顶宽,中栏自适应 .left{width:100px;float:left;} .right{width:100px;float:right;} .center{width:100%;margin:0 100px;} 2.px.em.rem.pt的区别 ①px是像素,用px设置字体大小时,比较稳定和准确,但是这种方法存在一个问…

CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnblogs.com/xiaxiangx/ 1. CSS样式 CSS( Cascading Style Sheet) CSS3由多个独立的模块构成, 原因是各模块可以独立演进, 这样做的缺点是" CSS3规范 "不能涵盖一切 CSS两种形式: 置换元素和非置换元素, 词如其名, 置换元素表示内…

一.元素类型 1.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素.内联元素.行内块元素.可变元素 2.块状元素 1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,h1~h6,p,form,hr,colgroup,col,table,tr,td等: 2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象:默认情况下,块状元素会按…

概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素). block元素通常被现实为独立的一块,会占据一整行的空间:而inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 常见的block-level elements (块级元素) 和 inline elements (内联元素) 常见的块级元素有 div, h1 ~ h6,p,form…

1.常见的块级元素  内联元素   div -最常用的块级元素      dl - 和dt-dd 搭配使用的块级元素      form - 交互表单      h1 -h6- 大标题      hr - 水平分隔线      ol – 有序列表      p - 段落      ul - 无序列表      fieldset - 表单字段集      colgroup-col - 表单列分组元素      table-tr-td  表格及行-单元格      pre - 格式化文本      …

我们都知道,行内元素不能够定义宽度和高度,但 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 渲染模型并不考虑对此内容的渲染.…

一.html元素可分为三大类:块元素.内联元素.可变元素 1.块元素: 常见块状元素:div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption 块状元素特点: (a)以块的形式显示为一个矩形区域: (b)块状元素独占一行,自上而下排列: (c)块状元素可以定义自己的宽度和高度,以及盒模型中的margin,padding,border: (d)块状元素可以作为一个容器包含其他的块状元素或内联元素. 2.内联元素(行内元素)…

置换元素: 一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素. 行内级置换和非置换元素的宽度定义 对于行内级非置换元素,宽度设置是不适用的. 对于行内级置换元素来说,其宽度的设置需遵循以下几点: 若宽高的计算值都为 auto 且元素有固有宽度,则 width 的使用值为该固有宽度: 典型的例子是:拥有默认宽高的 input 当宽度的计算值为auto时,则宽度使用值为其默认的固有宽度 若宽度的计算值…

转载: https://blog.csdn.net/kingliguo/article/details/52643594 img是什么元素? 应是行内元素,判断一个元素是行内元素,还是块元素,无非就是看它是否是独占一行.img标签显然没有独占一行,固它是行内元素.这没有问题. 既然img是行内元素,那为什么可以通过CSS设置框高呢? 尽管img是行内元素,但同时它也是置换元素,置换元素一般内置框高属性,因此可以设置其框高. <img src="/i/mouse.jpg" heig…

写在前面:        众所周知CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),在前期的界面样式设计时,需要书写大量看似没有逻辑的代码,不方便维护及扩展,也不利于重复调用,尤其对于一些UI设计师等非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码.为了方便前端开发的工作量,sass和less应势而生.. LESS的介绍 第一个,less是单独的一种文件,可以理解为css的升级版,完全按照css写也没问题,不过它提供了很多便利的东…

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着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.…

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;…

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时我们最常用的css属性我们并非十分了解.介于此我打算写下这篇文章,一来是自己工作中的总结,也是对自己知识的一次梳理. Margin是什么 CSS 边距属性…

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客…

CSS十问——好奇心+刨根问底=CSSer   最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览…

css内边距与外边距的区别 (2012-05-02 13:54:54) 转载▼ 标签: 杂谈 分类: css 本文也是网上看了后收藏的,忘了原地址(以后收藏文章得注意) 你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道…

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客…

CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE10以上不支持. 如果你安装了多个IE,条件注释将会以最高版本的IE为标准. 条件注释的基本结构和HTML的注释(<!– –>)是一样的.因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释…

1.权重问题 内联样式表 > id选择符 > class选择符 > 类型选择符(所有html标签名称) 内联样式表 > 内部样式表.外部样式表 内部样式表.外部样式表的权重与书写顺序有关,后书写的权重高 注:虽然后书写的权重高,但是属性依旧被执行,只是相同属性会被覆盖,不同属性仍然显示       !important权重最高      开发者样式 > 读者样式 > 浏览器样式      !!!当出现权重的时候就会出现层叠性 2.用css画三角 a.将盒子的宽高设为0p…

在网上看到的一篇文章,说的比较全面.原文地址:http://www.poluoluo.com/jzxy/201206/167007.html 你真的了解margin吗? 你知道margin有什么特性吗? 你知道什么是垂直外边距合并? margin在块元素.内联元素中的区别? 什么时候该用padding而不是margin? 你知道负margin吗? 你知道负margin在实际工作中的用途吗? 常见的浏览器下margin出现的bug有哪些?…… 写css,你少不了与margin打交道,而对于这个平时…

好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素1.块状元素(block element) A)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,li,(h1-h6),p,form,hr,…

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客…