nil's blog

1. `CSS样式`

语法 : 选择器 {属性:值;}

① 字体样式属性

⑴ `font-size`: 字号大小

网页默认 14px + , 该属性的值可以使用相对长度,也可以使用绝对长度

相对长度单位	说明
`em`	相对于当前对象内文本的字体尺寸
`px`	像素,最常用,推荐使用
绝对长度单位	说明
`in`	英寸
`cm`	厘米
`mm`	毫米
`pt`	点

css

h3 {
  /* 像素定义字体大小 */
  font-size: 20px;
}

⑵ `font-family`: 字体

支持中文字体,可使用Unicode方式进行属性设置

css

h3 {
  /* 指定多个字体,按顺序查找 */
  font-family: "Microsoft YaHei UI", Arial, serif;
}

⑶ `font-weight`: 字体粗细

用于定义字体的粗细 : normal(等价于400)、bold(等价于700)、bolder、lighter、100 ~ 900(100的整数倍)

css

h3 {
  /* 字体粗细 */
  font-weight: bold;    /* 加粗 */
}

⑷ `font-style`: 字体风格

用于定义字体风格 , 如 : 斜体、倾斜或正常字体
normal : 默认值
italic: 斜体
oblique: 倾斜

css

h3 {
  /* 字体样式 */
  font-style: oblique;   /*  倾斜 */
  font-style: italic; /*  斜体 */
}

⑸ `font`连写方式

选择器 {font: font-style font-weight font-size/line-height font-family;}
顺序不允许修改 倾斜 -> 加粗 -> 字号 / 行高 -> 字体

css

h3 {
  /* 简写形式 */
  font: italic bold 14px "微软雅黑";
}

② 选择器类型

⑴ 标签选择器

使用HTML标签名作为选择器
标签名(或元素名)
优点是能快速为页面中同类型的标签统一样式

⑵ 类选择器

声明 : .类名
使用 : <标签 class="类名"></标签>

css

.text {
  font: normal bold 20px "微软雅黑";
}

多类名选择器

html

<div class="fontSize fontColor">
	我是多类名测试数据
</div>


<style>
.fontSize{
  font-size: 30px;
}
.fontColor{
  color: steelblue;
}
</style>

⑶ `id`选择器

类选择器可以重复多次使用
id选择器只可以使用一次

css

<div id="text">
	我是多类名测试数据
</div>

<style>
#text {
  font: normal bold 14px "微软雅黑";
}
</style>

⑷ 通配符选择器

*代表所有的

css

// 所有选择器均生效 
* {
  background-color: whitesmoke;
}

⑸ 伪类选择器

用于向某些选择器添加特殊的效果

`ⅰ`链接伪类选择器

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接

主要针对于链接,注意书写顺序 lvha

css

/* 未点击 */
a:link {
  color: turquoise;
}

/* 已点击 */
a:visited {
  color: wheat;
}

/* 鼠标悬浮 */
a:hover {
  color: violet;
}

/* 点中 */
a:active {
  color: springgreen;
}

`ⅱ`结构(位置)伪类选择器

:first-child: 选取属于其父元素的首个子元素的制定选择器
:last-child: 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n): 匹配属于父元素的第N个子元素,不论元素的类型
nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素,不论元素的类型,从最后一个元素开始计数 , n 可以是数字、关键词或公式

html

<body>
    <ul>
    	<li>第一行</li>
	    <li>第二行</li>
	    <li>第三行</li>
	    <li>第四行</li>
    	<li>第五行</li>
	    <li>第六行</li>
    	<li>第七行</li>
  </ul>
</body>

<style>	
    /* 偶数元素 */
    li:nth-child(even) {
      background-color: turquoise;
    }

    /* 所有偶数(推荐写法) */
    li:nth-child(2n) {
      background-color: tomato;
    }
    
    /* 奇数元素 */
    li:nth-child(odd) {
      background-color: violet;
    }

    /* 所有奇数(推荐写法) */
    li:nth-child(2n+1) {
      background-color: yellow;
    }
    
    /* 正数第N个元素 */
    li:nth-child(2) {
      background-color: tomato;
    }

    /* 倒数第N个元素 */
    li:nth-last-child(2){
      background-color: yellow;
    }
    /* 第一个元素 */
    li:first-child {
      background-color: whitesmoke;
    }

    /* 最后一个元素 */
    li:last-child {
      background-color: thistle;
    }
</style>

`ⅲ` 目标伪类选择器

:target目标伪类选择器用于选取当前活动的目标元素

html

<body>
    <a href="#content" >点击跳转</a>
  	<h2 id="content">内容标题:</h2>
	<p>内容详情......</p>
