文章目录

cssblock inline inline-block行高垂直居中 CSS继承细线边框padding会让盒子变大插入图片和背景图片的区别外边距合并盒子的大小盒子的圆角盒子阴影浮动浮动的特性清浮动 定位静态定位相对定位绝对定位子绝父相绝对定位的盒子水平/垂直居中固定定位模式转换**z-index** 其他outlineresizevertical-alignword-breakwhite-spacetext-overflow 推拉门字体图标HTML5伪类伪元素多背景transitiontransformflex布局BFC满足BFC条件BFC特性BFC用途 案例文字图片对齐实现盒子的垂直和水平居中

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像素的上边框或上内边距, 可以使用rgba,透明度100%可以为父元素添加overflow:hidden

盒子的大小

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

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

盒子的圆角

两个半径决定一个椭圆

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

border-radius: 150px 0;

border-radius: 50%;

盒子阴影

box-shadow

浮动

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

浮动的特性

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

清浮动

<div style="clear:both"></div>

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

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

定位

静态定位

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

相对定位

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

绝对定位

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

子绝父相

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

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

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

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

固定定位

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

模式转换

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

z-index

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

z-index: 2;

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

定位比浮动高一层

其他

outline

最佳实践是置零

<input type="text" style="outline: 0;"/>

resize

防止默认testarea 的拖拽能力

<textarea style="resize: none;"></textarea>

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

字体图标

声明

@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; }

加字体

span { font-family: "icomoon"; }

加结构

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

HTML5

<header> 语义 :定义页面的头部 页眉</header> <nav> 语义 :定义导航栏 </nav> <footer> 语义: 定义 页面底部 页脚</footer> <article> 语义: 定义文章</article> <section> 语义： 定义区域</section> <aside> 语义： 定义其所处内容之外的内容 侧边</aside>

伪类

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条件

block/table/list-item

float属性不为none

position为absolute或fixed

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

overflow不为visible。

BFC特性

BFC和BFC之间是干净的.

BFC用途

清浮动

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

解决外边距合并问题

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

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> <span></span> 文字 </div>

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

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> <span></span> 文字 </div> ### 实现盒子的垂直和水平居中 div { position: absolute; width: 200px; height: 200px; background-color: pink; top: 50%; left: 50%; transform: translate(-50%, -50%); /*translate 如果x -50% 跟父亲没关系，是走自己盒子宽度的一半*/ /*translate 如果y -50% 跟父亲没关系，是走自己盒子高度的一半*/ }