css块元素,内联元素,内联块元素

一.块元素,内联元素,内联块元素
1.块元素:
也称行元素, 布局中常用的标签如:div,p, h1-h6,ul,li...

支持全部的样式

可以设置元素的大小,并且元素是独占一行显示,如果没有设置宽度,默认的宽为父级100%盒子占据一行

2.内联元素:
也称行内元素,布局中常用的标签如:a,span,b,u,i...

(1)支持部分样式(不支持宽,高 margin上下,padding上下)

(2)宽高由内容决定

(3)盒子并在一行

(4)代码换行,盒子之间会产生间距

(5)不可设置元素的大小,但是元素并在一行显示,先写的先排列,后写的后排列

(6)子元素是内联元素,父元素可以用text-align 属性设置子元素水平对齐方式,用line-height属性设置垂直对齐方式

3.解决内联元素的间隙方法:
(1)设置margin-left为负值

(2)去掉内联元素之间的换行

(3)将内联元素的父级设置font-size为0,内联元素自身再设置font-size

4.内联块元素:
也称行内块元素,是新增的元素类型,img和input元素的行为类型这种元素,但是也归类于内联元素,可以用display属性将块元素或内联元素转化成这种元素

它们的布局行为:

(1)支持全部样式

(2) 如果没有设置宽高,宽高由内容决定

(3)盒子并在一行

(4)代码换行,盒子会产生间距

(5)子元素是内联块元素,父元素可以用text-align设置子元素水平对齐方式,用line-height属性设置子元素垂直对齐方式

5.内联块元素之间的转换和使用:
通过display属性来互相转化,块元素用的较多,经常把内联元素转化为块元素,少量转化为内联块元素,要使用内联元素时,直接使用内联元素,而不用块元素转化.

display 属性: none 元素隐藏且不占位置

inline 元素以内联元素显示

block 元素以块元素显示

inline-block 元素以内联块元素显示

二.元素溢出:当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式
设置的方法是通过overflow属性来设置overflow属性:

(1)visibke 默认值内容不会被修改,会呈现在元素框之外

(2)hidden 内容会被裁剪,并且其余内容是不可简单,超出父元素内容被隐藏 (此属性还有清除浮动,清除margin-top塌陷的功能)

(3)scroll 内容会被修改,则浏览器会显示滚动条以便查看其余的内容内容无论是否超出元素元素框都会添加滚动条

overflow-x:scroll 设置水平滚动条 overflow-y:scroll 设置垂直滚动条

(4)auto 内容被修改,则浏览器会显示滚动条以便查看其余的内容

(5) inherit 规定应该从父元素继承overflow属性的值

三.浮动:
1.文档流:
指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排,后写的后排,每个盒子都占据自己的位置.

2. 浮动特性:
(1)浮动元素有左浮动(float:left)和右浮动(float:right),

(2)浮动的元素会向左或向右浮动,碰到父级元素边界,浮动元素,未浮动的元素才停下来

(3)相邻浮动的块元素可以并在一行,超出父级宽度就换行

(4)浮动让行内元素或块元素自动转化为行内块元素

(5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字饶图的效果

(6)父元素内整体浮动的元素无法撑开父元素,需要清除浮动

(7)浮动元素之间没有垂直 margin的合并

3.清除浮动:
(1)父级上增加属性 overflow:hidden

(2)在最后一个子元素的后面加一个空的div,给样式属性clear:both

(3)使用成熟的清除浮动样式类 .clearfix:after,.clearfix:before {

content:"";

disply:table;}

四.定位:使用CSS的position属性来设置元素的定位类型
1.postion的设置项如下:
(1)relative:生成相对定位元素,元素本身相对于在html文档流中位置的进行偏移

(2)absolute: 生成绝对定位元素,该元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对于上一个设置了相对于body元素进行定位.(子绝父相)

(3)fixed: 生成固定定位元素,匀速脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流动上方,相对于浏览器窗口进行定位

(4)static:默认值,没有定位,元素出现在正常的文档流中,相当于取消定位属性或者不设置定位属性

(5)inherit :从父元素继承position属性值

2.定位元素特性:
绝对定位和固定定位的块元素和行内元素会自动转化为行内元素

3.定位元素层级:
定位元素时浮动的正常的文档流之上的,可以用z-index属性设置元素的层级取值为:0-999 值越大层级越大

4.典型定位布局 :
(1)固定在顶部的菜单

(2)水平垂直居中的弹框

(3)哭的的侧边的工具栏

(4)固定在底部的按钮

css块元素,内联元素,内联块元素相关推荐

CSS网页布局心得（样式优先级，块级元素，内联元素，display，position，float）
文章涉及的知识点:CSS,样式优先级,块级元素,内联元素,display,position,float 使用top;right; bottom;right时,要注意是对于哪个元素进行定位,要保证定位元 ...
内连级元素有哪些_内联元素和块级元素
一.行内元素与块级元素的基本概念 1. 块元素 (block element) : 块级元素生成一个元素框, (默认地)它会填充其父级元素的内容,旁边不能有其他元素.换句话说,他在元素框之前和之后生 ...
html能插入背景的行级元素,Html元素类型：块级元素、行内元素（内联元素）和行内块级元素...
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素.事实上,我以前用的时候只 ...
html块状元素和内联元素_HTML中的内联元素和块元素-解释
html块状元素和内联元素块和内联元素 (Block and Inline Elements) Let's understand block and inline elements using th ...
CSS显示：内联vs内联块[重复]
本文翻译自:CSS display: inline vs inline-block [duplicate] Possible Duplicate: 可能重复: What is the differen ...
内连级元素有哪些_HTML内联元素有哪些？
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,而display属性为inline的元素就是行内元素. 内联元素(inl ...
块状元素、内联元素(又叫行内元素)和内联块状元素
块元素在页面中以区域块的形式出现,每个块元素都会独自占据一整行或多整行,其中<div>标记为最典型的块元素.内联元素特点是不必在新的一行开始,同时,也不强迫其他的元素在新的一行显示.一个行 ...
html外联内联,HTML内联元素
用于标记段落里的文本和其他内容组的元素种类很多,本文将这些文本级元素进行简单分类,便于整理和记忆通用容器元素是短语内容的通用行内容器,并没有任何特殊语义.可以使用它来编组元素以达到某种样式意图(通 ...
CSS之块、行内、行内块元素
块元素独占一行如h1-h6.p.div.ul.ol.li等: 宽高内外边距可以调: 宽度默认是父级宽度100%: 都是容器盒子,里面可以放行内或块级元素. 注意点:文字类元素如p. ...
css变成块级元素_探讨行内元素转换为块级元素_html/css_WEB-ITnose
行内元素和块级元素对于前端来说是一个很重要的概念.在CSS中,只有块级元素有物理属性,而元素则有三种形态: 1. 块级元素:有物理属性,width,height写值起作用,而且要占据一行. 2. 行内 ...

css块元素,内联元素,内联块元素

css块元素,内联元素,内联块元素相关推荐

最新文章

热门文章