CSS页面布局及排版

一、CSS盒子模型   CSS将每个元素看成是一个矩形盒子，占据一定空间。 盒子模型两方面理解：1.独立的盒子内部结构；2.多个盒子之间的香菇关系。   1.盒子模型概念 独立盒子模型由：内容、border、padding、margin四部分组成。详见之前的文章内容。 盒子的实际宽（高）= 内容（width/height）+padding（两边）+border（两边）+margin（两边） width和height指内容的宽高。   2.边框 边框属性： （1）border-color （2）border-width，属性值可以使thin、medium、thick、长度单位。 （3）border-style，重要属性。如果没有指定边框样式，其他属性都不起作用，边框将不存在。属性值有：

none（默认，无边框） hidden（隐藏边框，解决边框冲突问题） dotted（点）、dashed（虚线）、 solid（实线） double（双线边框）、groove（3D凹槽边框）、ridge（3D凸槽边框）、inset（3D凹边边框）、outset（3D凸边边框）   2个属性值：上下，左右； 3个属性值：上，左右，下； 4个属性：上，右，下，左。 前三个可直接写成border：xxx；

  （4）border-radius，圆角边框/圆角背景。      （对角线原则）     2个属性：左上角右下角，右上角左下角；     3个属性：左上角，右上角左下角，右下角；     4个属性：左上，右上，右下，左下。   （5）border-shadow，阴影。 属性：水平偏移值  垂直偏移值  模糊值  尺寸  颜色  类型 border-shadow：水平偏移值   垂直偏移值  模糊值  尺寸  颜色  类型；

红色为必选。可以是负数（往相反方向偏移）； 模糊值默认0； 阴影尺寸默认0； 阴影类型默认outset，另一个是内阴影inset。 注意：加入阴影后盒子所占的实际宽度和高度要加上阴影的宽度和高度。   3.内容 属性： （1）width、height。有三种值：auto（根据盒子内容自动调整）、固定值、百分比（占父元素width和height的百分比）。 （2）overflow，溢出值处理。

auto：自动判断是否超过设定高度，超过就显示滚动条。 hidden：溢出部分不显示。 scroll：不管是否溢出，强制显示滚动条。 visible：溢出部分依旧显示，这是默认值。

还有两个子属性：overflow-x 和 overflow-y ，用来单独定义水平/垂直方向的处理方式。   4.padding（内边距） 2个属性值：上下，左右 3个属性值：上，左右，下 4个属性值：上，右，下，左 注意：padding值不能是负数。另外使用padding时，盒子宽度为auto/没有定义宽度时，内边距计算在盒子内，否则计算在盒子外。   5.margin（外边距） margin控制元素与元素之间的距离。 margin值可为负数。 默认情况下，有些元素的padding和margin会有相应的默认值，不同浏览器不同。所以CSS布局中，利用下面代码将所有元素的内外边距设为0，重置边距。

*{   /*所有元素的内外边距重置*/     margin:0;     padding:0; }1234

body的margin比较特殊，控制的是页面与浏览器窗口边距的距离。

  二、盒子之间的关系 有标准流模式、“浮动”属性、“定位”属性。 1.标准文档流/标准流 指不使用一些特殊的排列和定位的css样式。 元素排列方式的不同可以分为两大类： 1.块级元素： 在父元素中会自动换行，且跟同级的兄弟元素按照出现的顺序依次垂直排列，宽度自动铺满父元素宽度。 div、h1 -h6、 p 、pre 、hr、menu、noframes、noscript、dl、ul、ol 、fieldset、form、table 2.行内元素： 在父元素中水平排列，直到父元素的最右端才自动换行。 span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite,  a，sub，sup 他们本身不占据单独区域，仅仅是在其他元素的基础上指出一定范围。 块级元素可以包含行内元素和块级元素，反过来不行。 行内元素设置的width和height无效，设置margin和padding只有左右边距有效。   2.div元素和span元素 1.<div> 标记 这个标记无任何特殊含义。 2.<span> 标记 也没有任何特殊含义。 通常情况下，页面中大的区域块用<div> ，<span>仅用于需要单独设置样式风格的小元素。   3.盒子在标准流中的定位 用margin控制盒子与盒子之间的位置关系。 （1）两个行内元素相邻时距离：左边的margin-right+右边的margin-left； （2）不是行内元素，有换行效果的块级元素：上下间的距离是两者中的较大者，如上面的margin-bottom大于下面的margin-top，距离就取margin-bottom。 （3）当div嵌套时，子元素的margin将以父元素的内容区域为参考。 “标准流”中，块级元素没有设width和height时，默认宽度会自动延伸到父元素的内容区域为限，高度为包容下内容的最小高度。如果设置了width和height，就以值来显示。 （4）当margin为负数时。被设为负数的往相反方向移动，甚至会覆盖在其他元素上。当块级元素间形成嵌套的父子关系时，margin设为负数可以使子元素从父元素中分离出来。如：

 

