网页布局基础

网页布局基础1、CSS 规定的定位机制有三种，分别是标准文档流、浮动及绝对定位。

2、W3c标准：结构化标准语言（HTML和XML），表现标准语言（CSS），行为标准语言（Dom和ECMAScript）。

3、标准文档流：从上到下，从左到右输出文档内容。

由块级元素和行级元素组成。

块级元素：从左到右撑满页面独占一行，触碰到页面边缘时会自动换行。

有：div、ul、li、dl、dt、p行级元素:<span>、<strong> 、img、input不会独占一行块级元素和行级元素都是盒子模型。

4、盒子模型：边框（border）、外边距（margin）、内边距（pading）、内容（content）5、盒子3D模型：从上到下依次为：border、content+padding、background-image、background-color、margin6、实现自动居中——列布局的三个技能点：标准文档流，块级元素，margin属性。

网页设置完居中后（代码为：#wrap{width:700px;margin:0 auto;}）就不能再设置浮动属性以及位置属性了，否则位置就不会再居中。

对于网页居中：首先设置整体id为：上下margin 不用设置为auto，只设置右左就可以。

width:100%; 也不可以，一定设置为一个不为100%的值。

然后设置局部id为：width：100%7、浮动布局：可以实现横向多列布局，通过float属性实现，有三个属性值：left、right、none。

设置了浮动的元素仍旧处于标准文档流中。

当元素没有设置宽度值，而设置了浮动属性，元素的宽度随着内容的变化而变化。

当元素设置浮动属性后，会对相邻的元素产生影响，相邻的元素特指紧邻后面的元素。

（2）、清除浮动：clear：both 或者同时设置width：100%+overflow：hidden；当父包含快缩成一条时，用clear：both 的方法清除浮动是无效的，它一般用于紧邻后面的元素的清除浮动。

（3）、横向两列布局：float属性——使纵向排列的块级元素横向排列。

Margin属性——设置两列之间的间距。

颜色表：#00C 草绿色#FF3300颜色样本十六进制名称与注释#ffb3a7 粉红：即浅红色。

别称：妃色杨妃色湘妃色妃红色。

#ed5736 妃色：妃红色。

古同“绯”，粉红色。

杨妃色、湘妃色、粉红皆同义。

#f00056 品红：比大红浅的红色。

#f47983 桃红：桃花的颜色，比粉红略鲜润的颜色。

#db5a6b 海棠红：淡紫红色、较桃红色深一些，是非常妩媚娇艳的颜色。

#f20c00 石榴红：石榴花的颜色，高色度和纯度的红色。

#c93756 樱桃色：鲜红色。

#f05654 银红：银朱和粉红色颜料配成的颜色。

多用来形容有光泽的各种红色，尤指有光泽浅红。

#ff2121 大红：正红色，三原色中的红，传统的中国红，又称绛色。

#8c4356 绛紫：紫中略带红的颜色。

#c83c23 绯红：艳丽的深红。

#9d2933 胭脂：1、女子装扮时用的胭脂的颜色；2、国画暗红色颜料。

#ff4c00 朱红：朱砂的颜色，比大红活泼，也称铅朱、朱色、丹色。

#ff4e20 丹：丹砂的鲜艳红色。

#f35336 彤：赤色。

#cb3a56 茜色：茜草染的色彩，呈深红色。

#ff2d51 火红：火焰的红色，赤色。

#c91f37 赫赤：深红，火红。

泛指赤色、火红色。

#ef7a82 嫣红：鲜艳的红色。

#ff0097 洋红：色橘红。

#ff3300 炎：引申为红色。

#c3272b 赤：本义火的颜色，即红色。

#a98175 绾：绛色；浅绛色。

#c32136 枣红：即深红。

#b36d61 檀：浅红色，浅绛色。

#be002f 殷红：发黑的红色。

#dc3023 酡红：像饮酒后脸上泛现的红色，泛指脸红。

#f9906f 酡颜：饮酒脸红的样子。

亦泛指脸红色。

#fff143 鹅黄：淡黄色（鹅嘴的颜色，高明度微偏红黄色）。

#faff72 鸭黄：小鸭毛的黄色。

