html: <a href="">登录</a><a href="">注册</a> css: a + a:before { content: ""; font-size: 0; padding: 10px 3px 1px; margin-left: 6px; border-left: 1px solid gray; }…

一.实现分隔线的方法(未理解:不是说span元素垂直方向设置怕padding不影响吗?) html: <div> 登陆<span></span>注册 </div> css: .span{ padding: 12px 6px 1px;/*这里通过改变第一个参数和第三个参数可以调节风隔线的的上下高度,分别是padding-top和padding-bottom*/ margin-left:12px; border-left:2px solid #000; ; }…

首先区分一下3类元素: 1)块级元素:div.p等这一类具有宽高属性,且单独占一行的元素: 2)占位元素:img.input这一类具有宽高属性.紧随上一个元素不单独占一行的元素: 3)内联元素:span.strong这一类不具有宽高属性,且紧随上一个元素不单独占一行的元素. 本文主要讨论内联元素的padding.margin属性的存在与否和表现形式. 直接看代码: <div id="wrap"> <span>啊啊啊啊啊啊</span> <spa…

(1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(block-like elements),inline元素即是以”行”表现的元素(character level elements and text strings).二者表现的主要差别在于,在页面文档中block元素另起一行开始,并独占一行.inline元素则同其他inline元素共处一行. block元…

        内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px}   与     span{width:100px ; height:100px}   表现效果相同,由此可见内联元素不可以设置高度和宽度 2.内联元素可以设置水平方向的内边距padding-left或padding-right span{padding-left:20px ; padding-right:200px} 3.内联元素可以设置垂直…

1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上下扩展(对比一下,块状元素设置margin或padding时,内容盒子会移动,内联元素设置左右margin和左右padding时,内容盒子也会移动),设置背景色会看到效果,但是此元素下面的块状元素在计算边距时并不考虑这个上下padding,仍然以这个内联非替换元素的内容盒子的下边作为起点.简单示例一…

1.块级元素 margin:跟标准一样,设置该块级元素边框与同级兄弟元素或者父元素的距离,俗称外边距. padding:先延伸边框(也就是优先改变元素尺寸而不动元素中内容的位置),当边框碰到父元素的边界时,才向相反方向延伸,这时会改变该元素中内容的位置 padding演示: 原样 html: <div>块级元素</div> css: div{ width:100px; border:1px solid #000; } 添加padding后: div{ width:100px; bo…

CSS的内联元素和块级元素 块级元素<h1>-<h6>.p.dt是不可以内联块级元素的 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元…

首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元素时 ,它定义了该元素中基线之间的最小距离而不是最大距离. line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部. 可以包含这些内容的最小框就是行框line box.[来源] 二 框模型 继续看图 上图代表了CSS中…

http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性: 和相邻的内联元素在同一行; 宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边…