<div class="father">父     <div class="son">子</div> </div> ······ .son{     margin-left:-30px; }1234567

  4.盒子的浮动（float）与定位（position） 1.盒子的浮动（float） 通过设置块级元素float属性，可使元素“浮动”。 float默认值为none。还有left，right。 设置浮动后，盒子的宽高也会有改变。要清除浮动。也就是：（块级元素设置为浮动后，将脱离“标准流”，但还占据着父元素的空间，父元素的高度不再受浮动的子元素的影响，而由没浮动的其他子元素高度确定。） 浮动可使多个块级元素水平排列。 清楚浮动：clear：left，right，both，none。默认值为none。

/*在父元素中所有浮动元素的后面再增加一个div元素*/ <div class="clear"></div> ····· .clear{clear:both;}1234

  2.盒子的定位（position） 除了可以使用float，还可以使用position。四个值，static，absolute，relative，fixed。 （1）static（静态定位） 表示元素在标准流中的默认位置。无任何效果。为默认值。 （2）relative（相对定位） 指定为relative后还要指定一定的偏移量，水平方向left、right，垂直方向top、bottom。 偏移量是指与它原来所处的位置的移动距离。 可以描述如下：     1）.相对定位，是以元素恩深在“标准流”中或者浮动的原本的位置为基准，通过偏移达到新位置。     2）.仍在标准流中，对父元素和兄弟元素无任何影响，即使由于偏移移到了父元素外边，其他元素也还在原来位置，不会顶上来。 （3）absolute（绝对定位） 也需要指定偏移量。     1）.绝对定位，从标准流中脱离，他们对其后的兄弟元素无任何影响。     2）.使用绝对定位的元素，以它“最近”的一个“已经定位”的“祖先元素”为基准进行偏移，如果没有已经定位的祖先元素，则以浏览器窗口为基准进行偏移。     3）.所谓已经定位：指position有设置，且不是设置为static的任意一种方式。 （4）fixed（固定定位） 以浏览器窗口为根据。   5. z-index空间位置 z-index属性调整重叠元素的上下位置，值大的位于小的上方。值可为正数可为负数。   6. 盒子的display属性 display可以改变元素块级和行内状态。 常用值：none，inline，block。 none：隐藏起来。

  三、CSS页面布局  设计者根据页面显示的内容，对页面有个整体的框架规划，包括整个页面分为哪些区域，各区域的父子关系等。div对整体区域进行划分，然后用css进行定位，再在各个div中添加相应的内容并用css进行样式控制。 常用布局方式：宽度固定且居中板式、“工”字型板式。 注：记得如果用float，要记得clear。如果用position：absolute，父元素的position也要设置。

  四、CSS内容排版 1.CSS设置文字样式 1）字体：font-family。 2）文字大小：font-size。（如果是百分比，行内元素是相对于父元素文字大小的百分比。如果本身是块级元素，就是相对于自身的百分比。） 3）文字加粗：font-weight。值有：normal、bold、bolder、lighter，或数值。 4）文字倾斜：font-style。值有：italic（意大利体）、normal、oblique（真正的倾斜）。 5）其上可以统一用font：xxx xxx xxx ·····复合表示。 6）文字颜色：color。 7）文字下划线、顶划线、删除线：text-decoration。值有：none、underline（下划）、overline（顶划）、line-through（删除线）、blink（闪烁，部分浏览器支持）。 可以同时加好几个效果，如同时加顶划和下划等。 8）英文大小写切换：text-transform。值有：capitalize（首字母大写）、lowercase（全部小写）、uppercase（全部大写）。 9）文字间距：letter-spacing——字母间距；word-spacing——单词间距。中文间距用letter-spacing。 10）文字水平对齐：text-align。值有：left、right、center、justify（两端对齐）。 11）文字行高：line-height。 12）段落首行缩进：text-indent。text-indent：2em。突出就是-2em。

/*实现首字下沉*/ p.one:first-letter{     font-size:3em;      /*首字大小*/     float:left;         /*向左浮动，实现首字下沉*/     padding-left:24px;  /*与左边间距*/     padding-right:5px;  /*与右边间距*/     font-weight:bold; } ····· <body>     <p class="one">这边要实现首字下沉效果。并且内容应该很长。</p> </body>123456789101112

13）段落间的间距：设置p的margin属性实现。应该是上下段落中margin值大的那个。

  2.CSS设置图像样式 1）图像边框：html有自带了border属性，但一般用css设置。 2）图像缩放：通过width和height实现。

img{width:50%}  /*相对父元素的大小*/1

