一、如何用CSS进行网页布局

二、网页布局基础

三、网页简单布局之结构和表现原则

四、CSS Sprite雪碧图应用

什么叫布局？

网页的特点：

网页自适应宽度；

网页长度无限延长；

（分栏也叫分列，混合布局，一列布局，二列布局，三列布局。）

使用float和绝对定位position:relative都会脱离文档流.

清除浮动两个方法：

1.为受浮动影响元素设置{clear:both;}属性
2.为受浮动影响元素设置{width:100%;overflow:hidden;}固定长度以及溢出隐藏属性

网页布局：流式布局(标准文档流)、浮动布局、绝对定位布局

W3C标准：
结构化标准语言（HTML和XML）
表现标准语言（CSS）
行为标准语言（DOM和ECMAScript）

標準文档流：
从上到下，由左到右，輸出文档內容
由块級元素和行內元素組成

块級元素:
由左到右填滿頁面，獨占一行，到頁面边緣時會自動換行div,p,ul,ol,dt.....

行級元素：
能在同一行顯示，不會改變html文档結構span，strong，input，img

盒子3D模型—网页布局的基石
1.border
2.content + padding
3.background-image
4.background-color
5.margin

盒子大小=边框border+内边距padding+＋外边距margin＋内容content

行内样式 > 内部样式 > 外部样式 （采用的是就近原则）

1、auto会根据浏览的宽度自动来设置两边的外边距。
2、其原理：（浏览器的宽度-外包含层的宽度）/2=外边距
3、如果想让页面自动居中，当设置marign属性为auto时，就不能在设置浮动或是绝对定位属性。如果你设置了auto，又设置了浮动或是绝对定位，那么页面是不会居中显示的

自动居中一列布局：
1、三个技能点:标准文档流、margin属性、块级元素。

**自动居中一列布局需要设置 margin 左右值设置为 auto，而且一定要设置width为一个定值。

**元素未设置宽度，但设置了浮动float属性，元素的宽度随内容的变化而变化。当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素

当父包含块被压缩成一条线的时候使用{clear:both;}不能起到清除浮动的作用，只能用溢出属性hidden方法来清除浮动影响

横向两列布局，主要设置float属性和margin。

div一般不要设置高度.

(1)position ４個值
static relative absolute fixed(后面两个都属于绝对定位)

相對定位
即對自身原有位置進行偏移，隨即拥有偏移值和z-index,仍處于標準文档流中

絕對定位
建位了而包含块為基準的定位，完全了脫離了標準文档流，　父元素要設置position:relative 如果沒有就再而上一個元素為基準，直到<html>.

positive设置相对定位，以自身为相对基准进行偏移，设置相对定位属性之后会有偏移属性（top left right bottom 相对于自身进行偏移，会覆盖其他内容进行偏移）和z-Index属性（空间的层堆叠z轴的堆叠，没有的话是默认存在y和x轴的一个平面上）

相对定位和绝对定位的异同
1、相对定位
特点：相对于自身原有位置进行偏移
元素仍处于标准文档流中
随即拥有偏移属性和z-index属性（多了z轴更具空间感）
移动同时会将浏览器撑开

绝对定位特点：
建立了以包含块位基准的定位
完全脱离标准文档流
随即拥有偏移属性跟z-index属性
未设置偏移量时：
无论是否存在已经定位的祖先元素，都保持在元素初始位置 脱离标准文档流
设置偏移量时：
偏移参照的基准：
无已定位的祖先元素：以<html>为偏移参照基准
有已定位的祖先元素：以距其最近的已定位的祖先元素为偏移参照基准

注意：当一个元素设置了绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。

＊＊＊使用绝对定位实现横向两列布局一般用于：一列固定宽度，一列自适应宽度。

主要应用技能：

relative-父元素相对定位。

absolute-自适应宽度元素绝对定位

注意：固定宽度列的高度>自适应宽度的列，否则会造成文档的溢出。

开发思路：

先按结构和语义编写代码
再进行样式设置
减少HTML与CSS的契合度

先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。

什么是网页皮肤？相同的html结构，不同的css样式。

为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。

xuebitu雪碧图

使用sprite，将多张小图片整合成一张大图片，可以减少http请求数，加速内容显示。

cssscrpite雪碧图
静态图片，不随用户信息变化而变化。
小图片，容量比较小
加载量比较大。（目的是：有效的减少http请求的数量）
大图不建议拼成雪碧图，加载时间长

雪碧图原理：通过css的背景定位属性：background-position来控制
坐标轴,拼合背景图的小图(x,y)为负值
以雪碧图左上角的定点为(0,0)坐标
当需要对坐标系中的某个小图标进行展示的时候，只需要取左上角的坐标进行偏移，例如(-100,0)，只需要将background-position:-100,0;
实现原理：控制一个层，可显示的区域范围大小，通过一个窗口，进行背景图的滑动。

有几个非常不错的前端开发在线工具，分享给一起学习的小伙伴们，别忘了收藏，很实用。

（1）在线代码测试工具：http://www.lvyestudy.com/tools/run_code.aspx；

（2）在线调色板：http://www.lvyestudy.com/tools/color_picker.aspx；

（3）CSS3圆角生成器：http://www.lvyestudy.com/tools/border_radius.aspx

