浅谈CSS层叠样式表

本文主要聊一聊CSS的基本知识

写在前面的一些小点，

首先呢，介绍一下css的四个选择器：ID选择器、类选择器（常用）、标签选择器、*选择器。

ID 选择器表现形式：这里的name表示的是在HTML页面中 <div id="name"></div>  id的名称。

#name{
    color:red;
...
}

标签选择器表现形式：这里可以借上篇文章中块元素的列表标签<li></li>标签引用一下。

li {
    color:blue;
}

* 选择器表现形式：*{...}   选择所有元素，也可以选择另一个元素内的所有元素，如 div *{...}

一般在实际运用中都采用类选择器。

类选择器表现形式：这里的name表示的是在HTML页面中 <div class="name"></div>  class的名称。

.name {
    color:red;
}

类选择器的特点：无须唯一、选择性使用、组合使用（name用 <div class="name1 name2 "></div> 中class的名称 ）

 css中常用的的一些样式：文字样式（font）、文本样式（p段落）、列表样式（list-style）、盒子模型（content-box、border-box）、外边距（margin）、内边距（padding）、边框（border）、背景（background）

• 文字样式

font-style（字体样式）：normal(默认)/italic(斜体)

font-weight（字体粗细）：normal(默认)/bold（粗体）

font-size（字体大小）：Npx; 正文一般12~14px;

font-family（字体字族）：arial,"黑体";（若一段文字中既有英文也有中文）

也可以一行表示：font :style weight size family;

比如：font:italic bold Npx arial,"黑体";

.thisp{
	font:italic bold 20px arial,"黑体";
	/*或者像以下一个个属性写*/
	font-style: italic;
	font-weight: bold;
	font-size: 20px;
	font-family: arial,"黑体";
}

展示效果：

 

• 文本样式

color:颜色的英文单词；#6位16进制数，rgb(0~255,0~255,0~255)，rgba(0~255,0~255,0~255,0~1之间的小数代表透明度)

text-align（位置）：left/center/justify(两端对齐)

line-height(行高)：Npx；一般设置为1.2em（段落）

text-indent(首行缩进)：Npx；em（字符）

.thatp{
	color: #0000FF;
	text-align: left;
	text-indent: 2em;
	line-height: 1.2em;
}

展示效果：

• 列表样式

list-style-type（设置列表项标记的类型）：none; none表示不显示列表项标记

list-style-position(列表位置)：outside（默认）/inside

list-style-image（使用图像来替换列表项的标记）:url(path);一般都是相对路径。

.thisul{
	list-style-type:none;
	list-style-position: inside;
	list-style-image:url(../img/head.png)
}

展示效果：

 

• 盒子模型 box-sizing（content-box、border-box）

①内容盒子：content-box

简单来说，先固定内容的宽高（width，height）

盒子的宽=width+padding-left+padding-right+border-left+border-right

盒子的高=height+padding-top+padding-bottom+border-top+border-bottom

②边框盒子：border-box（常用）

简单来说，先固定盒子的宽高（width，height）

内容的宽=width-padding-left-padding-right-border-left-border-right

内容的高=height-padding-top-padding-bottom-border-top-border-bottom

• 外边距margin（可为负值）

 

外边距margin

margin:Mpx Npx Xpx Ypx;	设置上外边距 右外边距 下外边距 左外边距（顺时针方向）
margin：Npx auto Mpx;	设置子盒子放到父盒子的位置，N表示上外边距，M表示下外边距；
margin:0 auto;	把盒子放到父盒子水平居中的位置
margin-top:Npx;	设置上内边距
margin-right:Npx;	设置右内边距
margin-bottom:Npx;	设置下内边距
margin-left:Npx;	设置左内边距
margin:Npx;	设置四条内边距都是Npx
margin:Mpx Npx；	设置上、下内边距为Mpx,设置右、左内边距为Npx
margin:Lpx Mpx Npx;	设置上内边距为Lpx，右左内边距为Mpx，下内边距为Npx

• 内边距padding（不可为负值）

内边距padding