设置图像时要注意：仅设置图像的width或height时，图像会自动等比例缩放。如果同时设置，图像不会等比例缩放。 3）图像对齐： ——a.水平对齐：不能直接通过img的text-align属性实现。要设置其父元素的text-align属性。可嵌套在div里通过设置div的text-align。 ——b.垂直对齐：可直接通过img的vertical-align属性实现。vertical-align 只能用于行内元素 。vertical-align属性值：baseline（默认值，落在文字的基线上）、top、middle、bottom、sub、super、text-bottom（与文字底端对齐）、text-top（与文字顶端对齐）。也可以用数值表示，正负都可，以文字基线为基准，上移（正）或下移（负值）一定距离，均以图像底部为准。   3.CSS设置背景样式 1）背景颜色：background-color。 2）背景图像：background-image。background-image：url（img/1.jpg）； 3）背景图像平铺：默认情况，自动沿水平和垂直平铺。希望只沿着一个方向平铺，通过background-repeat控制： repeat：沿水平和垂直。默认值。 no-repeat：不平铺。 repeat-x：沿水平方向。 repeat-y：沿垂直方向。 4）背景图像位置：background-position。数值：水平 垂直。 5）固定背景图像位置：background-attachment：fixed。 6）综合以上所有的：background：background-image red no-repeat fixed 70% 30%；   4.CSS设置样式列表 1）列表符号：list-style-type。对ul和ol一样效果。   2）图像符号：list-style-image。list-style-image：url（img/1.jpg）； 不同了浏览器会产生图像符号与列表项文字间距不一样的效果。可将ul元素的list-style-type设置为none，隐藏项目符号，再将图像设置为li的背景图像：background：url（img/1.jpg）；实现各个浏览器效果一样。   5.CSS设置超链接 1）按钮式超链接：通过css属性，设置border边框属性实现。 2）背景图像变换超链接：多种方法。可通过项目列表的list-style-type设为none来制作菜单和导航条。 难点：利用float属性使得列表中每一个列表项达到水平排列。利用display属性将行内元素a转换为块级元素，从而可以设置width和height。   6.鼠标特效 cursor：pointer。其他数值具体看其他的文章。不一一列出。   7.CSS设置表格样式 ps：<table summary="这里的值用于概括整个表格内容，浏览器不显示，对于搜索引擎抓取有用"> 1）设置表格、单元格边框：border。 默认情况下，各个单元格边框数分离的，如果要设置相邻单元格边框间距，table有自带了html的collspacing属性，此处用css的border-spacing属性。border-spacing：10px； 如果单元格间两条边框合为一条，可将table元素设置border-collapse属性：border-collapse：collapse； 每个单元格都可设置自己的样式，相邻边框在合并时的优先级： ——a.粗的边框>细的边框，如果border-width属性相同，则double>solid>dashed>dotted>ridge>outset>groove>inset。 ——b.如果边框border-style：hidden，则优先级最高。 ——c.如果边框border-style：none，则优先级最低。 ——d.如果边框的其他设置均相同，只有颜色上的区别，则单元格样式>行>行组>列>列组>表格样式。 2）表格种的颜色：color。 3）表格宽度：table-layout。auto时为自动方式，默认值。fixed为固定值，表格宽度不依赖单元格中的内容，由width指定。 例子：表格的立体效果。   8.CSS设置表单样式 略。

  五、浏览器兼容 五大浏览器：IE、Firefox、Chrome、Safari、Opera。 针对不同浏览器编写不同css代码——Hack过程。 要代码优化，尽可能少的产生冗余代码。 1.Hack IE6识别“ * ”和“ _ ”，IE7识别“ * ”，firefox都不能识别。顺序应该是 正常，带*号的，带_的。 此外：!important声明在IE6和FF中可以提升样式应用优先权。但在IE6中，!important声明会被之后的同名属性定义替换。所以*和!important声明搭配可以很好的解决IE6、IE7和FF的兼容性问题。 ps：区别IE6、IE7：background：green !important；background：blue； 2.私有前缀： 暗示该CSS属性或规则尚未成为W3C标准的一部分。私有前缀有4种： -webkit-   ———— chrome和safari 1的 -moz-  ———— FF -ms-  ———— IE -o-   ———— Opera 如：

border-radius：12px; -webkit-border-radius：12px;   ———— chrome和safari 1的 -moz-border-radius：12px;  ———— FF -ms-border-radius：12px;  ———— IE -o-border-radius：12px;   ———— Opera /*由于safari5，FF4，chrome最新版都支持border-radius属性，所以代码可直接写成border-radius：12px;。*/123456                   --------------------- 作者：ranchocai 来源：CSDN 原文：https://blog.csdn.net/Ranchonono/article/details/68187642 版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/scyfbk18123/p/10139824.html