css学习笔记

css

block inline inline-block

• block

  • 宽高 padding margin都可设置
  • 独占一行

• inline

  • 宽由文字决定,水平padding,margin可以设置
  • 高度,垂直padding,margin无法设置
  • 不独占一行

• inline-block

  • 水平垂直padding margin都可以设置
  • 不独占一行
  • 和相邻行内元素（inline-block）在一行上,但是之间会有空白缝隙

行高

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J7oKOoeP-1570017852099)(css.assets/line2.png)]

垂直居中

行高等于盒子高度,可以让一行文本垂直居中

CSS继承

text-，font-，line-这些元素开头的都可以继承，以及color属性

细线边框

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示相邻边框合并在一起

padding会让盒子变大

插入图片和背景图片的区别

• 插入图片 我们用的最多 比如产品展示类
• 背景图片我们一般用于小图标背景 或者 超大背景图片

外边距合并

相邻两个盒子都有margin,取两者中的较大者

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SWVX01OU-1570017852100)(css.assets/margin塌陷1.png)]

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Gvflt7R-1570017852101)(css.assets/margin塌陷2.png)]

1. 可以为父元素定义1像素的上边框或上内边距, 可以使用rgba,透明度100%
2. 可以为父元素添加overflow:hidden

盒子的大小

• 子盒子会占满父盒子的空间

• 如果一个盒子没有给定宽度/高度(从父盒子继承),padding不会撑大盒子

盒子的圆角

两个半径决定一个椭圆

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mGmy4vtO-1570017852102)(css.assets/radius.jpg)]

border-radius: 150px 0;

border-radius: 50%;

盒子阴影

box-shadow

浮动

能让盒子浮起来,但是对文字不生效.

浮动的特性

1. 最初是为了文字环绕图片
2. 目的是多个盒子一行显示
   • inline-block无法放到右边,伸缩
3. 一般找一个父盒子把浮动盒子包起来, 高度不太合适给高度,因为父盒子里可能有文字
4. 内边距对浮动生效
5. 浮动只对下面的盒子有影响
6. 浮动会让盒子变成inline-block, 让inline变成inline-block
7. 浮动对文字无效
8. 浮动不会超过父盒子,如果超过,会被挤到下一排

清浮动

2. overflow为 hidden|auto|scroll BFC后面讲解

3. .clearfix:after 
   	{content: "";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   

4. .clearfix:before,.clearfix:after { 
     content:"";
     display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 */
   }
   .clearfix:after {
    clear:both;
   }
   

定位

静态定位

静态定位唯一的用处： 就是 取消定位。 position: static;

相对定位

相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。（相对定位不脱标）

绝对定位

• 不占位置
• 定位位置只针对已经定位的父元素(绝对,相对,固定都可以)

子绝父相

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

普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了

定位的盒子也可以水平或者垂直居中，有一个算法

1. 首先left 50% 父盒子的一半大小
2. 然后走自己外边距负的一半值就可以了 margin-left

固定定位

只认浏览器,(不认父元素)

模式转换

绝对定位和固定定位的元素,最后都自动转换成行内块.

z-index

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

z-index: 2;

1. z-index的默认属性值是0，越大离用户越近
2. 如果取值相同，html中后面覆盖前面的
3. 只针对定位生效

定位比浮动高一层

其他

outline

最佳实践是置零

resize

防止默认testarea 的拖拽能力

vertical-align

• 给img vertical-align:middle | top等等。 让图片不要和基线对齐
• 给img 添加 display：block; 转换为块级元素就不会存在问题了

word-break

• normal 使用浏览器默认的换行规则
• break-all 允许在单词内换行
• keep-all 只能在半角空格或连字符处换行

white-space

• normal : 　默认处理方式
• nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow

• clip : 　不显示省略标记（…），而是简单的裁切
• ellipsis : 　当对象内文本溢出时显示省略标记（…）

想实现...特性必须三个一起使用

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

推拉门

中间宽度随意变动

实际上就是三个box, 两头和中间,中间 repeat-x

字体图标

1. 声明

   @font-face {
     font-family: 'icomoon';
     src:  url('fonts/icomoon.eot?7kkyc2');
     src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
       url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
       url('fonts/icomoon.woff?7kkyc2') format('woff'),
       url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   

2. 加字体

   span {
   		font-family: "icomoon";
   	}
   

3. 加结构

   span::before {
   		 content: "\e900";
   	}
   或者  
     
   

HTML5

 语义 :定义页面的头部  页眉
  语义 :定义导航栏 
 
 语义: 定义 页面底部 页脚
 语义:  定义文章
 语义： 定义区域
 语义： 定义其所处内容之外的内容 侧边

伪类

div:first-letter

伪元素

div::after

多背景

background-image 背景图片可以写多个.用逗号分隔,后面的会被前面的覆盖,所以background-color 要写在最后(被覆盖)

url(test1.jpg) no-repeat scroll 10px 20px/70px 90px,url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

transition

transition: width 0.6s ease 0s, height 0.3s ease 1s;

一旦元素的css样式变化了，浏览器会自动地根据样式属性值的变化，自行执行过渡动画, 浏览器默认执行.

transform

移动,旋转和缩放,倾斜

transform: translate(100px, -50%); // 自己高度的一半
transform: translateX(100px);
transform: translateY(100px);
transform: scale(0.8, 1); //宽度变为了原来的 80%  高度不变
transform: scale(1, 0.8); //宽度变为了原来的 80%  高度不变
transform: scale(0.8); //宽高都是 0.8
transform: rotate(360deg); 
transform-origin: 10px 10px;transform: rotate(45deg)  // 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */ 
transform:skew(30deg,0deg);

flex布局

	section {
		width: 80%;
		height: 150px;
		/*background-color: pink;*/
		margin: 100px auto;
		display: flex;    /*父亲添加 伸缩布局*/
		flex-direction: column;  /*垂直分布*/
	}
	section div {	
		height: 100%;
		flex: 1;   /* 孩子的份数*/
	}
	section div:nth-child(1) {
		background-color: pink;
		flex:  2;
	}

BFC

BFC 有宽度/高度/外边距margin/内边距padding/边框 border的元素满足BFC

满足BFC条件

1. block/table/list-item

2. • float属性不为none

   • position为absolute或fixed

   • display为inline-block, table-cell, table-caption, flex, inline-flex

   • overflow不为visible。

BFC特性

BFC和BFC之间是干净的.

BFC用途

1. 清浮动

   只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式

2. 解决外边距合并问题

   属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了

3. BFC和浮动不叠加.

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1KAN2JFA-1570017852103)(css.assets/搜狗截图20190915190010.jpg)]

案例

文字图片对齐

vertical-align: middle; + margin-top: 10px; 可以移动图片,否则图片文字会一起移动

	span {
		display: inline-block;
		vertical-align: middle;
		width: 10px;
		height: 10px;
		background-color: pink;
	/*	margin-top: 10px;*/
	}
	
    

		  文字
	

实现盒子的垂直和水平居中

	div {
		position: absolute;
		width: 200px;
		height: 200px;
		background-color: pink;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/*translate 如果x -50% 跟父亲没关系，是走自己盒子宽度的一半*/
		/*translate 如果y -50% 跟父亲没关系，是走自己盒子高度的一半*/
	}

pink;
/* margin-top: 10px;*/
}

	  文字

### 实现盒子的垂直和水平居中

div {
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: pink;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*translate 如果x -50% 跟父亲没关系，是走自己盒子宽度的一半*/
	/*translate 如果y -50% 跟父亲没关系，是走自己盒子高度的一半*/
}