HTML5培训第10节课堂笔记（盒子模型、行内与块级、float、定位、html5布局）

来源：互联网发布：网络监视窥探隐私编辑：程序博客网时间：2024/05/16 20:27

HTML5培训第10节课堂笔记

客户端----服务方

如果数据返回过来，在界面上无法显示出来，检查客户端的程序

1.Boxmodel，里面涉及CSS中margin和padding的用法

盒子模型

W3C：图片的宽度就是所有的宽度图片的宽度没变，加入padding后

水平居中常用:margin0 auto;text-align:center;

2.行内元素及块级元素概念：<span>和<div>，可用css的display进行转换

行内元素span 不能设置宽高

块级元素：独占一行 div

块级和行内转换 display:block inline

控制消失，显示 display：none 其实是存在的

3.CSS中float用法，它可以将行内元素转成块级，流式布局常用

浮动：

流式布局：

清除浮动：在最后面加一个div

<divstyle="clear:both"></div>

页面初始化

margin:0px;

padding:0px;

}

4.相对定位与绝对定位使用：position:absolute或relative

定位：

相对定位：相对自己霸道原来的位置不可用

绝对定位：相对于父级没有相对于定位的元素，则是body

相对于父级在右下能父级定位为position：relative

子级：

position:absolute;

bottom:0;

right:0;

不管父级怎么动，都会在右下角

不一定为正值

z-index必须在元素实现过定位的值越大，越在上面

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

5.HTML5布局中：

（1）单位不要使用绝对值，可以使用%来控制适配；

（2）字体单位em控制：html{font-size:100%},body{font-size:1em},div{ font-size:0.75em}

HTML5布局

响应式布局

1.宽度用百分比

宽度尽量不要写绝对值

2.字体大小控制

浏览器默认为16px

body{

font-size:100%;

}

div{

font-size:0.75em;// 12px/16px em代表16px

}

<body>

<div>hello</div>

</body>

<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

宽度为设备宽度用户不能做缩放

0 0