第十一章前端开发-css

1.1.0 css介绍

css是指层叠样式表（Cascading Style Sheets），样式定义如何显示html元素，样式通常又会存在于样式表中。

css优势：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少代码量，增加网页浏览器速度，节省网路带宽
运用独立页面的css，有利于网页被搜索引擎收录

如何用？

我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可

这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

1.1.1 css语法

css语法分为2个部分：

1.选择器

2.声明

声明由属性和值组成，多个声明之间用分号分隔。

css注释：注释是代码之母

/*这是注释*/

1.1.2 css引入方式

1.1.2.1 内嵌样式

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		
		P{
			color: green;
			font-size: 15px;
		}
	</style>
</head>
<body>
	<p>这是一个p标签</p>
</body>
</html>

1.1.2.2 行内样式表

<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签！</p>
</body>
</html>

1.1.2.3 外部样式表

链接式 link标签

#html文件
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html>

#index.css文件
p {
  color: green;
}

导入式

了解即可。

index.css

@import url(other.css)

注意：
@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

1.1.2.4 三种引入方式的优先级

行内样式>内嵌式和外接式
内嵌和外接要看谁在后面，在后面的优先级高（代码从上到下执行，在后面的会把前面的覆盖）

1.1.3 css选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。

1.1.3.1 基础选择器

1.id选择器：特定属性的元素（标签）

标识：#id名
特征：唯一的

2.类选择器

标识：.类名
特征:可以重复，归类，类也可以设置多个

<style>
	.box{
		width:200px;
		height:200px;
		background-color:yellow;
	}
	.active{
		border-radius: 200px;
	}
</style>

<div class='box active'></div>
<div class='box'></div>
<div class='box'></div>

3.标签选择器

与标签有关的

div{}
p{}
ul
ol
...

1.1.3.2 高级选择器

1.后代选择器：中间是空格

eg：div下所有的标签都会选中

div p{
	color: red;
}

2.子代选择器：中间是>号

只找到div标签下面最近的一代

dic>p{
	color:red;
}

3.组合选择器：中间用，连接

		p,span{
			color: green;
			font-size: 15px;
			padding: 0;
			margin: 0;
		}

4.交集选择器:选择器1选择器2{}

div.active{
    color: orange;
}

5.如何重置网页样式？

html,body,p,ul,ol{
    margin: 0;         /*去除外边距*/
    padding: 0;        /*去除内边距*/
}
/*通配符选择器*/
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;      /*去除下划线*/
}
input,textarea{
    border: none;       /*去除默认边框*/
    outline: none;      /*去除外线*/
}

1.1.3.3 伪类选择器

1.对于a标签

如果想设置a标签的样式，要单独作用a标签
对于继承来说，a标签不起作用的

2.爱恨准则：LoVe HAte

L：link
V：visited
H：hover，还可以作用在其他标签上（悬浮时）
A：active

3.符号：使用一个冒号

/*LoVe HAte*/
/*a标签没有被访问时候设置的属性*/
a:link{
    /*color: red;*/
}
/*a标签被访问后设置的属性*/
a:visited{
    color:yellow;
}
/*a标签悬浮时设置的属性*/
a:hover{
    color: deeppink;
}
/*a标签被摁住的时候设置的属性*/
a:active{
    color: deepskyblue;
}

1.1.3.4 属性选择器

1.根据属性，选择符合条件的标签

2.示例：

/*设置所有文本输入框的属性*/
input[type='text']{         
    background-color: red;
}
/*设置所有多选框的属性*/
input[type='checkbox']{
}
/*设置所有提交按钮的属性*/
input[type='submit']{
}

1.1.3.5 伪元素选择器

通过伪元素添加的内容为行内元素

符号：使用两个冒号

/*设置段落第一个字的属性*/
p::first-letter{
    color: red;
    font-size: 20px;
    font-weight: bold;
}
/*在段落开头添加内容*/
p::before{
    content:'@';
}
/*解决浮动布局常用的一种方法*/
/*在段落结尾添加内容*/（可用于清楚浮动带来的影响）
p::after{
    content:'$';
}

1.1.4 层叠性和继承性

1.继承性：在css有某些属性是可以继承下来

2.可以继承下来的属性：

font-xxx:字体相关的属性
text-xxx:文本相关的属性
color:颜色相关的属性
line-height:行高
letter-spacing:文字之间的距离
word-spacing:英文单词之间的距离

3.权重比较规则：

