CSS学习总结
一、盒子模型
1.1 简介
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
1.2 盒子模型
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
1.2.1 CSS Border(边框)
CSS 边框属性:
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框样式:
边框样式属性指定要显示什么样的边界。
Remark border-style属性用来定义边框的样式
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
边框宽度:
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em(单位为 px, pt, cm, em 等),或者使用 3 个关键字之一,它们分别是 thick 、medium(默认值) 和 thin。
注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。
边框颜色:
border-color属性用于设置边框的颜色。可以设置的颜色:
- name - 指定颜色的名称,如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent"。
注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。
边框-单独设置各边:
在CSS中,可以指定不同的侧面不同的边框:
border-style属性可以有1-4个值:
-
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed -
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double -
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid -
border-style:dotted;
四面边框是 dotted
上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。
边框-简写属性:
如果四个边框样式完全相同可以在一个属性中设置边框。
可以在"border"属性中设置:
- border-width
- border-style (required)
- border-color
1.2.2 CSS margin(外边距)
CSS margin(外边距)属性:
定义元素周围的空间。
margin:
margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。
margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。
可能的值 | 说明 |
---|---|
auto | 设置浏览器边距。(这样做的结果会依赖于浏览器) |
length | 定义一个固定的margin(使用像素,pt,em等) |
% | 定义一个使用百分比的边距 |
Margin - 单边外边距属性:
在CSS中,可以指定不同的侧面不同的边距:
属性 | 描述 |
---|---|
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
Margin - 简写属性:
为了缩短代码,有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。
所有边距属性的简写属性是 margin :
margin属性可以有一到四个值。
-
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px -
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px -
margin:25px 50px;
上下边距为25px
左右边距为50px -
margin:25px;
所有的4个边距都是25px
1.2.3 CSS padding(填充)
CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。
padding(填充):
当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
可能的值 | 说明 |
---|---|
length | 定义一个固定的填充(像素, pt, em,等) |
% | 使用百分比值定义一个填充 |
填充- 单边内边距属性:
在CSS中,它可以指定不同的侧面不同的填充:
属性 | 说明 |
---|---|
padding-bottom | 设置元素的底部填充 |
padding-left | 设置元素的左部填充 |
padding-right | 设置元素的右部填充 |
padding-top | 设置元素的顶部填充 |
填充 - 简写属性:
为了缩短代码,它可以在一个属性中指定的所有填充属性。
这就是所谓的简写属性。所有的填充属性的简写属性是 padding :
Padding属性,可以有一到四个值。
-
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px -
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px -
padding:25px 50px;
上下填充为25px
左右填充为50px -
padding:25px;
所有的填充都是25px
二、CSS定位
CSS Position(定位):position 属性指定了元素的定位类型。
position 属性的五个值:
- static
- relative
- fixed
- absolute
- sticky
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
2.1 static 定位
HTML 元素的默认值,即没有定位,遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
2.2 fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。
2.3 relative 定位
相对定位元素的定位是相对其正常位置。
实例
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
移动相对定位元素,但它原本所占的空间不会改变。
实例
h2.pos_top
{
position:relative;
top:-50px;
}
相对定位元素经常被用来作为绝对定位元素的容器块。
2.3 absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html:
实例
h2
{
position:absolute;
left:100px;
top:150px;
}
absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素和其他元素重叠。
2.4 sticky 定位
sticky 可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
三、CSS 布局 - Overflow
3.1 简介
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
3.2 CSS Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值:
属性 | 说明 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
注意:overflow 属性只工作于指定高度的块元素上。
四、CSS浮动
4.1 简介
CSS Float(浮动):
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
Float(浮动),往往是用于图像,但它在布局时一样非常有用。
4.2 CSS Float(浮动)
元素怎样浮动?
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边
4.3 CSS 浮动属性
“CSS” 列中的数字表示不同的 CSS 版本(CSS1 或 CSS2)定义了该属性。
属性 | 说明 | 值 | css |
---|---|---|---|
clear | 指定不允许元素周围有浮动元素。 | left right both none inherit | 1 |
float | 指定一个盒子(元素)是否可以浮动。 | left right none inherit | 1 |
清除浮动 - 使用 clear
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
五、CSS网页布局
5.1 简介
网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。
5.2 网页布局
头部区域
头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo
菜单导航区域
菜单导航条包含了一些链接,可以引导用户浏览其他页面
内容区域
内容区域一般有三种形式:
- 1 列:一般用于移动端
- 2 列:一般用于平板设备
- 3 列:一般用于 PC 桌面设备
底部区域
底部区域在网页的最下方,一般包含版权信息和联系方式等。