前端HTML5/HTML+CSS3/CSS学习笔记(四)

css盒子模型

盒子模型概述

所谓的盒子模型在HTML中就是一个盛装元素内容的容器。
每个盒子模型都由元素的内容、内边距 (padding)、边框(border)和外边距(margin)组成。

<div>标记
<div>标记是一个块容器标记。
可以将网页分割为独立的部分,以实现网页的规划和布局。
大多数HTML标记都可以嵌套在<div>标记中,<div>中还可以嵌套多层<div>
可以替代大多数的块级文本标记。

盒子的宽与高
盒子模型的总宽度与总高度
盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

盒子模型的相关属性

CSS:hover 属性
选择鼠标指针浮动在其上的元素,并设置其样式:
如:
a:hover
{
background-color:yellow;
}


边框属性

设置内容				样式属性										常用属性值
边框样式		border-style:上边 [右边 下边 左边];	none无(默认)、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度		border-width:上边 [右边 下边 左边];	像素值
边框颜色		border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
综合设置边框	border:四边宽度 四边样式 四边颜色;	 
圆角边框		border-radius:水平半径参数/垂直半径参数;	像素值或百分比
图片边框		border-images:图片路径 裁切方式/边框宽度/边框扩展距离 重复方式;	 
属性 说明
border-image-source 指定图片的路径
border-image-slice 指定边框图像顶部、右侧、底部、左侧内偏移量。
border-image-width 指定边框宽度
border-image-outset 指定边框背景向盒子外部延伸的距离。
border-image-repeat 指定背景图片的平铺方式

注意:宽度、样式、颜色顺序任意,不分先后
border:宽度,样式,颜色

内边距属性
内边距(内填充)
padding可设置为上下左右边距分别为top,bottom,left,right
注意:内边距padding不允许使用负值

外边距属性
外边距(margin)
与内边距一样可设置上下左右边距

注意:和内边距不同,外边距margin允许使用负值
当对块级元素应用宽度属性width,并将左右的外边距都设置为auto,可使块级元素水平居中
如:
margin:0 auto /* 利用margin实现块元素水平居中*/
margin:5px auto /* 利用margin实现块元素水平居中,并且上下拉开5像素边距*/

内外边距清除
为了更方便地控制网页中的元素,制作网页时,通常先清除元素的默认内外边距。
格式为:
*{
padding:0; /清除内边距/
margin:0; /清除外边距/
}

box-shadow属性
CSS3中的box-shadow属性可以轻松实现阴影的添加,其基本语法格式如下:
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型;

参数值 说明
像素值1 表示元素水平阴影位置,可以为负值(必选属性)。
像素值2 表示元素垂直阴影位置,可以为负值(必选属性)。
像素值3 阴影模糊半径(可选属性)。
像素值4 阴影扩展半径,不能为负值(可选属性)。
颜色值 阴影颜色(可选属性)。
阴影类型 内阴影(inset)/外阴影(默认)(可选属性)。

box-shadow属性也可以改变阴影的投射方向以及添加多重阴影效果。
如:
box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #333 inset;

前端HTML5/HTML+CSS3/CSS学习笔记(四)

box-sizing属性
box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框,其基本语法格式如下:
box-sizing: content-box/border-box;

content-box:浏览器对盒模型的解释遵从W3C 标准,当定义width和height时,它的参数值不包括border和padding。
border-box:当定义width和height时,border和padding的参数值被包含在width和height之内。

背景属性

设置背景颜色
在CSS中,网页元素的背景颜色使用background-color属性来设置

设置背景图像
在CSS中,还可以将图像作为网页元素的背景,通过background-image属性实现。

背景与图片不透明度的设置
通过引入RGBA模式和opacity属性,可以设置图片的不透明度。

RGBA模式
rgba(r,g,b,alpha);
例如:使用RGBA模式为p元素指定透明度为0.5,颜色为红色的背景。
p{background-color:rgba(255,0,0,0.5);}

opacity属性
opacity:opacityValue;
opacity属性用于定义元素的不透明度,参数opacityValue表示不透明度的值,它是一个介于0~1之间的浮点数值。其中,0表示完全透明,1表示完全不透明,而0.5则表示半透明。

设置背景图像平铺
默认情况下,背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺,或者只沿着一个方向平铺,可以通过background-repeat属性来控制。

background-repeat图像平铺属性

平铺属性值 含义
repeat 沿水平和竖直两个方向平铺(默认值)
no-repeat 不平铺(图像位于元素的左上角,只显示一次)
repeat-x 只沿水平方向平铺
repeat-y 只沿竖直方向平铺

设置背景图像位置
background-position图像位置属性

位置属性取值 含义
单位数值 设置图像左上角在元素中的坐标,例如background-position:20px 20px;
预定义的关键字 水平方向值:left、center、right。
垂直方向值:top、center、bottom。
百分比 0% 0% :图像左上角与元素的左上角对齐。
50% 50%:图像50% 50%中心点与元素50% 50%的中心点对齐。
20% 30%:图像20% 30%的点与元素20% 30%的点对齐。
100% 100%:图像右下角与元素的右下角对齐,而不是图像充满元素。

设置背景图像固定
background-attachment图像固定属性

固定属性取值 含义
scroll 图像随页面元素一起滚动(默认值)。
fixed 图像固定在屏幕上,不随页面元素滚动。