#eaff56 樱草色：淡黄色。

#ffa631 杏黄：成熟杏子的黄色。

#ff8c31 杏红：成熟杏子偏红色的一种颜色。

#ff8936 橘黄：柑橘的黄色。

#ffa400 橙黄：柑橘的黄色。

#ff7500 橘红：柑橘皮所呈现的红色。

#ffc773 姜黄：中药名。

别名黄姜。

为姜科植物姜黄的根茎。

又指人脸色不正，呈黄白色。

#f0c239 缃色：浅黄色。

#fa8c35 橙色：界于红色和黄色之间的混合色。

#b35c44 茶色：一种比栗色稍红的棕橙色至浅棕色。

#a88462 驼色：一种比咔叽色稍红而微淡、比肉桂色黄而稍淡和比核桃棕色黄而暗的浅黄棕色。

#c89b40 昏黄：形容天色、灯光等呈幽暗的黄色。

#60281e 栗色：栗壳的颜色。

即紫黑色。

#b25d25 棕色：棕毛的颜色,即褐色。

1、在红色和黄色之间的任何一种颜色；2、适中的暗淡和适度的浅黑。

#827100 棕绿：绿中泛棕色的一种颜色。

#7c4b00 棕黑：深棕色。

#9b4400 棕红：红褐色。

#ae7000 棕黄：浅褐色。

#9c5333 赭：赤红如赭土的颜料，古人用以饰面。

#955539 赭色：红色、赤红色。

#6e511e 褐色：黄黑色。

#d3b17d 枯黄：干枯焦黄。

#e29c45 黄栌：一种落叶灌木，花黄绿色,叶子秋天变成红色。

木材黄色可做染料。

#896c39 秋色：1、中常橄榄棕色，它比一般橄榄棕色稍暗，且稍稍绿些；2、古以秋为金，其色白，故代指白色。

#d9b611 秋香色：浅橄榄色浅黄绿色。

#bddd22 嫩绿：像刚长出的嫩叶的浅绿色。

#c9dd22 柳黄：像柳树芽那样的浅黄色。

#afdd22 柳绿：柳叶的青绿色。

#789262 竹青：竹子的绿色。

#a3d900 葱黄：黄绿色，嫩黄色。

#9ed900 葱绿：1、浅绿又略显微黄的颜色；2、草木青翠的样子。

#0eb83a 葱青：淡淡的青绿色。

#0eb83a 葱倩：青绿色。

#0aa344 青葱：翠绿色，形容植物浓绿。

#00bc12 油绿：光润而浓绿的颜色。

#0c8918 绿沈（沉）：深绿。

#1bd1a5 碧色：1、青绿色；2、青白色，浅蓝色。

#2add9c 碧绿：鲜艳的青绿色。

#2add9c 青碧：鲜艳的青蓝色。

#3de1ad 翡翠色：1、翡翠鸟羽毛的青绿色；2、翡翠宝石的颜色。

#40de5a 草绿：绿而略黄的颜色。

#00e09e 青色：1、一类带绿的蓝色，中等深浅，高度饱和；2、本义是蓝色；3、一般指深绿色；4、也指黑色；5、四色印刷中的一色；6、特指三补色中的一色。

#00e079 青翠：鲜绿。

#c0ebd7 青白：白而发青，尤指脸没有血色。

#e0eee8 鸭卵青：淡青灰色，极淡的青绿色。

#bbcdc5 蟹壳青：深灰绿色。

#424c50 鸦青：鸦羽的颜色。

即黑而带有紫绿光的颜色。

#00e500 绿色：1、在光谱中介于蓝与黄之间的那种颜色；2、本义是青中带黄的颜色；3、引申为黑色，如绿鬓：乌黑而光亮的鬓发，代指为青春年少的容颜。

#9ed048 豆绿：浅黄绿色。

#96ce54 豆青：浅青绿色。

#7bcfa6 石青：淡灰绿色。

#2edfa3 玉色:玉的颜色，高雅的淡绿、淡青色。

#7fecad 缥：绿色而微白。

#a4e2c6 艾绿：艾草的颜色。

偏苍白的绿色。

#21a675 松柏绿：经冬松柏叶的深绿。