行列(行内式)：1000 > id:100 > 类class:10 > 标签1（元素）选择器
继承来的属性权重为0

4.总结：

前提是选中了标签，权重比较
- 数选择器：id 类标签，谁大它的优先级就大，
- 如果一样大，后面的回覆盖掉前面的属性
选中的标签的属性优先级远远大于继承来的属性，没有可比性
同时继承来的属性：
- 谁描述的近，谁的优先级越高
- 描述的一样近，这个时候才回归到数选择器的数量
！important:他设置当前的属性的权重无限大，但大不过行内样式的优先级

1.1.5 盒模型

1.任意一个元素都可以当作盒模型

2.盒子的大小由内容宽高(width/height)+边距(padding)+边框(border)

1.属性：

width:内容的宽度
height：内容的高度
padding：内边距，border到内容的距离
border：边框
margin：外边距

2.盒子模型示意图：

3.padding的设置方式：

1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2、写综合属性，用空格隔开

padding: 20px 30px 40px 50px ;/*上 右 下 左*/
padding: 20px 30px 40px;/*上 左右  下*/
padding: 20px 30px;/*上下 左右*/
padding: 20px;/*上下左右*/

4.一些标签默认有padding

比如ul标签，有默认的padding-left值。

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器

*{
  padding:0;
  margin:0;    
}

But，这种方法效率不高。

所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表，reset.css）

https://meyerweb.com/eric/tools/css/reset/

5.border边框三要素：粗细，线性样式，颜色

border: solid

如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。

border-width:粗细，设置方式同padding一样
border-style:线性样式
- solid：实线
- dotted：点线
- dashed:虚线
- donble：双线
border-color:颜色
- transparent：透明色
border-radius:设置圆角或圆、半圆（ border-radius:5px;）上下左右
border-top:上
border-bottom:下
border-left:左
border-right:右

使用border来制作小三角

/*小三角 箭头指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

6.margin

margin：外边距的意思。表示边框到最近盒子的距离。(兄弟之间)

/*表示四个方向的外边距离为20px*/
margin: 20px;
/*表示盒子向下移动了30px*/
margin-top: 30px;
/*表示盒子向右移动了50px*/
margin-left: 50px;
margin-bottom: 100px;

外边距合并：

有称塌陷，以设置的最大margin距离为基准
margin在水平方向上不会出现外边距合并现象
margin子垂直方式上回出现外边距合并现象

1.1.6 常用格式化排版

1.1.6.1 字体属性

font-family：设置字体
```
body{
    font-family:'Microsoft Yahei','宋体','黑体';
}
```
如果设置成inherit，则表示继承父元素的字体。
font-size：设置字体大小
- 字体大小单位
  - px：绝对单位，也叫固定单位，不管在多少尺寸的屏幕下，始终是当前的尺寸
  - em：相对单位，相对于当前盒子的字体大小
  - rem：相对单位，相对于html的字体大小
font-size:设置字体样式
- normal：正常
- italic：斜体
- 如果设置成inherit，则表示继承父元素的字体。
font-weight:设置字体粗细 100-900

取值范围：

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

5.font-color:

设置内容的字体颜色。

支持三种颜色值：

十六进制值如: ＃FF0000
一个RGB值如: RGB(255,0,0) 红黄蓝三要素
颜色的名称如: red

p {
  color: red;
}

1.1.6.2 文本属性

text-align:设置文本水平排列方式 只是在行内元素生效
- left:水平靠左
- right：水平靠右
- center：居中
- justify：两端对齐，只限于英文
vartical-align:设置文本垂直排列方式 display设置table-cell
- top：垂直向上
- middle：垂直居中
- bottom：垂直向下
line-height 行高设置和height一样高，效果为水平垂直居中

text-decoration

文字装饰。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

text-indent：设置文本缩进
- 常用单位：em
- 根据字体的大小进行取值
- 首行缩进相当于设置字体大小的两倍
letter-spacing：设置文字间的距离

word-spacing：设置英文单词之间的距离

#box p:hover{
    /*文本修饰*/
    text-decoration: underline;
}
#box2{
    /*字体大小*/
    font-size: 20px;
    /*设置文本缩进*/
    text-indent: 2em;
    letter-spacing: 2px;
    word-spacing: 10px;
}

1.1.7 display属性

display：显示方式

none：盒子隐藏
block：转化为块
inline：转化为行内
inline-block：转化为行内块
table-cell：转化为表格

1.1.8 背景属性

常用背景相关属性：

