CSS页面布局及排版

最新推荐文章于 2024-09-04 13:37:44 发布

isaaak

最新推荐文章于 2024-09-04 13:37:44 发布

阅读量1.4k

点赞数 1

分类专栏：暑期学习文章标签： css

原文链接：https://blog.csdn.net/Ranchonono/article/details/68187642?biz_id=102&utm_term=CSS&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-68187642&spm=1018.2118.3001.4187

版权

暑期学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章转自：https://blog.csdn.net/Ranchonono/article/details/68187642?biz_id=102&utm_term=CSS&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-68187642&spm=1018.2118.3001.4187

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，重置边距。

<span style="color:#000000"><code>*{   <span style="color:#880000 !important"><em>/*所有元素的内外边距重置*/</em></span>
    <span style="color:#50a14f">margin</span>:<span style="color:#009900 !important"><span style="color:#009900 !important">0</span></span>;
    <span style="color:#50a14f">padding</span>:<span style="color:#009900 !important"><span style="color:#009900 !important">0</span></span>;
}</code></span>

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

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设为负数可以使子元素从父元素中分离出来。如：

<span style="color:#000000"><code><<span style="color:#000088 !important">div</span> <span style="color:#986801">class</span>=<span style="color:#009900 !important">"father"</span>>父
    <<span style="color:#000088 !important">div</span> <span style="color:#986801">class</span>=<span style="color:#009900 !important">"son"</span>>子</<span style="color:#000088 !important">div</span>>
</<span style="color:#000088 !important">div</span>>
······
.son{
    margin-left:-<span style="color:#006666 !important">30</span>px;
}</code></span>

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

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

<span style="color:#000000"><code><span style="color:#880000 !important"><em>/*在父元素中所有浮动元素的后面再增加一个div元素*/</em></span>
<div class=<span style="color:#009900 !important">"clear"</span>></div>
·····
.<span style="color:#4f4f4f !important">clear</span>{<span style="color:#4f4f4f !important">clear</span>:both;}</code></span>

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

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。

<span style="color:#000000"><code><span style="color:#880000 !important"><em>/*实现首字下沉*/</em></span>
p<span style="color:#4f4f4f !important">.</span>one:first<span style="color:#50a14f">-letter</span>{
    font<span style="color:#50a14f">-size</span>:<span style="color:#006666 !important">3</span>em;      <span style="color:#880000 !important"><em>/*首字大小*/</em></span>
    float:left;         <span style="color:#880000 !important"><em>/*向左浮动，实现首字下沉*/</em></span>
    padding<span style="color:#50a14f">-left</span>:<span style="color:#006666 !important">24</span>px;  <span style="color:#880000 !important"><em>/*与左边间距*/</em></span>
    padding<span style="color:#50a14f">-right</span>:<span style="color:#006666 !important">5</span>px;  <span style="color:#880000 !important"><em>/*与右边间距*/</em></span>
    font<span style="color:#50a14f">-weight</span>:bold;
}
·····
<span style="color:#4f4f4f !important"><</span>body<span style="color:#4f4f4f !important">></span>
    <span style="color:#4f4f4f !important"><</span>p class<span style="color:#4f4f4f !important">=</span><span style="color:#009900 !important">"one"</span><span style="color:#4f4f4f !important">></span>这边要实现首字下沉效果。并且内容应该很长。<span style="color:#4f4f4f !important"><</span>/p<span style="color:#4f4f4f !important">></span>
<span style="color:#4f4f4f !important"><</span>/body<span style="color:#4f4f4f !important">></span></code></span>

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

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

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

<span style="color:#000000"><code><span style="color:#000000 !important">img</span>{<span style="color:#50a14f">width</span>:<span style="color:#009900 !important"><span style="color:#009900 !important">50</span>%</span>}  <span style="color:#880000 !important"><em>/*相对父元素的大小*/</em></span></code></span>

设置图像时要注意：仅设置图像的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一样效果。
list-style-type属性值
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
如：

<span style="color:#000000"><code>border<span style="color:#50a14f">-radius</span>：<span style="color:#006666 !important">12</span>px;
<span style="color:#50a14f">-webkit</span><span style="color:#50a14f">-border</span><span style="color:#50a14f">-radius</span>：<span style="color:#006666 !important">12</span>px;   ———— chrome和safari <span style="color:#006666 !important">1</span>的
<span style="color:#50a14f">-moz</span><span style="color:#50a14f">-border</span><span style="color:#50a14f">-radius</span>：<span style="color:#006666 !important">12</span>px;  ———— FF
<span style="color:#50a14f">-ms</span><span style="color:#50a14f">-border</span><span style="color:#50a14f">-radius</span>：<span style="color:#006666 !important">12</span>px;  ———— IE
<span style="color:#50a14f">-o</span><span style="color:#50a14f">-border</span><span style="color:#50a14f">-radius</span>：<span style="color:#006666 !important">12</span>px;   ———— Opera
<span style="color:#880000 !important"><em>/*由于safari5，FF4，chrome最新版都支持border-radius属性，所以代码可直接写成border-radius：12px;。*</em></span></code></span>