行内元素设置float,就相当于块元素了?可以设置padding?
发布网友
发布时间:2022-05-06 15:58
我来回答
共1个回答
热心网友
时间:2022-04-20 14:44
在css中,每一个网页元素均有有个display属性(默认有属性值),用于确定此元素的类型。
在此之前,先介绍一下盒模型,网页需声明DOCTYPE类型(浏览器辨识W3C盒模型)
css盒模式(box model)主要以下5个属性:width、height、padding、border、margin。
tips1:因部分元素在部分浏览器中已设置了外边距和内边距,一般基础样式表中设置*{margin:0;padding:0;};但是注意*效率并不高,一般body,div,dl,dt,dd,ul,li,ol,h1,pre,form,p,input,td,tr,...{margin:0;padding:0;}。
tips2:关于浏览器兼容性,IE5及IE6在怪异模式(即box-sizing:border-box;border以内均为width)中使用非w3c标准,width包含内容+内边距+边框;一般情况下,若考虑此种情况,可建议回避此元素,直接在此元素的父元素和子元素添加内边距或外边距。
tips3:整个网页最大的盒子是<document>,即浏览器本身。
注意:下一章节会记录css3中弹性盒模型(flex box)。
1)行内元素(display:inline;),又称内联元素
特性:对此属性的元素设置宽、高、margin上下值、padding上下值均无效,与其他元素在一行上。
常见如:a、em、b、i、span、strong、small、lable等,准确的来说是行内非替换元素,特殊一点:border可设置,但不会影响文档流,而行高会影响文档流,但会自动忽视border。
2)块级元素(display:block;)
特性:独占一行,宽度继承父元素的宽度,可设置宽高内外边距等。
常见如:div、p、h标签、ul、dd、tr、pre、table等
3)行内块级元素(display:inline-block;)
特性:与其他元素在一行上且可以设置宽高。
常见如:img、input等,准确的来说应该称之为行内替换元素,特殊一点:设置的高度默认为行高,垂直居中。
tips4:display属性值为none时候不会保留原有空间,visible:hidden则会保留,其他属性用的比较少,就不枚举了。
tips5:行内替换元素大概意思是浏览器会根据元素的标签和属性,来决定元素具体的显示内容。
问题:元素有几种方法会转换行块属性?
方法一:最简单的肯定是display:block/inline/inline-block/table等
方法二:行内元素设置float属性后,此元素的display会赋值为block,且拥有浮动特性,原留白也会消失。
方法三:行内元素设置position属性值为absolute或fixed后,此元素的display也会赋值为block。
注意:方法二和方法三转换为块级元素后,这两种方法不会拥有块级元素的特性之一:未继承父元素的宽度。
在CSS 中,用 float 和 position 的区别是什么
2、float:right/left是子块级元素流集合面向父级元素的定位,定位的关键词使用margin/padding。兄弟块元素之间进行相对的定位均基于移动后的新位置进行重新渲染,可以重叠,原位置被清空。二者之中最大的差别就是位置保留。3、同时应用position: absolute和float: left会导致清除浮动无效(position: relative...
HTML中行内元素与块级元素的区别
3.行内元素不可以设置宽高,宽度高度随文本内容的变化而变化,但是可以设置行高(line-height),同时在设置外边距margin上下无效,左右有效,内填充padding上下无效,左右有效;块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制。4.块级元素可以包含行内元素和块级元素,还可以容纳内联元...
行内元素 行内块级元素和块级元素的区别
一、块级元素:block element 每个块级元素默认占一行高度,一行内添加一个块级元素后无法一般无法添加其他元素(float浮动后除外)。两个块级元素连续编辑时,会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素;块级元素一般作为容器出现,用来组织结构,但并不全是如此。有些块级元素,如只...
网页界面元素位置的设置
如果我们要进行Css的布局,那float(浮动)就是最为关键的一个属性了。浮动可以使你的块元素不遵守元素流的布局特性,如果不采用浮动,元素将一个接一个地往下排列。float属性有三个值:left、right和none,后面我们就会使用这些值的。我们将使用事例来说明布局的特性。我们做一个html文件,为后面的讲解...
网页字体怎样设置
首先可以用个容器来包住字体,给宽和高。1. 在块元素里面的可以用text-align:center、left、right 2.可以用float 3.可以padding 4.先在父级元素设置position:relative;再在你需要移动的容器里设置position:absolute;top、left、right、bottom这些方向该多少px就多少px例如:body{width:900px;height...
float元素为什么不能指定margin和padding呢?能举例具体说明下吗?
另外指定元素时尽量使用em而不是px做单位。7. float元素不能指定margin和padding等属性 IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。8. float元素的宽度之和要...
行内元素可以设置padding吗
margin span{ padding:200px;} 影响左右,不影响上下 ,span包裹的文字左右位置改变,上下位置不变,但背景色会覆盖上面元素的内容 行内元素(inline-block)的padding左右有效 ,但是由于设置padding上下不占页面空间,无法显示效果,所以无效。其margin-top和padding-bottom上下会合并,所以不建议使用。
浮动以及浮动的用处
通常我们的元素会分成块级元素和行内元素和行内块元素,他们之间是可以使用display相互转化的块级元素 可以对一个元素使用display:block属性将它转换成块级元素 独占一整行,不能跟其它的元素并排 可以设置宽和高(如果没有设置宽度的话,默认是跟父级宽度一样宽) 可以设置margin和padding 常见的块级元素有,、、等行...
在HTML中的行内元素和块状元素有哪些?以及区别
块级元素重新行开端停止接着一个断行。2、块级元素能够包括行内元素和块级元素。行内元素不克不及包括块级元素。3、行内元素与块级元素属性的分歧,主如果盒模子属性上。行内元素设置width有效,height有效(能够设置line-height),margin高低有效,padding高低有效。4、块级元素能够包括行内元素和块级...
css中的float: left和display: block有什么区别?
首先,你上面的语法#mainnav *{margin:0;padding:0;}中的意思是将ID为#mainnav下的所有后代元素应用样式,用“*”一般是针对IE6及以下版本的!其次,a 元素是是一个行内元素,display:block;就是将他强行转化为块级元素。行内元素没有没有上下填充,也就是说你设置padding-top padding-bottom将...