属性	描述
background-color	规定要使用的背景颜色。
background-image	规定要使用的背景图像。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background-position	规定背景图像的位置。
inherit	规定应该从父元素继承background属性的设置。

background-repeat取值范围：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承background-repeat属性的设置。

background-attachment取值范围：

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承background-attachment属性的设置。

background-position取值范围：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果只设置了一个关键词，那么第二个值就是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果只设置了一个值，另一个值就是50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果只设置了一个值，另一个值就是50%。可以混合使用`%`和`position`值。

示例：

body {
  background-color: red;
  backgraound-image: url(xx.png);
  background-size: 300px 300px;
  background-repeat: no-repeat;  /*不平铺*/
  background-position: center 
  background-position-x:100px;
  background-position-y:100px;
  background-position: 100px 100px;   (x轴，y轴)   0 0 是左上角 ，可以在网页上进行调试，一般0 -100 用的多 裁剪照片（-100是从-100的位置开始裁剪设置的图片宽高）
 
}

简写：

body { 
  background: red url(xx.png) no-repeat fixed center/300px 300px; 
}

雪碧图技术（精灵图技术）

CSS雪碧即[CSS Sprite](https://baike.baidu.com/item/CSS Sprite)，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分

CSS 雪碧图应用原理：
只有一张大的合并图，每个小图标节点如何显示单独的小图标呢？

其实就是截取大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

background-attach

设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

案例：

<!DOCTYPE html>
<html>
<head>
	<title>淘宝列表导航案例</title>
	<style type="text/css">

		.taobao_list{
			border-top:1px solid #eee;
			float: left;
		}
		.taobao_list ul{
			width: 292px;
			overflow: hidden;
			padding:0;
			margin: 0;
		}
		.taobao_list ul li{
			list-style: none;
			width: 71px;
			height: 75px;
			border: 1px solid #eee;
			float: left;
			border-top-color: transparent;
			border-left-color: transparent;
		}
		.taobao_list ul li a {
			text-decoration: none;
			text-align: center;
			display: block;
			font-size: 12px;
			color: #888;
		}

		span{
			display: block;
			width: 24px;
			height: 24px;
			background:url(image/site.png) no-repeat 0 0 ;
			background-size: 24px 595px;
			margin-left: 22px;
			margin-top: 10px;
		}
		.span1{
			background-position: 0 0;
		}
		.span2{
			background-position: 0 -44px;
		}
		.span3{
			background-position: 0 -88px;
		}
		.span4{
			background-position: 0 -132px;
		}
		.span5{
			background-position: 0 -176px;
		}
	</style>
</head>
<body>
	<div class="taobao_list">
		<ul>
			<li>
				<a href="#">
					<span class="span1"></span>
					<p>充话费</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span2"></span>
					<p>旅行</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span3"></span>
					<p>车险</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span4"></span>
					<p>游戏</p>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="span5"></span>
					<p>彩票</p>
				</a>
			</li>			
		</ul>
	</div>

</body>
</html>

1.1.8 浮动

1.1.8.1 什么是标准文档流

宏观的将，我们的web页面和ps等设计软件有本质的区别，web 网页的制作，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

标准文档流下有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写

如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

1.1.8.2 什么是浮动？

浮动：在css样式表中，用float来表示
float属性：
- none：表示不浮动，默认不浮动
- left：左浮动
- right：右浮动
- inherit：继承父元素的浮动属性
浮动的作用：实现元素并排
浮动对盒子产生的现象：
- 文字环绕：设置浮动属性的初衷
- “脱标”现象：脱离标准文档流，不在页面上占位置
- “贴边”现象：给盒子设置了浮动，会找浮动盒子的边
  - 如果找不到浮动盒子的边，会贴到父元素的边
  - 如果找到了浮动盒子的边，就会贴到浮动盒子的边
- 收缩效果
浮动带来的问题：撑不起父盒子的高度
清楚浮动的方式：
1. 给父盒子设置高度
2. clear:both
3. 伪元素清除法
4. overflow：hidden
- 给父元素添加固定高度
  - 存在的问题：不灵活，后期不易维护
  - 应用：万年不变导航栏
- 内墙法：给最后一个浮动元素的后面添加一个空的块级标签(为的是不影响布局，所以为空)，并且设置该标签的属性为clear:both;（当前元素左右两边不允许有浮动元素）
  - 存在的问题：冗余
  - clear：both
    
    clear：意思就是清除的意思。
    
    有三个值：
    
    left：当前元素左边不允许有浮动元素
    
    right：当前元素右边不允许有浮动元素
    
    both：当前元素左右两边不允许有浮动元素
```
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .father{
        width: 800px;
        margin: 100px auto;
        border: 1px solid #000;
    }
    .child1{
        /*width: 200px;*/
        height: 400px;
        background-color: red;
        float: left;
    }
    .child2{
        /*width: 300px;*/
        height: 200px;
        background-color: green;
        float: right;
    }
    .clear{
        clear: both;
    }
</style>


<div class="father">
    <div class="child1">mjj</div>
    <div class="child2">wusir</div>
    <div class="clear"></div>
</div>
```
- 伪元素清除法（推荐使用）
  - 在内墙法的基础上做的优化，使用了伪元素选择器中的::after
  - 给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置
  - ```
  <style>
      *{
          padding: 0;
          margin: 0;
      }
      .father{
          width: 800px;
          margin: 100px auto;
          border: 1px solid #000;
      }
      .child1{
          /*width: 200px;*/
          height: 400px;
          background-color: red;
          float: left;
      }
      .child2{
          /*width: 300px;*/
          height: 200px;
          background-color: green;
          float: right;
      }
      .clearfix::after{  /*新浪推荐写法*/
          content:'';
          display: block;  加入的这个元素是行内元素，转换为块级元素*/ 
          clear: both;
          /*visibility: hidden;   内容隐藏*/   
          /*height: 0;*/
      }	
  </style>
  
  <div class="father clearfix">
      <div class="child1">mjj</div>
      <div class="child2">wusir</div>
  </div>
```
- ```
.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}
```
  - overflow:hidden(常用)
    - 因为overflow:hidden;会形成BFC区域，形成BFC区域后，内部有它的布局规则——计算BFC的高度时，浮动元素也参与计算
      - 使用过程中，注意overflow:hidden;本身的含义：超出部分内容隐藏
      - overflow的值及其含义：
        
        visible：默认可见
        
        hidden：超出部分内容隐藏
        
        scroll：内容滚动
        
        inherit：继承父类的overflow属性
        
        父元素里面设置overflow:hidden可以让父元素也参与计算，可以清除浮动带来的破坏性
```
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .father{
        width: 800px;
        margin: 100px auto;
        border: 1px solid #000;
/*一旦设置一个Box盒子 除了overflow：visible；它会形成一个BFC,BFC它有布局规则： 它会让内部浮动元素计算高度*/
        overflow: hidden;
    }
    .child1{
        /*width: 200px;*/
        height: 400px;
        background-color: red;
        float: left;
    }
    .child2{
        /*width: 300px;*/
        height: 200px;
        background-color: green;
        /*float: right;*/
        /*overflow: hidden;*/
        float: left;
    }
</style>

<div class="father ">
    <div class="child1">mjj</div>
    <div class="child2">wusir</div>
</div>
```
    11.2.6.2 BFC
    
    参考 https://blog.csdn.net/riddle1981/article/details/52126522
    1. BFC的定义
      - BFC(Block formatting context)，直译为”块级格式化上下文”
      - 它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干
    2. BFC的布局规则
      - 内部的Box会在垂直方向，一个接一个地放置，即块级标签，独占一行
      - Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠，即外边距合并（塌陷）
      - 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此，即贴边现象
      - BFC的区域不会与float元素重叠
      - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
      - 计算BFC的高度时，浮动元素也参与计算
    3. 哪些元素会生成BFC？
      - 根元素
      - float属性不为none，即设置了浮动
      - position的值为 absolute（绝对定位）或 fixed（固定定位）
      - display的值为 inline-block，即设置为行内块
      - overflow不为visible，其他的均可，常用的是：overflow:hidden;

1.1.8.3 盒子居中：margin：0 auto;

<!DOCTYPE html>
<html>
<head>
	<title>
		盒子居中
	</title>
	<style type="text/css">
		.site-header{
			background-color: orange;
			width: 100%;
			height: 100px;
		}
		.in{
			background-color: red;
			width: 800px;
			height: 100px;
			margin: 0 auto;
			/*水平居中盒子*/
			text-align: center;
			/*水平居中文字*/
		}
	</style>
</head>
<body>
	<div class="site-header">
		<div class="in">
			水平居中文字
		</div>
	</div>
</body>
</html>

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外大家一定要知道margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

1.1.9 定位

1.1.9.0 几种定位方式

静态定位：position:static; 默认值
相对定位：position:relative;
- 特征：
  - 与标准流下的盒子没有任何区别
  - 留坑，会影响页面布局
- 设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
- 作用：做‘子绝父相“布局方案的参考
- 参考点：以原来的盒子的位置坐参考点进行移动

3.绝对定位：position:absolute;

特征：
- 脱标，不在页面上占位置
- 压盖现象
- 子绝父相：以最近的父元素的左上角为参考点进行定位
参考点：
- 如果单独设置一个盒子为绝对定位
  - 用top来描述，它的参考点是以body的0,0 为参考点
  - bottom，参考点是以游览器的左下角为参考点
- 以父辈盒子作为参考点
- 1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
  
  2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
  
  3.不仅仅是父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点
  
  注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
  
  还要注意，绝对定位的盒子无视父辈的padding
  
  应用：

绝对定位的盒子居中

当做公式记下来吧！

*{
   padding: 0;
   margin: 0;
}
.box{
   width: 100%;
   height: 69px;
   background: #000;
}
.box .c{
   width: 960px;
   height: 69px;
   background-color: pink;
   *margin: 0 auto;*/
   position: relative;
   left: 50%;
    margin-left: -480px;
   /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
 }

4.固定定位：position:fixed;

固定当前的元素不会随着页面滚动而滚动

特征：
- 脱标
- 固定不变
- 提高层级，遮盖现象
参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告

1.1.9.1 父相子绝：（重点）

子绝父相：以最近的父元素的左上角为参考点进行定位

示例：

<style>
    *{
        padding: 0;
        margin: 0;
    }
    body{
        color: #fff;
    }
    ul{
        list-style: none;
    }
    #box{
        width: 1226px;
        height: 100px;
        margin: 0 auto;
        background-color: #000;
    }
    #box ul{
        /*overflow: hidden;*/
        padding: 12px 0 0 30px;
        /*width: 500px;*/
        height: 88px;
        /*background-color: red;*/
    }
    #box ul li{
        float: left;
        width: 60px;
        height: 58px;
        /*padding-top: 30px;*/
    }
    #box ul li.active{
        width: 100px;
        height: 88px;
        background-color: green;
        position: relative;
    }
    #box ul li.active .box{
        position: absolute;
        width: 234px;
        height: 600px;
        background-color: rgba(0,0,0,.5);
        top: 88px;
        left: -30px;
    }
    .clearfix:after{
        content: '';
        clear: both;
        display: block;
    }