CSS Sprite雪碧图实现方式
1.PS手动拼图：制作多个小图片，拼成一个大图片，用鼠标挪动图片的位置（position）。适用自己的小网站
2.使用spite工具自动生成雪碧图
CSS Sprite自动生成工具-“cssGaga” 生成小图片的坐标，以及对应的css程序,提供background-position的值
下载地址：http://www.99css.com/archives/1524

图片伸缩设置：height40px，margin-top:-10px;line-height:40px文本居中。

在对元素设置固定定位时，如果希望本元素包含其父包含块中，不需要对其设置偏移量.

网页布局（html＋css基础）的更多相关文章

  1. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  2. HTML 网页开发、CSS 基础语法——十.CSS语法

    CSS代码书写位置 • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明 1.内联式 ① 内联式简介 •内联式,也被习惯叫做行内式. •书写位置:在 HTML 标签之上的 style 属性 ...

  3. Html 之div+css布局之css基础

    Css是什么 CSS即层叠样式表(Cascading StyleSheet). 在网页制作时采用层叠样式表技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码 ...

  4. HTML 网页开发、CSS 基础语法——八.HTML基本语法

    表格制作 1.表格基础 创建一个简单的表格至少有三个标签组成,分别是<table>,<tr>,<td>标签. table:表格,定义的是整个的表格大结构. tr:t ...

  5. HTML 网页开发、CSS 基础语法——七.HTML常用标签

    标题标签(h1-h6) 1.标题标签 ① 标题(Heading),通过<h1>-<h6>六个标签分别来对六个级别的标题进行性定义的. ② <h1>是级别最高,也是字 ...

  6. HTML 网页开发、CSS 基础语法——十二.CSS选择器

    选择器 基础选择器:标签选择器,id选择器,类选择器,通配符选择器 高级选择器:后代选择器,交集选择器,并集选择器 1. 标签选择器: • 优点:可以选中所有的同名标签,设置所有同名标签的公共样式. ...

  7. HTML 网页开发、CSS 基础语法——九.CSS概述

    1.产生背景 从HTML的答案盛开时,样式就以各种形式存在,最初的HTML只i包含很少的显示属性.随着HTML的成长为了满足页面设计者的要求,HTML添加了许多显示功能,随着功能的增加HTML页面变得 ...

  8. HTML 网页开发、CSS 基础语法——三. HTML概念

    1.纯文本格式 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号,或者特殊字符,及特殊打印格式的文本,只保存文本,不保存其格式设置. ①格式对比 纯文本格式 富文本格式 最常 ...

  9. HTML 网页开发、CSS 基础语法—— 一. HTML概述(了解网页)

    1. 网页的本质 ① HTML就是用来制作网页文件的. ② 浏览器查看的网页都是.html或.htm文件. ③ HTML叫做超文本标记语言(Hypertext Markup Language),用于搭 ...

  10. 一个简单的网页布局HTML+CSS

    <!doctype html> <html> <head> <meta charset="utf-8"/> <title> ...

随机推荐

  1. Ftp客户端需要TSL功能的文件上传

    Ftp客户端需要TSL功能 1.由于最近做了一个项目,需要把打包的文件传输到对方的FTP服务器上,但是用普通的java连接ftp客户端总是连接不上去,对方却说ftp客户端需要开通TSL功能. 直接上代 ...

  2. QT项目之创建.pri文件

    做大项目的时候,有很多.h和.cpp文件,会很繁琐.就需要.pri文件夹,将大项目分解成一个个的子项目,方便理清思绪和后期维护. 废话不多说,直接上过程! 第一步:新建一个项目.如图,选择choose ...

  3. 51nod 1434

    首先可以得出一个性质:LCM(1,2,3,4,...,N-1,N) 中质因子k的出现的次数为t,则有k^t<=n 根据这个性质我们先筛出素数,然后枚举每个质数,求出对应的k和t,然后找出倍数j( ...

  4. 区间连续长度的线段树——洛谷P2894 [USACO08FEB]酒店Hotel

    https://www.luogu.org/problem/P2894 #include<cstdio> #include<iostream> using namespace ...

  5. python3 中的bytes类型

  6. MySQL5.5安装步骤

    原文链接:https://blog.csdn.net/m0_38025207/article/details/80723095 1.首先进入的是安装引导界面 2.然后进入的是类型选择界面,这里有3个类 ...

  7. Vue的学习--遇到的一些问题和解决方法（二）

    1.关于图片路径问题 1.关于图片路径问题 在.vue的html中可以直接使用相对路径,但是从浏览器后台可以看出,最后路径是自行做了替换的.如果需要在js文件中使用,则需要自己使用require进行替 ...

  8. 提高python运行效率的方法

    让关键代码依赖于外部包:你可以为紧急的任务使用C.C++或机器语言编写的外部包,这样可以提高应用程序的性能 使用生成器,因为可以节约大量内存 多个if elif条件判断,可以把最有可能先发生的条件放到 ...

  9. 小程序 之自定义tabbar上边框颜色

    一.设置borderStyle 二.设置page样式 page::after{ content: ''; position: fixed; left: 0; bottom: 0; width: 100 ...

  10. Manjaro Linux无备份迁移home目录

    前几天安装了最新的manjaro kde 18.10,速度刚开始非常快,后来几乎每次重启都会出现无法挂在home分区的情况,刚开始以为是分区对齐的问题,但是后来发现根本不是.算了,干脆迁移下home分 ...