padding:Mpx Npx Xpx Ypx;	设置上内边距 右内边距 下内边距 左内边距（顺时针方向）
padding-top:Mpx;	设置上内边距
padding-right:Npx;	设置右内边距
padding-bottom:Xpx;	设置下内边距
padding-left:Ypx;	设置左内边距
padding:Npx;	设置四个内边距都是Npx
padding:Mpx Npx；	设置上下内边距是Mpx,右左内边距是Npx
padding:Lpx Mpx Npx;	设置上内边距是Lpx,右左内边距是Mpx,下内边距是Npx)

• 边框border

边框border

一般表现形式	border:color width style;（设置4个边框的样式） 其中style有：dotted点状的，solid实线，dashed虚线，double双线
设置上边框的样式	border-top:color width style;
设置右边框的样式	border-right:color width style;
设置下边框的样式	border-bottom:color width style;
设置左边框的样式	bottom-left:color width style;

①设置四个边框的颜色：

 

border-color:top right bottom left;	设置四个边框的颜色
border-color:颜色1 颜色2 颜色3;	设置上边框颜色 右左边框颜色 下边框颜色
border-color：颜色1 颜色2;	设置上下边框颜色 右左边框颜色
border-color:color	设置四个边框一样的颜色
border-top-color:color;	设置上边框颜色
border-right-color:color;	设置右边框颜色
border-bottom-color:color;	设置下边框颜色
border-left-color:color;	设置左边框颜色

②设置四个边框的宽度：

 

border-width:top right bottom left;	设置四个边框的宽度
border-width:Npx;	设置四个边框宽度都是Npx
border-width：:Mpx Npx；	设置上下边框宽度是Mpx,右左边框宽度是Npx
border-width:Lpx Mpx Npx;	设置上边框宽度是Lpx,右左边框宽度是Mpx,下边框宽度是Npx

③设置边框的角border-radius：

border-radius：左上角px 右上角px 右下角px 左下角px；

border-radius:Npx;(设置四个角一样的角度)

.border{
	margin:0 auto;
	width:200px;
	height:200px;
	border:red 1px solid;
	border-radius:100px 0 100px 0;
}

展示效果

• 背景 background

背景background

一般表示形式	background：color url() position repeat;
背景色	background-color:word/#6位16进制数/rgb(0~255,0~255,0~255)/rgba(0~255,0~255,0~255,0~1之间的小数表示透明度);
背景图片	background-image：url(path);
背景位置	background-position:M% N%;/Mpx Npx;（水平位置 垂直位置）
属性设置是否及如何重复背景图像	background-repeat:repeat(默认);/no-repeat;/repeat-x;/repeat-y;
背景图片尺寸	background-size:Mpx Npx;/cover;

 

 

•  弹性盒子（flex）

display(规定元素应该生成的框的类型):inline/inline-block/block/flex/none;
flex-direction(规定灵活项目的方向):row(水平)/column（垂直）;
flex-wrap(让弹性盒元素在必要的时候拆行):no-wrap/wrap;
justify-content(水平对齐):space-between/space-around/center;

其中，space-around指在弹性盒对象的 <div> 元素中的各项周围留有空白；space-between指项目位于各行之间留有空白的容器内。
align-content(垂直对齐多行):space-between/space-around;
align-items(flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式):stretch(默认拉伸)/center;

举2个例子来了解一下弹性盒子：

①设定父盒子宽高，子盒子等分父盒子的宽度，高度需要指定

html代码：

<div class="flexbox">
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	<div class="flexson"></div>
	</div>

css代码：

.flexbox{
	margin:0 auto 50px;
	width:601px;
	height:401px;
	display:flex;
	flex-wrap:wrap;
	/* 设置弹性子盒子垂直排 */
	flex-direction:column;
	border:red solid;
	border-width:1px 0 0 1px;
}
.flexson{
	/* width:150px; */
	height:200px;
	background-color:#ddd;
	border:green solid;
	border-width:0 1px 1px 0;
	/* 剩下的8个子盒子各分得1份 */
	flex-grow:1;
}

 效果如下：

 

②设定父盒子宽高，子盒子设置宽高，控制间距

html代码：

<div class="flexbox2">
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	<div class="flexson2"></div>
	</div>

css代码：

.flexbox2{
	margin:0 auto 50px;
	width:601px;
	height:401px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-content:space-between;
	border:red solid;
	border-width:1px 0 0 1px;
}
.flexson2{
	width:130px;
	height:180px;
	background-color:#ddd;
	border:green solid;
	border-width:0 1px 1px 0;
}

效果如下：