Study 8 —— 行块元素及定位

行&块元素
display:inline;
display:block;
display:inline-block;

盒模型
padding[内边距]
padding: 上下内边距 左右内边距;
padding: 上部内边距 右边内边距 下部内边距 默认与右边内边距相同;
padding: 上部内边距 右边内边距 下部内边距 左边内边距;

定位
1.水平位置的两个元素
它们之间的外边距=左边的margin-right+右边的margin-left
2.垂直方向的两个元素
它们之间的外边距=两者之中较大的外边距
3.包含关系的两个元素
它们之间的外边距=里面元素各个方向的margin+外部元素对应的各个方向的padding值

浮动

定位&层级
当一个元素(e)设定了定位
绝对定位:position:absolute;
如果它的父元素有设置定位,那么e的坐标就是相当于父元素的左上角,进行定位;如果它的父元素没有设置定位,那么e元素继续往上寻找爷爷辈;如果发现,爷爷辈有,就同样的也是相当于爷爷辈的左上角。。。

相对定位:position:relative;

层级:
z-index:数值 (数值越大,层级越高)

时间: 2024-10-01 05:09:24

Study 8 —— 行块元素及定位的相关文章

前端面试题-行内元素和块级元素

一.行内元素 一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. 三.行内元素示例 HTML CSS Example 四.块级元素示例 HTML CSS Example 五.行内元素的特点 5.1 和其他元素都在同一行上 5.2 高,行高及外边距和内边距不可改变 5.3 宽度就是它的文字或图片的宽度,不可改变 5.4 行内元素只能容纳文本或者其他行内元素 5.5 设置行内

1 background(复合属性)与font(复合属性) 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色  图片的链接  是否平铺  背景位置 是否滚动.(可以随意调动或省略) Font: 粗度 字体风格 字体大小/行高 字体样式 字体大小和样式不可省略 2 行内块的间距问题 行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动 给父盒子设置一个高度     Clear: both      Overflow

2015-09-22 第四节课 CSS块级元素 行内元素 浮动 盒子模型 绝对定位、相当定位和固定定位

常见的块级元素和行内元素 一.块级元素 1.块级元素的特点: (1).默认显示在父标签的左上角. (2).块级元素默认占满一行(沾满整个文档流). 2.常见的块级元素: <p>.<h1-h6>.<ulli>.<olli>.<div>.<tabl>.<hr> 二.行内元素(内联元素) 1.行内元素的特点: (1).大小受到文字区域的影响,不受到width和height的影响. (2).行内元素不会单独占满一行. 2.常见的行

Web前端技术:CSS部分深入---盒子模式,overflow属性,border属性,内外边距,水平居中问题,块\行内元素,浮动,层定位

1.盒子模式:页面中的所有元素都可以看成一个盒子,占据着一定的页面空间 2.overflow属性 hidden:超出部分不可见,默认值 scroll:显示滚动条 auto:如果有超出部分,显示滚动条 3.border属性 border-width:px \ thin \ medium \ thick border-style:dashed \ dotted \ solid \ double border-color:颜色 border:width  style color 案例 水平分割线: .

行内元素和块元素定位的问题

将行内元素设置为块元素,一个用float:left;;;;;;;;一个用float:right; <div class="form-group" style="position:relative;top:10px"> <label for="firstname" style=" display:inline-block;float:left;">用户别名</label> <input

html入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)

一.转义字符由特殊字符包裹的文本 会当做标签去解析 对应不换行空格 对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响.<对应< >对应> 二.行内元素和块级元素1.块级标签默认情况下,每一个块级元素都是独占一行的即元素的前后都会换行 都有 align 属性,例如: p标签 段落标签 h1~6标签 标题标签 hr标签   水平分割线标签 div标签 块级元素 2.行内标签 不会换行可以和其他的标签或文本在一行内显示

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:  行内元素转换成块级元素

div和css:行内元素和块元素的水平和垂直居中

行内元素: 水平居中:text-align:center ul水平居中:加 display:table; margin:0 auto; 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. 垂直居中:line-height:父元素的height 块元素: 水平居中: ①margin:0 auto 例: .father{ width:200px; height:200px; background-color:red; } .son{ width:100px; height:1

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在