一一元素分类

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:

<img>、<input>

一一块级元素        (block)

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

a{display:block;}可以将元素显示为块级元素这里对象是a元素,可以使其具有块级元素的特点

一一内联元素    (inline)

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

div{ display:inline; }可以将块状元素div转换为内联元素,从而使 div 元素具有内联元素特点

一一内联块状元素      (inline-block)

inline-block 元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

提示:下一小节是用视频动画来讲解css中的盒模型。

a{display:inline-block;}可以将a元素设置为内联块状元素

一一盒子模型

块级标签都具备盒子模型的特征

一盒模型—边框(一)

div{ border-width:2px; border-style:solid; border-color:red; }

可简写为div{ border:2px solid red; }

注意:

1、border-style(边框样式)常见样式有:

dashed(虚线)| dotted(点线)| solid(实线)。

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:

3、border-width(边框宽度)中的宽度也可以设置为:

thin | medium | thick(但不是很常用),最常还是用象素(px)。

一盒模型—边框(二)

div{border-top/right/left/bottom:1px solid red;}

一次只能为一个方向设置边框,可以输入4次设置4个方向的边框

一盒模型—宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。

一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

div{ width:200px; padding:20px; border:1px solid red; margin:10px; }

盒模型—填充

div{ padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px; }

可以简写为div{padding:20px 10px 15px 30px;}    书写顺序是顺时针,上右下左

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px,左右一样为20px,可以这么写:

div{padding:10px 20px;}

盒模型—边界   (margin)

div{ margin-top:20px; margin-right:10px; margin-bottom:15px; margin-left:30px; }

简写为div{margin:20px 10px 15px 30px;}也是按照上右下左的顺序

如果上右下左的边界都为10px;可以这么写:

div{ margin:10px;}

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}

总结一下:padding和margin的区别,padding在边框里,margin在边框外

一一CSS包含3种基本的布局模型

在网页中,元素有三种布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)

一一流动模型(Flow)

流动模型,流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型的特征

1块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%,而块状元素都会以行的形式占据位置

2在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

一一浮动模型 (Float)
设置浮动模型可以让两个块状元素并排显示,任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动

div{ float:left/right; }      (我自己去尝试用top和bottom结果没变化)

这条代码可以让两个块状元素并排在左或者并排在右

#div1{float:left;}

#div2{float:right;}

<div id="div1">1</div>

<div id="div2">2</div>     可以让1和2分别在同一行的左和右

一一层模型(Layer)

层模型可以让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作

层模型有三种形式:

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

最赞回答 / lackin

层模型有三种形式:1、绝对定位(position:absolute)2、相对定位(position:relative)3、固定定位(position:fixed) 用通俗的话来说:(个人观点啊)position:absolute,简单来说,就是相对于浏览器窗口的定位。没有参考物,或者说参考的是浏览器本身。postion:relative, 简单来说,就是相对于关联物(参考物)来定位,相对于参考物的相对位置。position:fixed,固定在一个位置,不会流动。也就是浮动在窗口的固定位置上。有点像广告飘窗...

一一绝对定位(position: absolute)

优先相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

position:absolute;

top:x px;                向上移动x像素

left:x px;                向左移动x像素

bottom:x px;            向下移动x像素

right:x px;               向右移动x像素

一一相对定位(position: relative)

position: relative;

top:x px;                相对运动,即向下移动了x像素

left:x px;                          即向右移动了x像素

bottom:x px;                      即向上移动了x像素

right:x px;                         即向左移动了x像素

当写入top时再写入bottom无效

当写入left时再写入right无效

一一固定定位(position: fixed)

将元素固定于浏览器视图(屏幕内的网页窗口)的一个位置(由上下左右的属性决定),浏览器视图是固定的,所以该元素也是固定的,不会随文本流的移动而移动

position: fixed;

这与background-attachment:fixed;属性功能相同

一一Relative与Absolute组合使用

使用绝对定位所选的参照定位元素可以是除了body以外的元素

但是这个参照元素必须加入position:relative;

