一、如何用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. 聊聊rocketmq的sendBatchMessage

    序 本文主要研究一下rocketmq的sendBatchMessage SendMessageRequestHeader rocketmq-all-4.6.0-source-release/commo ...

  2. 01 - Element

    ¶安装 npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S CDN 目前可以通过 unpkg.com/element- ...

  3. datafram 操作集锦

    Spark Python API 官方文档中文版> 之 pyspark.sql (二) 2017-11-04 22:13 by 牛仔裤的夏天, 365 阅读, 0 评论, 收藏, 编辑 摘要:在 ...

  4. vue+axios新手实践实现登陆

    vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...

  5. Vue.js 中的 v-cloak 指令

    可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示 ...

  6. luogu 4587

    假设当前已经组合好了 $[1, x]$ ,设 $ans = x + 1$ :显然初始时 $x = 0, ans = 1$ 我们另 $y = \sum_{i = l} ^ {r} (w_i <= ...

  7. Codeforces 221d D. Little Elephant and Array

    二次联通门 : Codeforces 221d D. Little Elephant and Array /* Codeforces 221d D. Little Elephant and Array ...

  8. 洛谷P1016 旅行家的预算 题解

    主要就是注意一下各个变量的类型别弄混了 https://www.luogu.org/problem/P1016 #include<cstdio> using namespace std; ...

  9. AdvanceEast源码理解

    目录 文章思路 源码理解 一. 标签点形式 按顺序排列四个点,逆时针旋转,且第一个点为左上角点(刚开始选择最左边的点, 二. 标签切边 三. loss计算 四. NMS 最后说明 文章思路 大神的gi ...

  10. dsu on tree学习笔记

    前言 一次模拟赛的\(T3\):传送门 只会\(O(n^2)\)的我就\(gg\)了,并且对于题解提供的\(\text{dsu on tree}\)的做法一脸懵逼. 看网上的其他大佬写的笔记,我自己画 ...