11:浮动及应用
1:如何把盒子放在合适的位置
css3的定位机制有3种:普通流,浮动,定位
2:文档流
一个网页内标签元素正常的从上到下,或从左到右排列你的意思
3:浮动
1:浮动是指浮动属性的元素会脱离普通控制流的控制,移动到器父元素指定位置的过程
属性值 | 描述 |
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 元素不浮动 |
2:浮动详解
3:吧块及元素转换成行内块元素,也可以实现放在一行上,但是元素之间有空隙,不方便处理。
4:浮动元素的内幕特性:
浮动的元素总是找他最近的父及元素对齐。但是不会超出内边距的范围。
特别注意:浮动的盒子需要和标准流的父亲搭配使用。
4:版心和布局流程
版心就是网页中主题内容所在的区域,常见的宽度有 960px ,980px, 1000px, 1200px.
布局流程:
1:确定页面的版心
2:分析每个页面中的行模块,以及每个行模块中的列模块
3:制作HTML页面和css文件
4:css初始化,通过用盒子模型的原理,哦谈过div+css 布局来控制网页中各个模块
案例:
1:一列固定宽度居中
2:两列左窄右宽性
3:通栏平均分布性
12:清除浮动
1:清除浮动的本质:
为了解决父级元素因为子集浮动引起内部高度为0 的问题。
给父盒子不指定高度,子盒子在文档流的情况下会把父盒子自动撑开。如果给子盒子设置浮动,就会引起父盒子高度为0的情况。
很多情况下,我们不方便给父亲高度,比如新闻,不知道里面的文字有多少,一般情况下,让里面的内容自动撑开盒子,不写死高度。
2:清除浮动的方法:
1:基本语法:
选择器 {clear:属性值} 属性值一般为both,同时清除两侧浮动的影响
2额外标签法:
是w3c推荐的语法是 通过在浮动元素末尾添加一个空标签。
结构比较差,不推荐使用
3:父级元素添加overflow属性
4:使用after伪元素清除浮动
:after 方式为空元素的升级版,好处是不用单独加标签
5:使用before 和after 双尾元素清除浮动
推荐大家使用
15:CSS四种定位及其应用
1:定位的属性
元素的定位主要包括定位模式和边偏移两部分
1:边偏移
top bottom left right
2:定位模式(position)
position常用的属性值:
值 | 描述 |
static | 自动定位(默认的定位方式) |
relative | 相对定位,相对于起源文档流的位置进行定位 |
absolute | 绝对定位,相对于其上一个已经定位的父元素进行定位 |
fixed | 固定定位,相对于浏览器窗口进行定位 |
2:静态定位
静态定位就是元素默认的定位方式,起始就是标准流的特性
静态定位下,无法通过边偏移属性来改变元素的位置。
一般是用它来清除定位的,一个原来有定位的盒子,不想加定位了,就写这句话。
3:相对定位(relative,自恋型)
注意:
- 相对定位最主要的一点是:他可以通过通过边偏移位置,但是原来所占有的位置,继续占有
- 其次:每次移动的位置,是以自己左上角为基点进行移动。
4:绝对定位(absolute,拼爹型)
5:何为子绝父相
1:
父级没有定位,则以浏览器为准对齐。
父级有定位,则以父级的定位为准 父亲可以是相对定位,亦可以是绝对定位*/,
2:子绝父相
子级是绝对定位,不会占有位置,可以放到盒子里面的任何位置。
父盒子布局时,需要占有位置,因此父亲只能是相对定位。
6:哈根达斯 案例
7:绝对定位水平垂直居中
算法:
水平:父盒子宽度的一般,自己盒子宽度的一般。
垂直: 父盒子高度的一般,自己盒子高度的一般。
8:淘宝焦点图案例
9:防新浪头部和广告
10:叠加次序
多个元素同时设置定位时,定位元素之间可能会发生重叠,
要想调整元素的堆叠顺序,可以对定位元素应用z-index层叠等级属性,z-index值月高,月在上面。
注意:
- z-index默认值是0;值越大,定位元素在层叠元素中月居上。
- 后面的数字没有单位。
- 只有相对定位,绝对定位,固定定位有此属性。
11:定位总结
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
静态 | 不脱标,正常模式 | 不可以 | 正常模式 |
相对 | 不脱标,占有位置 | 可以 | 相对于自身位置移动 |
绝对 | 脱标,不占有位置 | 可以 | 相对于定位的父级元素移动 |
固定 | 脱标,不占有位置 | 可以 | 相对浏览器移动 |
12:固定绝对定位模式总结
13:定位盒子的模式转换。
跟浮动一样,元素添加了 绝对定位和固定定位之后 , 元素模式发生转换,都转换成 行内块模式,
16:学成网案例
/* css初始化
*/
* { /* 清除内外边距 */
margin: 0;
padding: 0;
}
ul { /* 去掉列表的样式小点 */
list-style: none;
}
.clearfix:before, .clearfix:after { /* 清除浮动 */
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
a {
color: #050505;
text-decoration: none;/* 取消下滑线 */
}
input {
border: 0; /* 所有的表单边框为0 */
box-sizing: border-box; /* css3盒子模型border和padding都包含到withe r里面去*/
}
.container { /* 因为我们的版心宽度都是1200 都要居中对齐 我们就声明一个公共类 */
width: 1200px;
margin: 0 auto;
}
/* css初始化结束 *//* 页面头部分 */
body {
background-color: #f3f5f7; /* 整个页面的背景色 */
}
header {
height: 100px;
/* background-color: pink; */
overflow: hidden;
}
nav {
width: 1366px;
height: 42px;
margin: 26px auto;
}
.logo {
float: left;
}
/* 导航栏部分 */
.navbar {
float: left;
height: 42px;
line-height: 42px; /* 行高等于高,垂直居中 */
margin-left: 50px;
/* background-color: purple; */
}
.navbar ul li {
float: left; /* 让课程 首页 职业规划一行显示 */
}
.navbar ul li a {
display: block;
height: 42px;
padding: 0 10px; /* 上下0, 左右10 像素 */
}
.navbar ul li a:hover {
border-bottom: 2px solid #7acdfb;
}
/* 搜索框部分 */
.search {
width: 410px;
height: 38px;
border: 1px solid #b6e1f9;
float: left;
margin-left: 165px;
}
.search input[type=text] {/* 属性选择器 type 为 text 的文本框 */
width: 360px;
height: 38px;
padding-left: 20px; /* 做内边距,目的是将文字往后以。 */
float: left;
}
.search input[type=submit] {
width: 50px;
height: 38px;
float: left;
background: #00a4ff url(images/) center center no-repeat;
}
/* 个人中心部分 */
.personal {
float: left;
height: 42px;
line-height: 42px;
margin: 0 15px 0 35px;
}
.personal img {
margin: 0 15px;
}
/* banner部分 */
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {/* 版心 */
height: 420px;
background: url(images/) 0 0 no-repeat;
position: relative; /* 父亲相对定位 */
}
.banner .slidebar { /* 左侧边侧栏 */
width: 190px;
height: 420px;
float: left;
/* background-color: pink; */
background: rgba(0, 0, 0, );
}
.slidebar li a {/* 左侧边侧栏中的连接元素 */
color: #fff;
font-size: 14px;
padding: 0 20px;
display: block; /* a是行内元素,没有大小,需要转换 */
line-height: 45px; /* 单行垂直居中,个人经验,有了行高,可以不给高度 */
}
.slidebar li a:hover {/* 左侧边侧栏中的连接元素 */
color: #00a4ff;
}
.slidebar a span {/* 左侧边侧栏中的符号元素 */
float: right;
font-family: arial; /* 一般情况下,我们符号都用 这个字体 */
}
.timetable {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.timetable dt {
height: 50px;
line-height: 50px; /* 注意 */
background-color: #9bceea;
text-align: center; /* 文字水平居中 */
color: #fff; /* 字体颜色 */
font-weight: 700; /* 字体加粗 */
letter-spacing: 2px; /* 字间距 */
margin-bottom: 5px; /* 外边距 */
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top: 12px;
box-sizing: border-box; /* css3盒子模型border和padding都包含到withe r里面去*/
}
.timetable dd:last-child { 结构伪类选择器
border: 0;
}
.timetable dd h4 {
font-size: 16px;
font-weight: none;
color: #4e4e4e;
}
.timetable dd p {
color: #a5a5a5;
font-size: 14px;
}
.timetable dd a {
display: block;
border: 1px solid #ccedff;
color: #ccedff;
text-align: center;
/* width: 193px; */
height: 38px;
line-height: 38px;
font-weight: 700;
color: #00a4ff;
}
.circle {
width: 180px;
height: 22px;
/* background-color: pink; */
position: absolute;
left: 50%;
margin-left: -80px;
bottom: 10px;
}
.circle li {
float: left;
width: 12px;
height: 12px;
background: rgba(255, 255, 255, );
margin: 6px 8px;
border-radius: 50%;
}
.circle .current {
width: 19px;
border-radius: 5px;
background-color: #fff;
}
.recommend {
height: 60px;
background-color: #fff;
margin-top: 10px;
line-height: 60px;
box-shadow: 0 2px 2px rgba(0, 0, 0, );
/* 盒子阴影 水平位置 垂直位置 模糊距离 影子颜色 */
}
.recommend a {
padding: 0 35px;
border-right: 1px solid #ccc;
}
.recommend a:hover {
color: #00a4ff;
}
.recommend a:first-child {
color: #00a4ff;
}
.recommend a:last-child {
color: #00a4ff;
border: 0;
float: right;
font-size: 14px;
}
1:元素的显示和隐藏
1:display显示
- display 设置检索对象是否及如何显示;
- display:none 是隐藏对象。
- display:block 除了转换换成块及元素之外,同时还有显示元素的意思。
特点:隐藏只管后不再保留位置。
2:visibility 可见性
设置或检索是否显示对象
visible: 对象可显示
hidden:对象隐藏
特点:隐藏之后保留愿所有的位置,
3:overflow 溢出
检索或设置 当对象的内容超过其指定的高度及宽度时如何管理内容
visible:不见贴内容也不添加滚动条
auto:超出自动显示滚动条,不超出不显示滚动条。
hidden:不显示超出对象尺寸的内容,超出的部分隐藏掉。
scroll: 不管超出的内容,总是显示滚动条。
17:CSS溢出文字隐藏
1:鼠标样式 cursor
设置或检索在对象上移动的鼠标采用何种系统定义的光标形状。
cursou: default 小白| pointer 小手 | move移动 | text 文本
2:取消轮廓线 outline
是绘制元素周围的一条线,位于边框边缘的外围,
直接写法是: outline: 0;
3:防止拖缀文本域 resize
resize: none; 可设置防止文本域托追问题
4:行内块和文字对齐
带有宽度的块级元素 居中对齐 : margin:0 auto;
文字的居中对齐:text-align:center;
vertical-align 设置或检索对象内容的垂直对齐方式。
不影响块及元素的内容对齐,也就说对于块及元素无效;他只对于行内元素和行内块元素设置垂直对齐。
我们可以通过vertical-align 设置文字和图片,表单的垂直对齐了。
5:去除图片底侧缝隙
图片或表单等行内块元素,他们的底线会和父盒子的极限对齐,会造成图片的底侧会有一个缝隙。
解决办法:
1:转换成块及元素,
2:给img设置顶端对齐就好了。
6:溢出的文字隐藏
1:word-break
- normal 使用浏览器默认的换行规则
- break-all 允许在单词内换行
- keep-all 只能在半角空格或连字符出换行。
2:white-space
设置或检索 对象内 文本的显示方式 ,通常在浏览器内一行显示。
- normal 默认处理方式
- nowrap 强制在一行内显示所有文本,直到文本结束后用br标记 对象才能换行。
3:超出的部分省略号显示 text-overflow
- clip 不显示省略标记,而是简单的裁剪
- ellipsis 超出的部分,省略号代替。
18:CSS精灵技术
1:css精灵技术的背景及本质
1:背景:为了减少服务器接收和发送的次数,提高页面的加载速度,
2:本质:是一种处理网页背景图骗的方式,
2:css精灵技术的使用
使用css的background-images,background-repeat和background-position属性进行背景定位。
div {
width: 15px;
height: 20px;
border: 1px solid pink;
margin: 50px auto;
background: url(images/) 0 -100px no-repeat;
/* 根据浏览器中的坐标轴,图片向上移动,准确定位 */
}
3:拼出自己的名字
4:王者荣耀导航栏
5:ps制作精灵图
新建文件(北京内容透明)——选中图层(右键,复制图层,到新建的图层)
保存——先保存一份psd文件,再保存一份png文件。
6:运用制作精灵图
19:字体图标
1:字体图标的优点
- 可以做跟图片一样可以做的事情,改变透明度,旋转度等
- 但本质其实还是文字,可以随意改变颜色,产生隐隐,透明效果等等。
- 本身的体积更小,但携带的信息并没有减弱
- 几乎支持所有的浏览器
- 移动端必备良药
2:svg格式上传转换字体格式
UI设计人员给我们svg文件,我们需要转换成我们页面能使用的字体文件。推荐网站:
上传流程:
icomoon APP——> import icons——> generate fonts——>左上角(new set from selection)——>把图片上传到 UNtitled Set
3:下载字体图标
下载流程:
4:复制需要的字体文件
复制fonts文件夹,
1:第一步:在样式里面声明,告诉别人,我们自己定义的字体。
@font-face { /* 电脑中没有的字体,我们需要声明 */
font-family: 'icomoon';
src: url('fonts/');
src: url('fonts/#iefix') format('embedded-opentype'),
url('fonts/') format('truetype'),
url('fonts/') format('woff'),
url('fonts/') format('svg');
font-weight: normal;
font-style: normal;
}
2:给盒子使用字体:
span {
font-family: "icomoon"; /* 一定保证和上面的 font-family相同。 */
}
3:盒子里面添加结构
span {
font-family: "icomoon"; /* 一定保证和上面的 font-family相同。 */
font-size: 100px;
color: pink;
}
5:追加新图标字体的方法
div::before {
font-family: "icomoon"; /* 一定保证和上面的 font-family相同。 */
font-size: 100px;
color: pink;
content: "\e900";
/* height: 100px;
width: 100px;
background-color: purple; */
}
20:滑动门技术及应用
1:滑动门技术的原因
为了是各种特殊形状的背景能够适应元素中文本内容的多少,出现了css滑动门技术。
2:滑动门实现的原理
核心技术就是利用css精灵技术(主要是背景位置)和padding值撑开宽度,以便能使适应不同数字的导航栏。
<li><a href=""><span>导航栏</span></a></li>
总结:
- a设置背景左侧,padding撑开合适宽度
- span设置背景右侧,padding撑开合适宽度,(剩下的又文字撑开盒子宽度)
- 之所以a包含span,是因为整个导航栏都可以点击
3:滑动门技术的实现
4:微信导航栏
5:伪元素的本质
伪元素选择器,本质是插入一个元素,只不过是行内元素。
6:鼠标经过显示边框
7:认识过度效果
过度(transition)是css3中觉有颠覆性的特征之一,不用任何,能从一中样式转换成另一种样式。
css3里使用补间动画(过度效果),并且只有当属性发生变化时,存在两种效果,既可以实现平滑的过度。
语法格式:
属性 | 描述 |
transitin | 简写属性,用于在一个属性中设置四个过度属性 |
transition-property | 规定应用的css属性的名臣 |
transition-durperty | 定义过度效果话费的时间。默认是0 |
transition-timing-function | 规定过度效果的时间曲线,默认是“ease” linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 |
transition-delay | 规定过渡效果何时开始,默认是“0” |
过度效果:
8:防小米效果
21:CSS新增2D和3D属性及应用
1:2D 变形移动
<style>
div {
width: 100px;
height: 100px;
background-color: pink;/* transform: translateX(x,y);
变形 移动 */
transition: all 0.5s;}
div:active {/* div:actice 鼠标点击没有松开鼠标的时候触发的状态; *//* transform: translate(50px);默认x轴移动
transform: translateX(50px); x轴移动
transform: translateY(50px); Y轴移动 */
transform: translate(50px,50px);/* x,y轴移动 */}</style>
2:让定位的盒子居中对齐
<style>
div {
width: 200px;
height: 200px;
background-color: pink;/*transform: translate(100px); 水平移动100像素 *//*transform: translate(50%); translate 如果平移的是%
不是一父级的盒子为准,而是以自己的盒子为准。 *//* 让我们定位的盒子居中对齐: 先走浏览器的一般,再走自己盒子的
一般; */
position: absolute;
left: 50%;/* 一父级的宽度为准 */
top: 50%;
transform: translate(-50%, -50%);/* 再走自己盒子的一般 */}</style>
3:2D变形缩放
transform: scale(2); /* X 水平缩放 Y垂直缩放 如果只写一个,
两边都缩放都缩放 */
4:2D变形旋转
transform: rotate(45deg); /* deg 度数 旋转45度*/
5:变形中心点
transform-origin: 可以调整元素转换变化的原点
transform-origin: top left; 以左上角旋转,
如果精确一些,就可以用像素;
transform-origin: 20px 30px;
6:旋转的我的家
7:2D变形切斜
倾斜:skew(deg,deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度,竖直方向保持不变。
可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0
3D变形:
2d x y
3d x y z
左手坐标系
伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图
简单记住他们的坐标:
x左边是负的,右边是正的
y 上面是负的, 下面是正的
z 里面是负的, 外面是正的
8:rotateX: 就是沿着 x 立体旋转
9:rotateY:沿着y轴进行旋转
10:rotateZ:沿着z轴进行旋转
11:体会透视
透视(perspective)
电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。
透视可以将一个2D平面,在转换的过程当中,呈现3D效果。
- 透视原理: 近大远小 。
- 浏览器透视:把近大远小的所有图像,透视在屏幕上。
- perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素
理解透视距离原理:
### translateX(x)
仅水平方向移动**(X轴移动)
主要目的实现移动效果
### translateY(y)
仅垂直方向移动(Y轴移动)
### translateZ(z)
transformZ的直观表现形式就是大小变化,实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective属性)。比如设置了perspective为200px;那么transformZ的值越接近200,就是离的越近,看上去也就越大,超过200就看不到了,因为相当于跑到后脑勺去了,我相信你正常情况下,是看不到自己的后脑勺的。
### translate3d(x,y,z)
[注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值
12:3D变形移动
13:translate3D
/*transform: translate3d(x, y, z); x 和 y 可以是 px 可以是 % 但是z 只能是px*/
transform: translate3d(100px, 100px, 300px);
14: 开门见媳妇
15:两面翻转的图片
transform-style: preserve-3d
保留当前空间位置;是图片扁平化
backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见
16:体会动画
动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
语法格式:
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意
keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}
animation-iteration-count:infinite; 无限循环播放
animation-play-state:paused; 暂停动画"
div {
width: 100px;
height: 100px;
background-color: pink;
animation: go 2s ease 0s infinite alternate; 引用动画
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
/*动画名称是自己定义的 go google*/
/*infinite 无限循环*/
/*一般情况下,我们就用前2个 animation: go */
}
@keyframes go{ /* 定义动画 */
from {
transition: translateX(0);
}
to {
transform: translateX(600px);
}
}
</style>
17:多组动画
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>
div {
width: 200px;
height: 200px;
background-color: pink;
animation: go 2s infinite;/* 引用动画 */}
@keyframes go {
0% { /* 起始位置 from*/
transform: translate3d(0, 0, 0);}
25% {
transform: translate3d(800px, 0, 0);}
50% {
transform: translate3d(800px, 400px, 0);}
75% {
transform: translate3d(0, 400px, 0);}
100% {/* 结束位置 t0 */
transform: translate3d(0, 0, 0);}
}
</style></head><body><div></div></body></html>
18:奔跑吧,汽车
19:无缝滚动效果
22:CSS3伸缩布局及应用
0:传统三等份
1:伸缩布局三等份
伸缩布局(CSS3)
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。
<style>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;/* 父级盒子添加 flex */
display: flex;/* 伸缩布局模式 */}
section div {/* 给子盒子不加浮动,取消宽度,添加份数不加单位 */
height: 100%;}
section div:nth-child(1) {
background-color: pink;
flex: 1;}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 2;}
section div:nth-child(3) {
background-color: pink;
flex: 1;}</style>
2:伸缩布局固定宽度
如果给一个子盒子固定宽度,其他子盒子会根据所剩的父盒子伸缩布局。
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。
Flex布局的语法规范经过几年发生了很大的变化,也给Flexbox的使用带来一定的局限性,因为语法规范版本众多,浏览器支持不一致,致使Flexbox布局使用不多
flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
3:伸缩布局排列方式
.flex-direction调整主轴方向(默认为水平方向 父级添加)
flex-direction: column 垂直排列
flex-direction: row 水平排列
/* 父级盒子添加 flex 最小/最大宽度 排列方式 */
display: flex; /* 伸缩布局模式 */
min-width: 500px;
flex-direction: column;
4:携程
各属性详解******
子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
2.flex-direction调整主轴方向(默认为水平方向)
flex-direction: column 垂直排列
flex-direction: row 水平排列
携程网手机端地址
3、justify-content调整主轴对齐(水平对齐)
子盒子如何在父盒子里面水平对齐
| 值 | 描述 | 白话文 |
| ------------- | ------------------------ | ----------------------- |
| flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
| flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
| center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
| space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子,中间的平均分布空白间距 |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
4、align-items调整侧轴对齐(垂直对齐)
子盒子如何在父盒子里面垂直对齐(单行)
| 值 | 描述 | 白话文 |
| ---------- | --------------- | --------------------------- |
| stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器(子元素不给高度的前提下) |
| center | 项目位于容器的中心。 | 垂直居中 |
| flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
| flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
| | | |
5、flex-wrap控制是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理
| 值 | 描述 |
| ------------ | ---------------------------------------- |
| nowrap | 默认值。规定灵活的项目不拆行或不拆列。 不换行,则 收缩(压缩) 显示 强制一行内显示 |
| wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
| wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。 |
| | |
| | |
6、flex-flow是flex-direction、flex-wrap的简写形式
~~~css
flex-flow: flex-direction flex-wrap;
~~~
白话记: flex-flow: 排列方向 换不换行;
两个中间用空格
例如:
~~~css
display: flex;
/* flex-direction: row;
flex-wrap: wrap; 这两句话等价于下面的这句话*/
flex-flow: column wrap; /* 两者的综合 */
~~~
7、align-content堆栈(由flex-wrap产生的独立行)多行垂直对齐方式齐
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个属性的设置才会起作用。
| 值 | 描述 | 测试 |
| ------------- | ------------------------ | ---- |
| stretch | 默认值。项目被拉伸以适应容器。 | |
| center | 项目位于容器的中心。 | |
| flex-start | 项目位于容器的开头。 | |
| flex-end | 项目位于容器的结尾。 | |
| space-between | 项目位于各行之间留有空白的容器内。 | |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | |
8、order控制子项目的排列顺序,正序方式排序,从小到大
用css 来控制盒子的前后顺序。 用order 就可以
用整数值来定义排列顺序,数值小的排在前面。可以为负值。 默认值是 0
~~~css
order: 1;
~~~
此知识点重在理解,要明确找出主轴、侧轴、方向,各属性对应的属性值
23:BFC
1:认识BFC
BFC(块级格式化上下文)
BFC(Block formatting context)
直译为"块级格式化上下文"。
BFC是一个独立的渲染区域,它规定了整个盒子内部如何布局,并且与这个盒子外部毫不相干。
2:块级元素具有BFC的条件
1:元素的显示模式
我们前面讲过 元素的显示模式 display。
分为 块级元素 行内元素 行内块元素 ,其实,它还有很多其他显示模式。
2:那些元素会具有BFC的条件
不是所有的元素模式都能产生BFC,w3c 规范:
display 属性为 block, list-item, table 的元素,会产生BFC.
3:块级元素触发BFC的属性
1:要给这些元素添加如下属性就可以触发BFC。
-float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible。
2:BFC布局规则特性:
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
4. BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
5. 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
4:BFC的作用:清除浮动
只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了。
计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
5:BFC作用:解决外边距合并
```
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
```
属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。
6:BFC的作用:制作右侧自适应的盒子问题
普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文
24:CSS补充知识
1:优雅降级和渐进增强
什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?
渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
类似 爬山,由低出往高处爬
<img src="media/" />
<b>优雅降级 graceful degradation:</b>
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
类似蹦极,由高处往低处下落
<img src="media/" />
区别:渐进增强是向上兼容,优雅降级是向下兼容。
个人建议: 现在互联网发展很快, 连微软公司都抛弃了ie浏览器,转而支持 edge这样的高版本浏览器,我们很多情况下没有必要再时刻想着低版本浏览器了,而是一开始就构建完整的效果,根据实际情况,修补低版本浏览器问题。
:2: 浏览器前缀
| 浏览器前缀 | 浏览器 |
| -------- | -------------------------------------- |
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
后面我们会有 常用的解决H5和C3 的兼容解决文件, 我们这里暂且不涉及。
3:背景渐变
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生。
兼容性问题很严重,我们这里之讲解线性渐变
语法格式:
~~~css
background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色);
~~~
~~~css
background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色位置....);
~~~
4:CSS W3C 统一验证工具
CssStats 是一个在线的 CSS 代码分析工具
```
网址是:
```
如果你想要更全面的,这个神奇,你值得拥有:
W3C 统一验证工具: ☆☆☆☆☆
因为它可以检测本地文件哦!!
5:CSS 压缩
通过上面的检测没有错误,为了提高加载速度和节约空间(相对来说,css量很少的情况下,几乎没啥区别),可以通过css压缩工具把css进行压缩。
w3c css压缩 网速比较慢
还可以去站长之家进行快速压缩。