</body>

<style>
	:target{
  		color: turquoise;
	}
</style>

③ 外观属性

⑴ `color`文本颜色

用于定义文本的颜色
三种取值方式 :
预定义的颜色值 :red,green,blue
十六进制(最常用) : #FF0000,#FF6600
RGB代码 : rgb(255,255,0) 或 rgb(100%,0%,0%)

css

.fontColor {
  color: #000;  
  color: indianred;
  color: rgb(255,255,0);
  color: rgb(100%,100%,0);
}

⑵ `line-height` 行间距

用于设置行间距 , 即字符的垂直距离一般称为行高,
常用单位有三种 :
像素 px
相对值 em
百分比 %

css

#text {
  line-height: 50px;
}

⑶ `text-align` 水平对齐方式

对齐方式 :
左对齐 : left
居中 : center
右对齐 : right

css

#text {
  text-align: left;
}

⑷ `text-indent` 首行缩进

用于设置首行文本缩进 , 建议使用em作为设置单位
1em等于一个字的宽度,如果是汉字的段落

css

#text {
  text-indent: 2em;
}

⑸ `letter-spacing` 字间距

用于定义字间距 , 即字符与字符之间的空白 , 可使用不同单位的数值 , 允许使用负值

css

#text{
  letter-spacing: 2px;
}

⑹ `word-spacing` 单词间距

用于定义英文单词之间的间距 , 对中文字符无效

css

#text{
  word-spacing: 5px;
}

⑺ 颜色半透明

采用rgba实现透明
基本写法 color:rgba(r,g,b,a)

css

#text {
    color:rgba(0,0,0,0.3)    
}

⑻ 文字阴影

用于给文字添加阴影效果
基本写法 text-shadow: 水平距离垂直距离模糊距离阴影颜色

css

#text{
  text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
}

④ 引入`CSS`样式表

⑴ 内部样式表

将CSS代码集中写在HTML文档的头部标签中

html

<head>
	<style type="text/css">
        选择器{属性1:属性值1;}
    </style>
</head>

⑵ 行内式(内联样式)

内联样式,又称行内样式、行间样式、内嵌样式

html

<标签名 style="属性1:属性值1;">
	内容    
</标签名>

⑶ 外部样式表(外链式)

是将所有的样式放在一个或多个CSS文件中,通过link标签将外部样式表文件链接到HTML文档中

html

<head>
    <link href="css文件路径" type="text/css" rel="stylesheet"/>
</head>

⑤ 标签显示模式(`display`)

⑴ 块级元素(`block-level`)

每个块级元素都会独自占据一整行或多行,可以对其设置宽度、高度、对齐等属性 , 常用于网页布局和网页结构的搭建 , 可以容纳内联元素和其他块元素
常见的块级元素有 :
<h1> ~ <h6>
<p> 不允许内部嵌套块级标签
<div> 常用
<ul>
<ol>
<li>

⑵ 行内元素(`inline-level`)

行内元素不占有独立的区域,不可设置高度、高度、对齐等属性,常用于控制页面中文本的样式
常见的行内元素有 :
<a> 不允许内部嵌套 <a>
<strong>
<b>
<em>
<i>
<del>
<s>
<ins>
<u>
<span>

⑶ 行内块元素(`inline-block`)

在行内有几个特殊的标签可以对它们设置宽高和对齐属性
<img />
<input />
<td>
高度、行高、外边距及内边距都可以控制

⑷ 标签显示模式转换

块级转行内 : display:inline;
行内转块级 : display:block;

块、行内元素转换为行内块 : display:inline-block

css

div{
  display: inline-block; /* */
}

a {
  display: block; /* 行内 */
}

⑥ 复合选择器

⑴ 交集选择器

由两个选择器构成,其中第一个为标签选择器,第二个为class选择器
基础语法 : 标签.类名 {属性:值}

html

<body>
    <a class="text">测试内容</a>
</body>

<style>
a {
  color: turquoise;
}

/* 指定a标签class为text的属性 */   
a.text {
  color: wheat;
}
</style>

⑵ 并集选择器

又叫CSS选择器分组,是各个选择器通过逗号连接而成的,如果某些并集选择器定义的样式完全相同,或者部分相同,就可以利用并集选择器为它们重新定义相同的CSS样式
基本语法 : 类选择器,标签选择器 {属性:值; }

html

<body>
    <a>测试</a>
    <div class="text">测试内容</div>
</body>

<style>
.text,a {
  color: turquoise;
}
</style>

⑶ 后代选择器