HTML 的 元素分析的更多相关文章

  1. 中国澳门sinox很多平台CAD制图、PCB电路板、IC我知道了、HDL硬件描述语言叙述、电路仿真和设计软件,元素分析表

    中国澳门sinox很多平台CAD制图.PCB电路板.IC我知道了.HDL硬件描述语言叙述.电路仿真和设计软件,元素分析表,可打开眼世界. 最近的研究sinox执行windows版protel,powe ...

  2. 第一章 Python基本语法元素分析(二)

    1.3   实例1:温度转换 根据华氏和摄氏温度定义,利用转换公式如下: C=(F-32)/1.8 F=C*1.8+32 代码如下: 运行结果: 1.4   Python程序语法元素分析 注释:不被程 ...

  3. UML元素分析

  4. maven(4)------maven核心pom.xml文件常用元素分析

    在maven项目中,pom文件是核心文件 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <p ...

  5. 007 Python程序语法元素分析

    目录 一.概述 二.程序的格式框架 2.1 代码高亮 2.2 缩进 2.3 注释 2.4 缩进.注释 三.命名与保留字 3.1 变量 3.2 命名 3.3 保留字 3.4 变量.命名.保留字 四.数据 ...

  6. 013 turtle程序语法元素分析

    目录 一.概述 二.库引用与import 2.1 库引用 2.2 使用from和import保留字共同完成库引用 2.3 两种库引用方法比较 2.4 使用import和as保留字共同完成库引用 三.t ...

  7. Python语法元素分析

    缩进 1个缩进 = 4个空格 用以在Python中标明代码的层次关系 缩进是Python语言中表明程序框架的唯一手段 注释 注释:程序员在代码中加入的说明信息,不被计算机执行 注释的两种方法: 单行注 ...

  8. python程序语法元素分析

    #TemConvert.py TempStr = input("请输入带有符号的温度值:") if TempStr[-1] in ['F', 'f']: C = (eval(Tem ...

  9. 通过LoadRunner - Analyze详细分析页面元素请求

    众所周知LoadRunner录制某个链接,包括动态请求与js.css.jpg等静态请求. web_custom_request("动态请求", "URL=http://w ...

随机推荐

  1. C# 关于AD域的操作 (首博)

    前段时间(因为懒得找具体的时间了)公司说让系统可以进行对AD域的操作,包括创建用户.于是上网查资料,了解何为AD域.还不知道的这边请https://www.cnblogs.com/cnjavahome ...

  2. 关于VMware vSphere Client安装时,.net framework4进度条卡住不动(亲测)

    亲测有用的办法 1.点击电脑桌面右下角的"开始"按钮,点击"运行"按钮,在弹出的节目输入框中输入"regedit". 2.在弹出来的&quo ...

  3. 基于 Annotation 的装配(注解)

    注解:就是一个类,使用@注解名称 开发中:使用注解 取代 xml配置文件. 1. @Component取代<bean class=""> @Component(&quo ...

  4. Python函数(三)

    递归函数 在函数内部,可以调用其他函数,如果一个函数的内部调用了自己本身,那么这个函数就是递归函数. 什么?函数还可以自己调用自己?那不是一个死循环吗?请看下例: # 求1-100的和 def sum ...

  5. 一百一十二、SAP的OO-ALV之六,复制一个工程的工具栏到另外一个工程的工具栏

    一.我们输入SE38,查看一个SAP的标准查询 二.可以看到这个程序拥有一个标准的工具栏 三.我们来到, 输入这个程序名,再点状态 四.把工具栏复制过来 五.弹出的窗口点对勾 六.系统提示已经复制 七 ...

  6. 本地Redis服务配置

    本地Redis服务配置 要求:在虚拟机中启动redis服务,并要在windows物理机上取得链接 虚拟机安装略,(结果如下) windows工作机上装了Oracle VM VirtualBox,并在其 ...

  7. Sqlserver 增删改查----改

    --我们就以院系,班级,学生来举例. create TABLE [dbo].YuanXi ( Id ,) NOT NULL,--学校id 自增量 YuanXiName varchar() null, ...

  8. fork系统调用方式成为负担,需要淘汰

    微软研究人员发表论文称用于创建进程的 fork 系统调用方式已经很落后,并且对操作系统的研究与发展产生了极大的负面影响,需要淘汰,作者同时提出了替代方案.相信每位开发者都对操作系统中的 fork () ...

  9. 洛谷 P1043 数字游戏

    题目传送门 解题思路: 跟石子合并差不多,区间DP(环形),用f[i][j][s]表示从i到j分成s段所能获得的最大答案,枚举断点k,则f[i][j][s] = min(f[i][j][s],f[i] ...

  10. div 100% 填充页面

    css中 html,body{ margin:0; padding:0; height:100%; }