#057748 松花绿：亦作“松花”、“松绿”。

偏黑的深绿色，墨绿。

#bce672 浅黄绿色：松树花粉的颜色。

《红楼梦》中提及松花配桃红为娇艳。

#44cef6 蓝：三原色的一种。

像晴天天空的颜色。

#177cb0 靛青：也叫“蓝靛”。

用蓼蓝叶泡水调和与石灰沉淀所得的蓝色染料。

呈深蓝绿色。

#065279 靛蓝：由植物(例如靛蓝或菘蓝属植物)得到的蓝色染料。

#3eede7 碧蓝：青蓝色。

#70f3ff 蔚蓝：类似晴朗天空的颜色的一种蓝色。

#4b5cc4 宝蓝：鲜艳明亮的蓝色。

#a1afc9 蓝灰色：一种近于灰略带蓝的深灰色。

#2e4e7e 藏青：蓝而近黑。

#2e4e7e 藏蓝：蓝里略透红色。

#4a4266 黛：青黑色的颜料。

古代女子用以画眉。

#426666 黛绿：墨绿。

#425066 黛蓝：深蓝色。

#574266 黛紫：深紫色。

#8d4bbb 紫色：蓝和红组成的颜色。

古人以紫为祥瑞的颜色。

代指与帝王、皇宫有关的事物。

#815463 紫酱：浑浊的紫色。

#815476 酱紫：紫中略带红的颜色。

#4c221b 紫檀：檀木的颜色，也称乌檀色、乌木色。

#003371 绀青、绀紫：纯度较低的深紫色。

#56004f 紫棠：黑红色。

#801dae 青莲：偏蓝的紫色。

#4c8dae 群青：深蓝色。

#b0a4e3 雪青：浅蓝紫色。

#cca4e3 丁香色：紫丁香的颜色，浅浅的紫色，很娇柔淡雅的色彩。

#edd1d8 藕色：浅灰而略带红的颜色。

#e4c6d0 藕荷色：浅紫而略带红的颜色。

#75878a 苍色：即各种颜色掺入黑色后的颜色。

#ffffff 精白：纯白、洁白、净白、粉白。

#fffbf0 象牙白：乳白色。

#f0fcff 雪白：如雪般洁白。

#d6ecf0 月白：淡蓝色。

#f2ecde 缟：白色。

#e0f0e9 素：白色、无色。

#f3f9f1 荼白：如荼之白色。

#e9f1f6 霜色：白霜的颜色。

#c2ccd0 花白：白色和黑色混杂的。

斑白的、夹杂有灰色的白。

#fcefe8 鱼肚白：似鱼腹部的颜色，多指黎明时东方的天色颜色。

#e3f9fd 莹白：晶莹洁白。

#808080 灰色：黑色和白色混和成的一种颜色。

#eedeb0 牙色：与象牙相似的淡黄色。

#f0f0f4 铅白：铅粉的白色。

铅粉，国画颜料，日久易氧化“返铅”变黑。

铅粉在古时用以搽脸的化妆品。

#622a1d 玄色：赤黑色，黑中带红的颜色，又泛指黑色。

#3d3b4f 玄青：深黑色。

#725e82 乌色：暗而呈黑的颜色。

#392f41 乌黑：深黑、漆黑。

#161823 漆黑：非常黑的。

#50616d 墨色：即黑色。

#758a99 墨灰：即黑灰。

#000000 黑色：亮度最低的非彩色的或消色差的物体的颜色；最暗的灰色；与白色截然不同的消色差的颜色；被认为特别属于那些既不能反射、又不能透过能使人感觉到的微小入射光的物体,任何亮度很低的物体颜色。

#493131 缁色：帛黑色。

#312520 煤黑、象牙黑：都是黑，不过有冷暖之分。

#5d513c 黧：黑中带黄的颜色。

#75664d 黎：黑中带黄似黎草色。

#6b6882 黝：本义为淡黑色或微青黑色。

#665757 黝黑：（皮肤暴露在太阳光下而晒成的）青黑色。

#41555d 黯：深黑色、泛指黑色。

#f2be45 赤金：足金的颜色。

#eacd76 金色：平均为深黄色带光泽的颜色。