</style>

<div id="box">
    <ul class="clearfix">
    	<li class="active">
    		<div class="box"></div>
    	</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    	<li>6</li>
    </ul>
</div>

1.1.9.2 z-index

使用条件：只适用与定位的元素

这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用
通常布局我们使用父相子绝，比较的是父元素的z-index值，哪个父元素的z-index值高，表示子元素的层级越高

1.2.0 box-shadow 阴影

1.box-shadow:水平距离垂直距离模糊程度颜色（默认外设outset）

2.默认是外阴影，设置内阴影再在后面加inset

3.水平距离和垂直距离一般设置0

4.补充：transition:all .2s linear;表示设置动画（平滑移动)

<!DOCTYPE html>
<html>
<head>
	<title>边框阴影</title>
	<style type="text/css">
		body{
			padding:0;
			margin:0;
		}
		.shadow{
			position: relative;
			width: 200px;
			height: 200px;
			margin:50px auto;
			background-color: purple;
			/*box-shadow: 20px 20px 50px red inset;*/
		}
		.shadow:hover{
			/*position: absolute;*/
			top:-4px;
			box-shadow:0 0px 15px #e0e0e0; 
	</style>
</head>
<body>
	<div class="shadow"></div>
</body>
</html>

1.2.1 单列和多列布局

<!DOCTYPE html>
<html>
<head>
	<title>单列布局</title>
	<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
			margin: 0;
			padding:0;
		}

		.header{
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: black;
		}
		.container{
			width: 1200px;
			height: 100%;
			margin: 0 auto;
			background-color: green;
		}
		.header .container{
			height: 60px;
			background-color: orange;
		}
		.wrap{
			width: 100%;
			height: 100%;
		}
		.wrap .container{
			height: 100%;
			background-color: red;
		}
		.footer{
			width: 100%;
			height: 60px;
		}
		.footer .container{
			/*height: 200px;*/
			background-color: #e0e0e0;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="container">
			header
		</div>
	</div>
	<div class="wrap">
		<div class="container">
			11
		</div>
	</div>
	<div class="footer">
		<div class="container">
			
		</div>
	</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>多列布局</title>
	<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
			margin: 0;
			padding:0;
		}

		.header{
			width: 100%;
			height: 60px;
			line-height: 60px;
			text-align: center;
			background-color: black;
		}
		.container{
			width: 1200px;
			height: 100%;
			margin: 0 auto;
			background-color: green;
			overflow: hidden;
		}
		.header .container{
			height: 60px;
			background-color: orange;
		}
		.wrap{
			width: 100%;
			height: 100%;
		}
		.wrap .container{
			height: 100%;
			background-color: red;
		}
		.wrap .container .left{
			float: left;
			width: 200px;
			height: 100%;
			background-color: purple;
		}
		.wrap .container .right{
			float: right;
			width: 200px;
			height: 100%;
			background-color: #333;
		}
		.wrap .container .center{

			height: 100%;
			background-color: yellowgreen;

		}
		.footer{
			width: 100%;
			height: 60px;
		}
		.footer .container{
			/*height: 200px;*/
			background-color: #e0e0e0;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="container">
			header
		</div>
	</div>
	<div class="wrap">
		<div class="container">
			<div class="left">left</div>
			<div class="right">right</div>
			<div class="center">center</div>
		</div>
	</div>
	<div class="footer">
		<div class="container">
			
		</div>
	</div>

</body>
</html>

1.2.2 DIV+CSS规范命名大全集合

http://www.divcss5.com/jiqiao/j4.shtml

1.2.3 行内元素水平垂直居中

text-align：center 水平居中

vertical-align：middle 垂直居中

1.2.4 块级元素水平垂直居中

1.position+margin：

<!DOCTYPE html>
<html>
<head>
	<title>
		块级元素水平居中1
	</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			position: relative;

		}
		.child{
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="child">
			
		</div>
	</div>

</body>
</html>

2.display: table-cell; 将块级元素转为单元格形式，同事设置水平，垂直居中

<!DOCTYPE html>
<html>
<head>
	<title>
		块级元素水平居中2
	</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			line-height: 100px;
		}
		.child{
			width: 100px;
			height: 100px;
			background-color: green;
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="child">
			aa
		</div>
	</div>

</body>
</html>

3.纯定位计算 positon

<!DOCTYPE html>
<html>
<head>
	<title>
		块级元素水平居中3
	</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: red;
			position: relative;
			vertical-align: middle;
			text-align: center;
			line-height: 100px;
		}
		.child{
			width: 100px;
			height: 100px;
			position: absolute;
			background-color: green;
			top: 50%;
			left: 50%;
			margin-left: -50px;
			margin-top: -50px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="child">
			aa
		</div>
	</div>

</body>
</html>

补充：text-align起作用的元素

text-align不是只对文字和图片起作用，比较准确的说法是：text-align对文字，inline元素（行内元素）以及inline-block元素（行内块元素）起作用，但对块元素不起作用。

posted @ 2019-11-27 17:33 hanfe1 阅读(351) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

第十一章 前端开发-css

第十一章 前端开发-css

1.1.0 css介绍

1.1.1 css语法

1.1.2 css引入方式

1.1.2.1 内嵌样式

1.1.2.2 行内样式表

1.1.2.3 外部样式表

1.1.2.4 三种引入方式的优先级

1.1.3 css选择器

1.1.3.1 基础选择器

1.1.3.2 高级选择器

1.1.3.3 伪类选择器

1.1.3.4 属性选择器

1.1.3.5 伪元素选择器

1.1.4 层叠性和继承性

1.1.5 盒模型

1.1.6 常用格式化排版

1.1.6.1 字体属性

1.1.6.2 文本属性

1.1.7 display属性

1.1.8 背景属性

雪碧图技术（精灵图技术）

1.1.8 浮动

1.1.8.1 什么是标准文档流

1.1.8.2 什么是浮动？

clear：both

overflow:hidden(常用)

11.2.6.2 BFC

1.1.8.3 盒子居中：margin：0 auto;

1.1.9 定位

1.1.9.0 几种定位方式

1.1.9.1 父相子绝：（重点）

1.1.9.2 z-index

1.2.0 box-shadow 阴影

1.2.1 单列和多列布局

1.2.2 DIV+CSS规范命名大全集合

1.2.3 行内元素水平垂直居中

1.2.4 块级元素水平垂直居中

公告

第十一章前端开发-css

第十一章前端开发-css