又称包含选择器,用来选择元素或元素组的后代, 外层标签写在前面,内层标签写在后面,中间用空格分隔
基本语法 : 选择器选择器 {属性:值; }

html

<body>
  <a>测试</a>
  <div class="text">测试内容</div>
  <div>
    <a>测试</a>
  </div>
</body>

<style>
div a {
  color: turquoise;
}
</style>

⑷ 子元素选择器

只能选择作为某元素子元素的元素,把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接
基本语法 : 类选择器 > 标签选择器 {属性:值; }
只包含直属子级,不包含孙级

html

<body>
    <ul class="nav">
    <li>一级菜单
      <ul>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
    </li>
  </ul>
</body>

<style>
.nav li {
  color: violet;
}
.nav > li {
  color: wheat;
}	
</style>

⑸ 属性选择器

选取标签带有某些特殊属性的选择器,
基本语法 : 标签选择器[属性规则]

html

<body>
  <a href="#" title="测试1">测试1</a>
  <a href="#" title="测试2">测试2</a>
  <a href="#">测试2</a>
  <a href="#">测试2</a>
  <a href="#">测试2</a>
</body>

<style>
    /* 包含某个属性 title */
    /* 包含某个属性且值为 title=xxx */
    /* 包含某个属性且值开始为 title^=xxx */
    /* 包含某个属性且值结束为 title$=xxx */
    /* 包含某个属性且值任意位置为 title*=xxx */
    a[title] {
        color: skyblue;
    }
</style>

⑹ 伪元素选择器

::开头伪元素选择器

css

/* 文本一个字 */
p::first-letter {
  color: violet;
}

/* 文本第一行 */
p::first-line {
  color: wheat;
}

/* 选择文本时展示的样式 */
p::selection{
  color: tomato;
}

/* 在在前 */
div::before {
    content:'之前'
}

/* 在之后 */
div::after {
    content:'之后'
}

⑦ `CSS`背景

⑴ 背景图片

background-color 背景颜色
background-image:url() 背景图片

css

div {
  height: 200px;
  width: 200px;
  background-color: #2c3e50;   /* 背景颜色 */
  background-image: url('static/image/logo.png') 
}

⑵ 背景平铺

基础语法 :
background-repeat:平铺规则

css

div {
  height: 900px;
  width: 600px;
  background-image: url('static/image/logo.png');
  background-repeat: repeat-y;
}

⑶ 背景位置

基础语法 :
background-position:位置1 位置2

css

div {
  height: 900px;
  width: 600px;
  background-image: url('static/image/logo.png');
  background-position: x y; /* 可以定义精确单位,支持方位名词 left top right bottom center */
}

⑷ 背景附着

背景图片是否随着页面滚动进行滚动

css

body {
  height: 400px;
  width: 400px;
  background-image: url('static/image/logo.png');
  background-attachment: fixed ; /* 默认scroll */
}

⑸ 背景简写

简写方式 : background:背景颜色背景图片地址背景平铺背景滚动背景位置

css

div {
    background: #000 url('images/logo.png') no-repeat fixed center -25px;
}

⑹ 背景透明

基本语法 :
background: rgba(0,0,0,0.3)

css

div {
  height: 200px;
  width: 200px;
  background: rgba(0,0,0,0.1);
}

⑺ 背景缩放

基本语法 :
background-size: 值

css

div {
  height: 200px;
  width: 200px;
  /* 设置为 cover 会自动调整缩放比例,保证图片始终填充满背景区域 */
  /* 设置为 contain 会自动调整缩放比例,保证图片始终完整显示在背景区域 */  
  background-size: 100px; /* 尽量修改一个值防止失真,支持百分比,支持cover contain */ 
}

⑻ 多背景

基本语法 :
background : url('images/a.jpg'),url('images/b.jpg')

css

div {
	background: url('images/logo.png') no-repeat fixed center 25px,
        	    url('images/logo.png') no-repeat fixed center 25px;
}

⑼ 凹凸文字

基本语法

css

/* 定义盒子颜色和背景颜色 */
div {
  background-color: #ccc;
  color: #ccc;
  font: 700 80px "微软雅黑";
}

/* 凸起 */
div:first-child{
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}

/* 凹下 */
div:last-child{
  text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}

⑽ 文本修饰

基本语法 :
text-decoration: none;
下划线 underline

html

<body>
    <div>
        <a href="#">我是测试</a>
        <a href="#">我是测试</a>
        <a href="#">我是测试</a>
        <a href="#">我是测试</a>
  </div>
</body>

<style>
/* 设置背景 */    
body{
  background-color: #000;
}
    
