【3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922】的更多相关文章

css position 和 块级/行内元素解释

一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留. absolute:元素框从文档流完全删除,并相对于其包含块定位.包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样.元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框. fixe…

块级&行内元素总结

一.块级元素与行内元素的区别 块级元素与行内元素有几个关键区别: 格式 默认情况下: 块级元素会新起一行: 行内元素不会以新行开始. 内容模型 一般块级元素可以包含行内元素和其他块级元素.这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构. 一般情况下,行内元素只能包含数据和其他行内元素. 二.块级元素列表 1. 非h5块级元素 页面区域划分元素 div p h1~h6 列表相关元素 ul ol li 注意 li是mdn文档中明确说明的块级元素 dl dt dd 表格…

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素…

CSS中的行内元素和块级元素

我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div 标签的默认 display 属性是 block,我们通常称这类元素为块级元素:span 标签的默认 display 属性是 inline,我们通常称这类元素为行内元素 我们可以看到块级元素总是独占一行,从上到下显示,行内元素则是从左到右显示.这是因为块级元素前后有换行符,而行内元素前后没有换行符.除…

css中的行内元素和块级元素总结

块级元素 <address>,  <button>,  <caption>,  <dd>,  <del>,  <div>,  <dl>,  <dt>,  <form>,  <h1>--<h6>,  <iframe>,  <li> <object>,  <ol>,  <p>,  <table>,  <…

块级&行内（内联）元素

行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的文本方向 <big>大号字体加粗 <br>换行 <cite>引用进行定义 <code>定义计算机代码文本 <dfn>定义一个定义项目 <em>定义为强调的内容 <i>斜体文本效果 <img>向网页中嵌入一幅图像 &…

CSS - flex使行内元素快速对齐

div{ display:flex; alian-items:center; //使垂直对齐 justify-content:center //使水平对齐 }…

css笔记12：块元素和行内元素

1.概念: 行内元素:又叫内联元素,内联元素只能容纳文本或者其他内联元素,常见的内联元素有<span><a> 块元素:块元素一般都是从新行开始,可容纳文本,其他内联元素和其他块元素,即使内容不能占满一行,块元素也要把整行占满.常见的块元素<div><p> 2.代码演示1: (1)exam.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "…

CSS块元素、行内元素、行内块元素的转换

一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: 500px; */ background-color: red; } p{ display: inline-block; } span{ display: block; width: 400px; height: 300px; background-color: blue; } </style>…

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float…