目录
首页 笔记 详情

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; }

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;
}

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

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

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>

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


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

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

设置图像时要注意:仅设置图像的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%;


写笔记

咨询

您的电子邮箱地址不会被公开。 必填项已用*标注