html页面布局笔记

一般html布局会用居中显示,这里需要注意的是,当元素设置了固定宽度之后,margin:0 auto才适用,如果设置了width为100%,则无效:

.wapper{margin:0 auto;width 100%; }  \\这是无效的
.wapper {margin:0 auto;width 750px;}  \\这是正确的

float属性:一般float会对它自己后面的标签产生影响(只对它后面的标签影响),这时受影响的标签需要清除浮动。

  1. clear:both;     #只对float后面受影响的标签有效,但对父级标签无效。
    overflow:hidden;  #对float后面的标签和父级标签都有效。

float还会影响父级标签,比如:

<div class="test">
    <div class="test1"></div>
    <div class="test2"></div>
</div>

这里如果test2设为float,则test2后面的标签和父级标签test都会受到影响。

position定位方式:

#静态定位
#相对定位
#绝对定位

可设置四个属性值:

static
relative
absolute
fixed
时间: 2024-11-05 13:37:56

html页面布局笔记的相关文章

使用Grid做页面布局笔记

没有使用wpf做过精细的页面布局,学习了一下. WPF中页面布局的控件很多,经过这段时间的学习发现:想要出特定的效果必须了解控件的使用布局和常用属性设置. 首先我说明我想要的效果以及实现方法: 效果如下图 目标是实现拖拽中间的青色GridSplitter能够任意调整上下控件的面积. 这里需要记录的几点: 1.DockPanel 是用来规则的按顺序拜访控件的,目标是控件可以停靠在四角,最后一个控件可以Fill剩余的空间 // Todo: 最近较忙 稍后补充…… 经过学习后发现很多种方法都可以,现在

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容 这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加

网页开发学习笔记九: css 页面布局

文档流 块元素独占一行 行内元素在一行上显示 自上而下 浮动 float 用法 float: left | right; 特点 浮动起来 不占位置(脱标) 如果多个盒子都使用了浮动, 会在一行上显示 尽量用 display: inline-block; 来转 行内块 作用 文本绕图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>

CSS3与页面布局学习笔记(四)——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

HTML5新元素及其特性 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义

&lt;div+css页面布局课堂笔记&gt;11---页面布局网站首页设计实例__终极版(仿csdn首页)

1. firstPage.html文件: <span style="font-size:14px;"><!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html"> <title> 标准的页面布局首页 </title> <link rel="sty

微信小程序页面布局

页面布局: wcml: <view class="page"> <view class="page_hd"> </view> <view class="page_bd"> <view class="section_nav"> <view class="left border_right"> 酒店 </view> <vi

jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

HTML页面布局

接下来的下面代码,只是给了一个大的前端编写布局,如果你已经是牛人了,就当没看到,如果是一些初学者,不妨拿去用用,里面也写了一些常用的css样式,现在虽然有很多牛逼的前段框架,用起来也非常得心应手,但是如果你要对自己很多定制化需求,最后肯定是要自己来编写前端页面的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网页标题-->