/* 指定文本样式 */    
a {
  margin-left: 4px;
  width: 150px;
  height: 50px;
  /*background-color: orange;*/
  display: inline-block;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

/* 文本鼠标悬浮样式 */    
a:hover{
  background-color: orange;
  /*background: url("");*/
}
</style>

⑧ `CSS`三大特性

⑴ 层叠性

指多种CSS样式的叠加 :
样式冲突时,后面的样式会覆盖掉之前样式

样式冲突,遵循的是就近原则,哪个样式离结构近,执行哪个样式
样式不冲突,不会层叠

⑵ 继承性

子标签会继承父标签的某些样式
恰当的继承可以简化代码,降低CSS样式的复杂性,子元素可以继承父元素样式(text-,font-,line-这些元素开头的都可以继承以及color属性)

⑶ 优先级

定义CSS样式时,经常出现两个或多个规则应用在同一元素上,就会出现优先级的问题
优先级 !important(重要的) --> 行内样式 --> ID选择器 --> (伪)类选择器 --> 标签选择器
权重是可以进行叠加的,关于权重需要一套计算公式去计算,这个就是 CSS Specificity
我们称为CSS特性或非凡性 ,它是衡量CSS值优先级的一个标准
Specificity 用一个四位数字串 0 , 0, 0, 0来表示,更像四个级别
继承的权重为 0

⑨ 盒子模型

盒子模型,就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器 ,每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成

⑴ 盒子边框(`border`)

基本语法 :
border : border-width || border-style || border-color
边框样式 (border-style)常用属性
none :没有边框
solid :边框为单实线
dashed :边框为虚线
dotted :边框为点线
double : 边框为双实线

css

div {
  height: 200px;
  width: 200px;
  background-color: skyblue;
  border-style: double; /* 边框样式 */
  border-width: 1px; /* 边框宽度 */
  border-color: pink; /* 边框颜色 */
  border-radius: 50%; /* 边框圆角 */
}

input {
  border: 2px dotted skyblue; /* 综合性写法 */
}

table {
  width: 400px;
  height: 200px;
  border: 1px solid;
  border-collapse: collapse; /* 合并相邻边框 */
}

td {
  border: 1px solid;
}

⑵ 内边距(`padding`)

指边框与内容之间的距离

html

<body>
    <div>
    内容距离边框的距离测试
  </div>
</body>

<style>
    .div2 {
      height: 64px;
      width: 64px;
      border-style: solid; /* 边框样式 */
      border-width: 1px; /* 边框宽度 */
      border-color: pink; /* 边框颜色 */
      padding: 5px; /* 内边距 */
    }
</style>

小demo

html

<body>
    <nav>
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">网址导航</a>
        <a href="#">移动客户端</a>
  </nav>
</body>

<style>
   nav {
      height: 41px;
      border-top: 3px solid #FF8500;
      border-bottom: 1px solid #EDEEF0;
    }

    nav a {
      font-size: 14px;
      color: #4C4C4C;
      /*text-align: center;*/
      text-decoration: none;
      padding: 0 15px;
      height: 41px;
      line-height: 41px;
      display: inline-block;
    }

    a:hover {
      color: #FF8500;
    }
</style>

⑶ 外边距(`margin`)

用于设置外边距设置外边距会在元素之间创建空白
基本语法 :
margin: 上边距右边距下边距左边距;
实现盒子居中
必须是块级元素
盒子必须指定宽度
示例代码 :
css
.header {
	width: 960px;
    margin: 0 auto;
}
盒子水平居中和文字水平居中
盒子水平居中 :margin: 0 auto;
文字水平居中 : text-align: center
插入图片和背景图片
html
<section>
	<img src="#"/>
</section>

<aside></aside>

<style>
    section {
        width: 400px;
        height: 400px;
        border: 1px soild #000;
    }
    
    /* 插入图片更改大小 */
    section img {
        width: 200px;
        height: 210px; 
        margin: 0 auto; /* 插入图片更改位置 */
    }
    
    aside {
        width: 400px;
        height: 400px;
        border: 1px soild #000;
        /* 背景图片更改位置 */
        background: #fff url(images/sun.jpg) 30px 50px no-repeat; 
        background-size: 200px 210px; /* 背景图片更改大小 */
    }
</style>
PS: 一般情况下, 背景图片适合做小图标
清除内外边距
为了更方便的控制网页中的元素,制作网页时,需要清除默认内外边距
基本语法
css
* {
	padding: 0;  /* 清除内边距 */
	margin: 0;	/* 清除外边距 */
}
PS : 行内元素只有左右外边距的,没有上下外边距的,内边距在IE6等低版本浏览器也会有问题 , 所以尽量不要给行内元素指定上下内外边距

⑷ 外边距合并

使用margin定义块元素的垂直外边距时, 可能会出现外边距的合并

相邻块元素垂直外边距的合并
外边距合并,垂直块级盒子,以最大的外边距为准
嵌套块元素垂直外边距的合并
对于两级嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并
解决方案 :
- 为父元素定义1像素的上边框或上内边距
- 为父元素添加 overflow:hidden

⑸ `content`宽度和高度

空间尺寸 : width/height + border + padding + margin
内盒尺寸 :width/height + border + padding
注意 :
宽度属性width和高度属性 height仅适用于块级元素,对行内元素无效(img标签和input除外)
计算盒子模型的总高度时,还应考虑上下两个盒子外边距合并的情况
如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度 ,则padding不会影响本盒子大小

⑹ 盒子布局稳定性

按照优先使用宽度(width) 其次使用内边距 (padding) 再次外边距(margin)
css
width > padding > margin
PS :
margin会有外边距合并,还有 IE6下面margin加班的bug所以最后使用
padding会影响盒子大小 , 需要进行加减计算其次使用
width没有问题,我们经常使用宽度剩余法高度剩余法来做

⑺ `CSS3`盒子模型

通过box-sizing来指定盒子模型, 即可指定为 content-box、border-box 这样我们计算盒子的大小方式就发生了改变
box-sizing:content-box : 盒子大小为 width + padding + border,content-box此值为其默认值, 其让元素维持 W3C的标准 Box Mode
box-sizing:border-box : 盒子大小为 width 就是说 padding 和 border 是包含到 width里面的
注 : 上面标注的width指的是CSS属性里设置的width:length,content的值是会自动调整的

css

div {
  /*box-sizing: content-box;*/
  box-sizing: border-box;
  padding: 10px;
  border: 10px solid;
}

⑻ 盒子阴影

基本语法 :
box-shadow:水平位置垂直位置模糊距离阴影尺寸(影子大小) 阴影颜色内/外阴影

css

.shadow{
  width: 100px;
  height: 100px;
  border: 1px solid black;;

}

.shadow:hover{
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

/* 小示例 */

.div1 {
  height: 64px;
  width: 64px;
  line-height: 64px;
  /*background-color: skyblue;*/
  border-style: solid; /* 边框样式 */
  border-width: 1px; /* 边框宽度 */
  border-color: pink; /* 边框颜色 */
  border-radius: 50%;
  background-image: url('images/bg.jpg');
  background-repeat: round;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.div1:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9) inset, /* 内阴影 */
  5px 4px 5px rgba(0,0,0,0.3); /* 外阴影 */
}

⑩ 浮动(`float`)

页面的布局核心,就是用 CSS来摆放盒子位置
CSS定位机制有3种
普通流(标准流)
浮动
定位

⑴ 普通流

从左往右,从上往下

⑵ 浮动

浮动脱离标准流,不占位置,会影响标准流,浮动只有左右浮动
浮动首先创建包含块的概念,浮动的元素总是找离它最近的父级元素对齐,但是不会超出内边距的范围
浮动的元素排列位置,跟上一个元素(块级)有关系,如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐,如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐
浮动的目的就是为了让多个块级元素同一行显示

⑶ 版心和布局流程

版心 : 指网页中主体内容所在的区域,一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等
布局流程
- 确定页面的版心(可视区)
- 分析页面中的行模块,以及每行模块中的列模块
- 制作HTML结构
- CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块

一列固定宽度且居中

从上往下 (top-> banner -> main-> footer)

html

<body>
  <div class="top">顶部</div>
  <div class="banner">广告图</div>
  <div class="main">内容</div>
  <div class="footer">脚部</div>
</body>

<style>
/* 清除内外边距 */
* {
  padding: 0;
  margin: 0;
}

.top,
.banner,
.main,
.footer{
  width: 100%;
  text-align: center;
  margin: 10px 0 auto;
}

.top{
  height: 80px;
  background-color: skyblue;
}

.banner {
  height: 120px;
  background-color: thistle;
}

 .main{
  height: 500px;
  background-color: wheat;
}

.footer {
  height: 120px;
  background-color: silver;
}
</style>

两列左窄右宽型

html

<body>
  <div class="top">顶部</div>
  <div class="banner">广告图</div>
  <div class="main">
    <div class="left">导航区</div>
    <div class="right">内容区</div>
  </div>
  <div class="footer">脚部</div>
</body>

<style>
/* 清除内外边距 */
* {
  padding: 0;
  margin: 0;
}

.top,
.banner,
.main,
.footer {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  background-color: #EEE;
  border: 1px solid;
}

.top {
  height: 80px;
}

.banner {
  height: 120px;
}

.main {
  height: 500px;
}

.left,
.right
{
  height: 100%;
  box-sizing: border-box;
}
.left{
  width: 19%;
  background-color: #C1C1C1;
  float: left;
}

.right{
  width: 80%;
  background-color: #4C4C4C;
  float: right;
}

.footer {
  height: 120px;
}
</style>

通栏平均分布型

html

<body>
  <div class="top">头部</div>
  <div class="banner">轮播图</div>
  <div class="main">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <div class="footer">底部</div>
</body>

<style>
* {
  padding: 0;
  margin: 0;
}

.top,
.footer {
  width: 100%;
  text-align: center;
  background-color: #000;
  margin: 0 auto;
}

.top {
  height: 50px;
}

.banner {
  height: 200px;
  background-color: #Ff8400;
}

.main {
  height: 400px;
  background-color: wheat;
}

.footer {
  height: 100px;
}

.banner,
.main {
  width: 85%;
  margin: 20px auto;
}

.main ul li {
  list-style: none;
  float: left;
  color: turquoise;
  width: 25%;
  height: 400px;
}
.main ul li:nth-child(even){
  background-color: #fff;
}
</style>

⑷ 清除浮动

浮动本质是用来做一些混排效果的,单是拿来做布局用,会有很多的问题出现
由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响,为了解决这些问题,此时就需要在该元素中清除浮动
准确的说不是清除浮动,而是清除浮动后造成的影响

清除浮动的本质
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题
其实本质叫做闭合浮动更好一些,清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素
在CSS中,clear属性用于清除浮动,基本语法格式如下 :
css
```
选择器{
    clear:属性值;
}
```
属性值如下 :
- left : 不允许左侧有浮动元素(清除左侧浮动的影响)
- right: 不允许右侧有浮动元素(清除右侧浮动的影响)
- both: 同时清除左右两侧浮动的影响
- 额外标签法
  是W3C推荐的做法,通过在浮动元素末尾添加一个空的标签
  优点 : 通俗易懂 , 书写方便
  html
```
<div style="clear:both"></div> 
```
- 父级添加overflow属性方法
  通过触发BFC方式,可以实现清除浮动的效果
  优点 : 代码简洁
  缺点 : 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素
  css
```
可以给父级添加: overflow 为 hidden | auto | scroll 都可以实现
```
- 使用after伪元素清除浮动
  :after方式为空元素的升级版,好处是不用单独加标签了
  优点 : 符合闭合浮动思想,结构语义化正确
  缺点 : 由于IE6 - 7不支持:after ,使用zoom:1触发 hasLayout
  使用方法 :
  css
```
.clearfix:after {
	content: "."; /* 尽量不要为空 , 旧版浏览器有空隙 */
	display: block; /* 转换为块级元素 */
    height: 0; /* 指定高度 */
    clear: both; /* 清除浮动 */
    visibility: hidden; /* 隐藏显示 */
}

.clearfix {
    *zoom: 1; /* IE6,7 专有 ,带有星号的属性只有 IE6,7 才执行*/
}
```
- 双伪元素清除
  优点 : 代码更简洁
  缺点 : 由于IE6-7不支持 :after,使用zoom:1触发 hasLayout
  css
```
.clearfix:before , .clearfix:after {
	content: ""; 
	display: table; 
}

.clearfix:after {
    clear: both; /* 清除浮动 */
}

.clearfix {
    *zoom: 1; /* IE6,7 专有 ,带有星号的属性只有 IE6,7 才执行*/
}
```

⑪ 定位(`position`)

⑴ 元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分

边偏移
- top : 顶端偏移量
- bottom: 底部偏移量
- left: 左侧偏移量
- right: 右侧偏移量

定位模式

在CSS中,position属性用于定义元素的定位模式
基本语法 :
选择器 {position: 属性值; }

css

div {
    /* 边偏移 */
    top: 100px;
    left: 100px;
    position: static; /* 定位模式 */
}

⑵ 静态定位(`static`)

静态定位时所有元素的默认定位方式,即标准文档流模式
对于边偏移无效的,一般用于清除定位

⑶ 相对定位 (`relative`)

相对定位最重要的一点是,它可以通过偏移移动位置,但原来的所占位置继续占有
每次移动的位置是在自己左上角为基点移动

⑷ 绝对定位(`absolute`)

绝对定位最重要的一点是它可以通过边偏移移动位置,原来位置不再占有
父级块没有定位,子级以浏览器基点为准
父级块有定位,子级以父级为基准点
子绝父相 : 父级相对定位子级绝对定位

小示例

html

<body>
  <div>
    <img alt="" src="../../public/pic.png"/>
    <img alt="" src="public/banner.jpg"/>
    <img alt="" src="../../public/pic.png"/>
  </div>
</body>

<style>
div {
  width: 310px;
  height: 190px;
  border: 1px solid #ccc;
  margin: 50px auto;
  padding: 10px;
  position: relative;
}

div img:nth-child(2) {
  width: 310px;
  height: 190px;
  margin: 0 auto;
}

img:first-child,
img:last-child {
  position: absolute;
}
img:first-child{
  top: 0;
  left: 0;
}

img:last-child{
  bottom: 0;
  right: 0;
}

</style>

绝对定位盒子水平/垂直居中

加了绝对定位的盒子左右margin失效
横向移动父盒子 50%
再往回移动自己外边距的一半

html

<body>
  <div class="father">
    <div class="son"/>
  </div>
</body>

<style>
.father{
  width: 800px;
  height: 400px;
  background-color: skyblue;
  margin: 40px auto;
  position: relative;;
}

.son{
  width: 100px;
  height: 50px;
  background-color: silver;
  position: absolute;
  /* 水平居中 */  
  left: 50%;
  margin-left: -50px;
  /* 垂直居中 */  
  top: 50%;
  margin-top: -25px;
}
</style>

⑸ 固定定位(`fixed`)

固定定位是绝对定位的一种特殊形式
固定定位的元素跟父亲没有任何关系,只认浏览器
固定定位完全脱标,不占有位置,不随着滚动条滚动
基本语法 :
选择器 {position: fixed; }
固定定位的盒子一定要写宽和高

⑹ 叠放次序(`z-index`)

当对多个元素同时设置定位时,定位元素之间可能会发生重叠
要想调整重叠定位元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性
z-index默认属性值为 0,取值越大,定位元素在层叠元素中越居上
如果取值相同,则根据书写顺序,后来居上
后面数字一点不能加单位
只有相对定位、绝对定位、固定定位有此属性,其余标准流、浮动、静态定位都无此属性,

四种定位总结

定位模式	脱标 / 占有位置	可使用偏移	移动位置基准
静态	不脱标,正常模式	不可以	正常模式
相对定位	不脱标,占有位置	可以	相对自身移动
绝对定位	完全脱标,不占有位置	可以	相对定位父级移动
固定定位	完全脱标,不占有位置	可以	相对浏览器移动

⑺ 定位模式转换

跟浮动一样,元素添加了绝对定位和固定定位后,元素模式也会发生转换,都转换为行内模式,因此比如行内元素添加了绝对定位或固定定位后,可以不用转换模式,直接给高度和宽度就可以了

⑫ 元素的显示与隐藏

常见的三种隐藏方式
display显示
设置或检索对象是否及如何显示
none隐藏对象与它的相反的是display:block除了转换为块级元素之外,同时还有显示元素的意思
隐藏之后 , 不再保留位置
visibility可见性
设置或检索是否显示对象
visible: 对象可视
hidden: 对象隐藏
隐藏之后 , 继续保留原有位置
overflow溢出
检索或设置当对象的内容超出指定高度或宽度时,如何管理内容
visible : 不剪切内容也不添加滚动条
auto: 超出自动显示滚动条,不超出不显示滚动条
hidden: 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll: 不管超出内容否,总是显示滚动条

1. CSS样式 ​

① 字体样式属性 ​

⑴ font-size: 字号大小 ​

⑵ font-family: 字体 ​

⑶ font-weight: 字体粗细 ​

⑷ font-style: 字体风格 ​

⑸ font连写方式 ​

② 选择器类型 ​

⑴ 标签选择器 ​

⑵ 类选择器 ​

⑶ id选择器 ​

⑷ 通配符选择器 ​

⑸ 伪类选择器 ​

ⅰ链接伪类选择器 ​

ⅱ结构(位置)伪类选择器 ​

ⅲ 目标伪类选择器 ​

③ 外观属性 ​

⑴ color文本颜色 ​

⑵ line-height 行间距 ​

⑶ text-align 水平对齐方式 ​

⑷ text-indent 首行缩进 ​

⑸ letter-spacing 字间距 ​

⑹ word-spacing 单词间距 ​

⑺ 颜色半透明 ​

⑻ 文字阴影 ​

④ 引入CSS样式表 ​

⑴ 内部样式表 ​

⑵ 行内式(内联样式) ​

⑶ 外部样式表(外链式) ​

⑤ 标签显示模式(display) ​

⑴ 块级元素(block-level) ​

⑵ 行内元素(inline-level) ​

⑶ 行内块元素(inline-block) ​

⑷ 标签显示模式转换 ​

⑥ 复合选择器 ​

⑴ 交集选择器 ​

⑵ 并集选择器 ​

⑶ 后代选择器 ​

⑷ 子元素选择器 ​

⑸ 属性选择器 ​

⑹ 伪元素选择器 ​

⑦ CSS背景 ​

⑴ 背景图片 ​

⑵ 背景平铺 ​

⑶ 背景位置 ​

⑷ 背景附着 ​

⑸ 背景简写 ​

⑹ 背景透明 ​

⑺ 背景缩放 ​

⑻ 多背景 ​

⑼ 凹凸文字 ​

⑽ 文本修饰 ​

⑧ CSS三大特性 ​

⑴ 层叠性 ​

⑵ 继承性 ​

⑶ 优先级 ​

⑨ 盒子模型 ​

⑴ 盒子边框(border) ​

⑵ 内边距(padding) ​

⑶ 外边距(margin) ​

⑷ 外边距合并 ​

⑸ content宽度和高度 ​

⑹ 盒子布局稳定性 ​

⑺ CSS3盒子模型 ​

⑻ 盒子阴影 ​

⑩ 浮动(float) ​

⑴ 普通流 ​

⑵ 浮动 ​

⑶ 版心和布局流程 ​

⑷ 清除浮动 ​

⑪ 定位(position) ​

⑴ 元素的定位属性 ​

⑵ 静态定位(static) ​

⑶ 相对定位 (relative) ​

⑷ 绝对定位(absolute) ​

⑸ 固定定位(fixed) ​

⑹ 叠放次序(z-index) ​

⑺ 定位模式转换 ​

⑫ 元素的显示与隐藏 ​

⑬ CSS高级技巧 ​

1. `CSS样式`

① 字体样式属性

⑴ `font-size`: 字号大小

⑵ `font-family`: 字体

⑶ `font-weight`: 字体粗细

⑷ `font-style`: 字体风格

⑸ `font`连写方式

② 选择器类型

⑴ 标签选择器

⑵ 类选择器

⑶ `id`选择器

⑷ 通配符选择器

⑸ 伪类选择器

`ⅰ`链接伪类选择器

`ⅱ`结构(位置)伪类选择器

`ⅲ` 目标伪类选择器

③ 外观属性

⑴ `color`文本颜色

⑵ `line-height` 行间距

⑶ `text-align` 水平对齐方式

⑷ `text-indent` 首行缩进

⑸ `letter-spacing` 字间距

⑹ `word-spacing` 单词间距

⑺ 颜色半透明

⑻ 文字阴影

④ 引入`CSS`样式表

⑴ 内部样式表

⑵ 行内式(内联样式)

⑶ 外部样式表(外链式)

⑤ 标签显示模式(`display`)

⑴ 块级元素(`block-level`)

⑵ 行内元素(`inline-level`)

⑶ 行内块元素(`inline-block`)

⑷ 标签显示模式转换

⑥ 复合选择器

⑴ 交集选择器

⑵ 并集选择器

⑶ 后代选择器

⑷ 子元素选择器

⑸ 属性选择器

⑹ 伪元素选择器

⑦ `CSS`背景

⑴ 背景图片

⑵ 背景平铺

⑶ 背景位置

⑷ 背景附着

⑸ 背景简写

⑹ 背景透明

⑺ 背景缩放

⑻ 多背景

⑼ 凹凸文字

⑽ 文本修饰

⑧ `CSS`三大特性

⑴ 层叠性

⑵ 继承性

⑶ 优先级

⑨ 盒子模型

⑴ 盒子边框(`border`)

⑵ 内边距(`padding`)

⑶ 外边距(`margin`)

⑷ 外边距合并

⑸ `content`宽度和高度

⑹ 盒子布局稳定性

⑺ `CSS3`盒子模型

⑻ 盒子阴影

⑩ 浮动(`float`)

⑴ 普通流

⑵ 浮动

⑶ 版心和布局流程

⑷ 清除浮动

⑪ 定位(`position`)

⑴ 元素的定位属性

⑵ 静态定位(`static`)

⑶ 相对定位 (`relative`)

⑷ 绝对定位(`absolute`)

⑸ 固定定位(`fixed`)

⑹ 叠放次序(`z-index`)

⑺ 定位模式转换

⑫ 元素的显示与隐藏

⑬ `CSS`高级技巧