设置背景图像大小
运用CSS3中的background-size属性可以轻松控制背景图像的大小。
background-size:属性值1 属性值2;

属性值 说 明
像素值 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会默认为auto;
百分比 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会默认为auto;
cover 把背景图像扩展至足够大,使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;
contain 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域;

设置背景的显示区域
运用CSS3中的background-origin属性可以自行定义背景图像的相对位置。
background-origin:属性值;

在上面的语法格式中,background-origin属性有三种取值,分别表示不同的含义,具体解释如下。
padding-box:背景图像相对于内边距区域来定位。
border-box:背景图像相对于边框来定位。
content-box:背景图像相对于内容框来定位。

设置背景图像的裁剪区域
在CSS样式中,background-clip属性用于定义背景图像的裁剪区域
background-clip:属性值;

在语法格式上,background-clip属性和background-origin 属性的取值相似,但含义不同,具体解释如下。
border-box:默认值,从边框区域向外裁剪背景。
padding-box:从内边距区域向外裁剪背景。
content-box:从内容区域向外裁剪背景。

设置多重背景图像
在CSS3中,通过background-image、background-repeat、background-position和background-size等属性提供多个属性值可以实现多重背景图像效果,各属性值之间用逗号隔开。
如:
background-image:
url(images/caodi.png),
url(images/taiyang.png),
url(images/tiankong.png);

前端HTML5/HTML+CSS3/CSS学习笔记(四)

背景复合属性
CSS中的背景属性也是一个复合属性,可以将背景相关的样式都综合定义在一个复合属性background中。
background:
[background-color] 
[background-image] 
[background-repeat] 
[background-attachment] 
[background-position] 
[background-size] 
[background-clip] 
[background-origin];

使用背景图像属性定义列表样式
list-style是一个复合属性,用于控制列表项目符号的样式。在实际网页制作过程中,为了更高效地控制列表项目符号,通常将list-style的属性值定义为none,然后通过为<li>设置背景图像的方式实现不同的列表项目符号。

渐变属性

线性渐变
在线性渐变过程中,起始颜色会沿着一条直线按顺序过渡到结束颜色。运用CSS3中的 “background-image:linear-gradient(参数值);”样式可以实现线性渐变效果。
background-image:linear-gradient(渐变角度,颜色值1,颜色值2…,颜色值n);
linear-gradient用于定义渐变方式为线性渐变,括号内用于设定渐变角度和颜色值。

渐变角度
渐变角度指水平线和渐变线之间的夹角,可以是以deg为单位的角度数值或关键词。

颜色值
颜色值用于设置渐变颜色,其中“颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用“,”隔开。


径向渐变
径向渐变是网页中另一种常用的渐变,在径向渐变过程中,起始颜色会从一个中心点开始,依据椭圆或圆形形状进行扩张渐变。运用CSS3中的“background-image:radial-gradient(参数值);”样式可以实现径向渐变效果
background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…,颜色值n);
radial-gradient用于定义渐变的方式为径向渐变,括号内的参数值用于设定渐变形状、圆心位置和颜色值。

渐变形状
渐变形状用来定义径向渐变的形状,其取值即可以是定义水平和垂直半径的像素值或百分比,也可以是相应的关键词。

圆心位置
圆心位置用于确定元素渐变的中心位置,使用“at”加上关键词或参数值来定义径向渐变的中心位置。

颜色值
“颜色值1”表示起始颜色,“颜色值n”表示结束颜色,起始颜色和结束颜色之间可以添加多个颜色值,各颜色值之间用“,”隔开。


重复渐变
在网页设计中,经常会遇到在一个背景上重复应用渐变模式的情况,这时就需要使用重复渐变。

重复线性渐变
在CSS3中,通过“background-image:repeating-linear-gradient(参数值);”样式可以实现重复线性渐变的效果。
基本语法:
background-image:repeating-linear-gradient(渐变角度,颜色值1,颜色值2…,颜色值n);

重复径向渐变
在CSS3中,通过“background-image:repeating-radial-gradient(参数值);”样式可以实现重复线性渐变的效果。
基本语法:
background-image:repeating-radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2…,颜色值n);

补充知识点:

盒模型:组成部件:外边距+边框+内边距+内容。
IE盒模型和标准盒模型切换:
box-sizing:border-box;

元素分类:
块级元素:
1.每个块级元素都从新的一行开始,并且其后的元素也另起一行(即自动换行)。
2.元素的高度,宽度,行高以及顶和底边距都可设置。
3.元素宽度在不设置的情况下,是它本省父容器100%(和父元素的宽度一致),除非设定一个宽度。
<div> <p> <h1>~<h6> <ol> <ul> <dl> <address> <blockquote> <from>以及列表标签的等等。

行内元素(内联元素):
1.和其他元素都在一行上。
2.元素的高度,宽度,行高以及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字或图片的宽度,不可改变。
<a> <span> <br/> <i> <em> <strong> <label>

行内块元素:
1.和其他元素都在一行上。
2.元素的高度,宽度,行高以及顶和底边距都可设置。
<img> <input>

元素分类转换
display
block:将内联元素或行内块元素转换为块级元素
inline:将其他元素转换为行内元素(内联元素)
inline-block:将其他元素转为行内块元素
none:将其他元素隐藏

上一篇:HTML5


下一篇:数据分析03 /基于pandas的数据清洗、级联、合并