文章目录
HTML
图片
- 图片在网页上的呈现顺序是从左到右依次排放的,并且所有图片默认以底部对齐
- title=“鼠标划上去时的提示” alt=“图片加载失败后的文字”
- 对图片只设置宽度或者高度,图片会自己等比例的放大,但是如果同时设置宽高度,那就会以用户的宽高为主。
<img src="images/1.png" width="20%">
表格
- cellspacing="0"去掉了表格之间的间隙
- border 表格边框属性
- table 表格 tr一行 td 一个单元格 col一列
- colspan一行中的列合并
- rowspan一列中的行合并
<table border="1px" cellspacing="0">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr align="center">
<td></td>
<td>初级</td>
<td>中级</td>
<td>高级</td>
<td>专家</td>
</tr>
<tr align="center">
<td>标准</td>
<td>被产品怼的说不出话</td>
<td>跟产品互怼不相上下</td>
<td>怼的产品没话说</td>
<td>直接将其怼辞职</td>
</tr>
<tr align="center">
<td>用户A</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>用户B</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>用户C</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
表单
- action指定提交的地址
- 所有的input必须要有name属性
- input按钮的文字,使用value属性表示
- input必须放在form表单中才能提交
- input的type类型
text文本输入框
password密码输入框
radio单选框
checkbox多选框
button按钮
submit提交
reset重置
file文件选择框
布局与选择器
- 一个空div,默认宽度100%,高度为0
- id选择器,表示身份,不允许重名 #
- 标签选择器,对应所有标签
- 类别选择器class 表示拥有该类别的多个元素
选择器权重
行内样式优先级>id选择器>class选择器>标签选择器>通用选择器*
选择器选择的范围越小越精确优先级越高
选择器权重值
通用选择器*:0
标签选择器div:1
类别选择器.nav:10
ID选择器#id:100
行内样式:1000
文本属性
<style tylie="text/css">
.p1 { color:red } /* 文字颜色 */
.p2 { font-family: "微软雅黑" } /* 字体类型 */
.p3 { font-size: 26px; } /* 文字大小(高度) */
.p4 { font-weight: bold; } /* 文字加粗 */
.p5 { font-style: italic; } /* 文字倾斜 */
.p6 { text-indent: 60px; } /* 首行缩进 */
.p7 { text-align: center; } /* 水平对齐方式 */
.p8 { line-height: 100px; } /* 行高 */
.p9 { height: 100px; background-color: gray; line-height: 100px;} /* 垂直居中
.p10 { text-decoration: underline; } /* 文本修饰 */
</style>
图的使用
R红 所有颜色都是由红绿蓝组成的
G绿 图片格式 jpg gif png
B蓝
gif 支持动画 只有256种颜色 只有全透明和不透明两种模式
jpg 采用有损压缩算法 体积较小 不支持透明 不支持动画
png 采用无损压缩算法 体积也相对较小 支持透明背景 不支持动画
svg 用户保存颜色或图形简单的图形 可以用作图标
background-image: url(imgs/bg.png);
background-repeat: no-repeat; //图片不重复(图片默认是铺满重复的)
background-position: center center; //图片居中
元素浮动
-
元素浮动,就是让元素能够漂浮起来,比如图下绿色的元素漂浮后,红色的会往上移
-
可以左浮动和右浮动
-
clear:left/right/both
-
表示当前元素不受到到左、右、两边的影响
-
浮动元素在排列时,只参考前一个元素
-
浮动元素不会覆盖文字内容、图片内容、表单元素
HTML5新增标签和属性
常用新标签
- header:定义页面头部
- nav:定义页面导航链接部分
- footer:定义页脚
- article:定义文章
- section:定义区域
- aside:定义侧边
- datalist:标签定义选项列表。请与input元素配合使用,input的list属性和datalist的id属性进行绑定
- fieldset:可将表单内的相关元素分组,打包 和legend搭配使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header>定义页面头部</header>
<nav>定义导航栏</nav>
<footer>定义页面底部</footer>
<article>文章</article>
<section>定义区域</section>
<aside>定义侧边</aside>
<input type="text" value="输入值" list="params">
<datalist id="params">
<option>张三</option>
<option>李四</option>
<option>王五</option>
<option >赵六</option>
</datalist>
<br/><br/>
<br/>
<fieldset>
<legend>用户登录</legend>
用户名:
<input type="text"><br/>
密码:
<input type="password">
</fieldset>
</body>
</html>
常用新属性
属性**** | 用法**** | 含义**** |
---|---|---|
placeholder**** | 占位符提供可描述输入字段预期值的提示信息 | |
autofocus**** | 规定当页面加载时 input 元素应该自动获得焦点 | |
multiple**** | 多文件上传 | |
autocomplete**** | 规定表单是否应该启用自动完成功能 | |
required**** | 必填项 | |
accesskey**** | 规定激活(使元素获得焦点)元素的快捷键 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
用户名<input type="text" placeholder="提示信息" />
自动获取焦点<input type="text" autofocus>
上传多个文件<input type="file" multiple >
<!-- 使用autocomplete,需要submit,而且需要autocomplete -->
<form action="">
姓名<input type="text" autocomplete name="myName">
不能为空<input type="text" required accesskey="s">
<input type="submit">
</form>
</body>
</html>
新增的type属性值
类型**** | 使用示例**** | 含义**** |
---|---|---|
email**** | 输入邮箱格式 | |
tel**** | 输入手机号码格式 | |
url**** | 输入url格式 | |
number**** | 输入数字格式 | |
search**** | 搜索框(体现语义化) | |
range**** | 自由拖动滑块 | |
time**** | 选择小时和分钟 | |
date**** | 选择年月日 | |
datetime**** | 时间 | |
month**** | 选择年月 | |
week**** | 选择年和周 | |
color** | 选择颜色 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label> 姓名:<input type="text" placeholder="请输入姓名"></label>
<br/>
手机号:<input type="number">
<br/>
邮箱<input type="email"><br/>
所属学院<input type="text" list="school"><br/>
<datalist id="school">
<option>java</option>
<option>python</option>
<option>c</option>
<option>c#</option>
</datalist><br/>
出生日期<input type="date"><br/>
成绩<input type="number">
毕业时间
<input type="date">
<br/>
<input type="submit">
<input type="reset">
</fieldset>
</form>
</body>
</html>
多媒体标签
-
embed:标签定义嵌入的内容
-
audio:播放音频
-
video:播放视频
多媒体 embed
embed可以用来插入各种多媒体,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
多媒体 audio
HTML5通过标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放,如:
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
由于版权等原因,不同的浏览器可支持播放的格式是不一样的
<audio controls autoplay>
<source src="./1.mp3">
<source src="./1.mp3">
您的浏览器不支持
</audio>
多媒体 video
HTML5通过标签来解决音频播放的问题。
同音频播放一样,使用也相当简单,如下图
同样,通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度
多浏览器支持的方案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="./1.mp3" controls loop="-1"></audio>
为了兼容
<audio controls autoplay>
<source src="./1.mp3">
<source src="./1.mp3">
您的浏览器不支持
</audio>
为了兼容
<video src="./2.mp4" autoplay controls></video>
<video controls>
<source src="./2.mp4">
<source src="./2.mp4">
您的浏览器不支持
</body>
</html>
CSS属性
基本
border-radius: 5px; 边框变圆
margin 、padding 内外扩充
margin: 1px 2px 3px 4px 上 右 下 左
1px 2px 3px 上 左右 下
1px 2px 上下 左右
1px 上下左右
三大类型
display: block块元素 inline内联(行内)元素 inline-block 内联块元素
案例是让a标签能设置大小,它默认是行内元素,使用display:block来变为块元素
行内元素居中为text-align:center
块元素居中为 margin:auto
块元素
可以设置宽高大小,默认宽度为100%,并且独占一行
p ui li h1-h6 div form table
内联(行内)元素
无法设置宽高,元素大小随内容变化,所有元素默认排在一行,超出后会换行
i b span a
内联块元素
既能设置宽高,又能排在一行显示
img input
布局中的定位
positon: relative :父容器相对布局
absolute:子容器相对父容器绝对布局
fixed:固定在屏幕的某一个地方
语义化标签
- header 头部
- footer 尾部
- nav 导航
- article 文章(数据部分)
- aside 侧边栏
- main 主体
- section 区块,类似div
笔记
Div与Span
- div用来划分区域
- span用来文本修饰
- 他们默认都是没有样式的
CSS基础语法
选择器{
属性1:值1 ;属性2:值2
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
span{
background-color: blue;
}
</style>
</head>
<body>
<div>这是一个div</div>
<div>又是一个div</div>
<span>这是一个span</span>
</body>
</html>
内联样式与内部样式
内联样式
<div style="background-color: blue;">这是一个div</div>
内部样式
div{
width: 100px;
height: 100px;
background-color: red;
}
- 使用内部样式可以复用样式
- 内联样式优先级高于内部样式
外部样式
引入一个单独的css文件
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性指定资源的地址。
<link rel="stylesheet" type="text/css" href="my.css">
通过@import方式也可以引用,但是不推荐使用
CSS颜色表示法
单词表示法
red blue green
透明色transparent
16进制表示法
#ff0000;
rgb(红绿蓝)三原色表示法:rgb(0,0,255)
rgb范围:0-255
rgb(255,0,0)
背景样式
-
background-color 属性指定元素的背景色。
-
background-image 属性指定用作元素背景的图像。
-
background-repeat 属性在水平和垂直方向上都重复图像。
-
background-attachment 属性指定背景图像是应该滚动还是固定的
scroll 背景位置按照当前元素偏移
fixed背景位置按照浏览器进行偏移
-
background-position 属性指定背景位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height:500px;
background-color: rgb(255,0,0);
background-image: url(img/1.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: scroll;
}
span{
background-color: blue;
}
</style>
</head>
<body>
<div style="background-color: blue;">这是一个div</div>
</body>
</html>
CSS边框样式
border-style:边框样式
solid:实线
dashed:虚线
dotted:点线
border-width:边框大小
border-color:边框颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 500px;
height:500px;
border-style: dashed;
border-width: 30px;
border-color: blue;
border-left-color: red;
border-right-style: solid;
border-radius: 5%;
border-top-left-radius: 50%;
}
span{
background-color: blue;
}
</style>
</head>
<body>
<div >边框样式</div>
</body>
</html>
边框实现三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 0px;
height:0px;
border-top-color: black;
border-top-style: solid;
border-top-width: 20px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 20px;
border-right-color: transparent;
border-right-style: solid;
border-right-width: 20px;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 20px;
}
</style>
</head>
<body>
<div ></div>
</body>
</html>
CSS文字样式
font-family:字体类型
添加多字体类型目的,如果第一个字体本地计算机没有,则会去找下一个字体,如果都没有,则会采用计算机默认的字体
添加引号目的,有些字体会有空格,使用引号把它们当成一个整体。
.p1 { font-family: "Times New Roman", Times, serif;}
font-size:字体大小
推荐字体大小设置成偶数,有时候对文字对齐,会找字体中间对齐,偶数更好。
h1 { font-size: 2.5em; /* 40px/16=2.5em */}
font-weight:字体粗细
normal
border
font-style:字体样式
noraml 正常
italic:倾斜
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ font-family: 宋体; font-style: italic;} </style> </head> <body> <div>这是文字</div> <div>this is english</div> <p>thi is a english</p> </body></html>
CSS文本效果
属性 | 描述 |
---|---|
text-align-last | 指定如何对齐文本的最后一行。 |
text-justify | 指定对齐的文本应如何对齐和间隔。 |
text-overflow | 指定应如何向用户呈现未显示的溢出内容。 |
word-break | 指定非 CJK 脚本的换行规则。 |
word-wrap | 允许长单词被打断并换到下一行。 |
writing-mode | 指定文本行是水平放置还是垂直放置。 |
单行文本溢出显示
white-space: nowrap; 强制一行显示
overflow: hidden; 超出元素默认宽度内容隐藏
text-overflow: ellipsis; 使用省略号代替未展示
多行文本溢出隐藏
(用webkit方式)
-webkit-line-clamp:用该属性来限定块元素内文本显示行数
display:-webkit-box:将对象作为弹性的伸缩盒子显示
-wbkie-box-orient:设置伸缩盒子对象内子对象的排列方式
text-overflow:ellipsis:使用省略号告诉用户有内容未显示
overflow:hidden 超出文本部分隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<p>
全校学生考试将于1月
全校学生考试将于1月7日全部结束-2月25日为寒假放假时间,接最新通知,学生宿舍区将于1月9号上午10点封闭,请还未离校的同学安排好个人离校车票等事宜,有特殊情况等私聊敏姐沟通
国内疫情仍不稳定,即将迎来春运高峰期,希望大家外出留意官7日全部结束-2月25日为寒假放假时间,接最新通知,学生宿舍区将于1月9号上午10点封闭,请还未离校的同学安排好个人离校车票等事宜,有特殊情况等私聊敏姐沟通
国内疫情仍不稳定,即将迎来春运高峰期,希望大家外出留意官方信息,不去中高风险地区,如寒假期间需出省,请提前联系敏姐报备‼️祝大家平安过大年
1月8日-2月25日为寒假放假时间,接最新通知,学生宿舍区将于1月9号上午10点封闭,请还未离校的同学安排好个人离校车票等事宜,有特殊情况等私聊敏姐沟通
国内疫情仍不稳定,即将迎来春运高峰期,希望大家外出留意官方信息,不去中高风险地区,如寒假期间需出省,请提前联系敏姐报备‼️祝大家平安过大年
</p>
</body>
</html>
(通用方式)
用after,相对定位的方式实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
height: 30px;
line-height: 2em;
overflow: hidden;
border: 1px solid red;
position: relative;
}
p::after{
content: "...";
position: absolute;
right: 0;
bottom: 0;
padding: 0px 10px 0px 10px;
background-color: white;
}
</style>
</head>
<body>
<p>
全校学生考试将于1月
全校学生考试将于1月7日全部结束-2月25日为寒假放假时间,接最新通知,学生宿舍区将于1月9号上午10点封闭,请还未离校的同学安排好个人离校车票等事宜,有特殊情况等私聊敏姐沟通
国内疫情仍不稳定,即将迎来春运高峰期,希望大家外出留意官7日全部结束-2月25日为寒假放假时间,接最新通知,学生宿舍区将于1月9号上午10点封闭,请还未离校的同学安排好个人离校车票等事宜,有特殊情况等私聊敏姐沟通
国内疫情仍不稳定,即将迎来春运高峰期,希望大家外出留意官方信息,不去中高风险地区,如寒假期间需出省,请提前联系敏姐报备‼️祝大家平安过大年
1月8日-2月25日为寒假放假时间,接最新通知,学生宿舍区将于1月9号上午10点封闭,请还未离校的同学安排好个人离校车票等事宜,有特殊情况等私聊敏姐沟通
国内疫情仍不稳定,即将迎来春运高峰期,希望大家外出留意官方信息,不去中高风险地区,如寒假期间需出省,请提前联系敏姐报备‼️祝大家平安过大年
</p>
</body>
</html>
CSS段落样式
text-decoration:文本修饰
text-decoration: underline;下划线
text-decoration: line-through中间线
text-decoration: overline;上划线
text-decoration: none; 通常用于从链接上删除下划线
添加多个文本修改,用空格隔开
文字缩进
text-indent 属性用于指定文本第一行的缩进
1em:相对单位,1em永远跟字体大小相同
文本对齐方式
text-align
justify两段对齐 left right center
行高
line-height
默认行高:不是固定值,根据当前字体的大小在不断的变化。
字之间的间距
letter-spacing: 20px;
单词之间的间距
word-spacing: 10px;
解决英文的数字不自动折行的问题
word-break:break-all
word-wrap:break-word
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
text-decoration: line-through overline;
text-indent: 2em;
font-size: 14px;
text-align: justify;
line-height: 20px;
letter-spacing: 10px;
}
</style>
</head>
<body>
<p>Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与</p>
</body>
</html>
CSS复合样式
目的:写css样式更加简单
复合写法,通过空格实现
background :gray url no-repeat ;背景图片
border: 1px solid #D2342 ;边框
CSS选择器
id是唯一的
class代表一类
元素选择器
通用选择器*:会影响页面上的每一个HTML元素
层次选择器
后代: M N M下的N都应用,M下所有的N,N下的也适用
父子: M>N 只应用M下的N,N下的不适用
兄弟: M~N 当前M下的所有兄弟标签
相邻: M+N 当前M相邻的标签
属性选择器
元素[attr]{}
=:完全匹配
*=:部分匹配
^=:起始匹配
$=: 结束匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 300px;
background-color: blue;
}
ul > li{
border: 1px red solid;
}
div[class=box]{
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
</div>
<ul>
<li>
<ul>
<li>
</li>
<li></li>
</ul>
</li>
<li></li>
</ul>
<ol>
<li></li>
</ol>
<ol><li></li></ol>
<div> 后代选择器</div>
<div class="box">属性选择器</div>
<div class="search">aaaaa</div>
<div>bbbbb</div>
</body>
</html>
伪类选择器
一般用于初始样式添加不上的时候,用伪类来添加
伪类的顺序:L V H A
一般网站只设置a 和 a:hover
:link 访问前的样式 只能给a标签
:visited 访问后的样式 只能给a标签
:hover 鼠标移入时的样式 给所有标签
:active 鼠标按下时的样式 给所有标签
:after :before 通过伪类的方式添加文本内容
针对表单元素的
:checked 被选中时触发样式
:disabled 被禁用时触发样式
:focus 鼠标聚焦时触发样式
结构伪类选择器
nth-of-type()
角标从1开始的,1表示第一项,2表示第二项。||n表示从0到无穷大,2n隔行
first-of-type() //第一个
last-of-type() //最后一个
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
}
div:hover{
background: blue;
}
div:active{
background: black;
}
a:link{
color: black;
}
a:visited{
color: blanchedalmond;
}
a:hover{
color: red;
}
a:active{
color: seagreen;
}
div:after{
content:'zyp';color: blue;
}
:checked{
width: 200px;
height: 200px;
}
:disabled{
width: 30px;
height: 30px;
}
:focus{
background-color: red;
}
li:first-of-type{
/*选择第一个*/
background-color: red;
}
li:nth-of-type(2n+1){
/*选择第一个*/
background-color: blue;
}
</style>
</head>
<body>
<a href="a">这是一个链接</a>
<div >hello</div>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" disabled>
<input>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
CSS继承
文字相关的样式子元素可以继承父元素的样式
布局相关的样式子元素不会继承父元素的样式(默认不能继承,可以设置继承属性)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: yellow;
border: 2px red solid;
color: red;
font-size: 30px;
}
p{
border: inherit;
width: 700px;
}
</style>
</head>
<body>
<div>
<p>这是一个段落这是一个段落这是一个段落这是一个段落</p>
</div>
</body>
</html>
CSS优先级
-
相同样式优先级,后面出现的优先级更高
-
内部样式与外部样式优先级相同,如果设置了相同的样式,后写的优先级更好
-
单一样式优先级:
style行间>id>class>tag>*>继承
层次优先级根据权重相加:
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
!import提升优先级,非规范方式,不建议使用(不能针对继承的属性)
CSS盒子模型
组成:
content->padding->border->margin
物品 填充物 包装盒 盒子之间的边距
- 背景色填充到margin以内的区域,不包括margin区域
- 文字会在content区域添加
- padding不能为负数,margin可以为负数
box-sizing
盒尺寸:可以改变盒子模型的展示形态
默认值:content-box: width、height->content ,宽高只对内容生效
border-box: width、height->content、padding、border 宽高对内容,padding,border都生效
使用场景:
- 不用再去计算一些值
- 解决一些百分比问题。比如input输入框加了之后,不会把屏幕撑大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red;
border: 2px yellow solid;
padding: 20px;
margin: 10px;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
box-sizing: border-box;
border: 2px yellow solid;
padding: 20px;
margin: 10px;
}
input{
width: 100%;
padding: 30px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">这个一个盒子</div>
<div class="box2">box2</div>
<input type="text">
</body>
</html>
margin使用问题
margin叠加问题
当给两个盒子同时添加上下边距的时候,就会出现叠加的问题。默认只会间隔更大的那个一个margin。这个问题,只有在上下有,左右是没有叠加问题的。
解决方案:只给一个元素添加边距。
margin传递问题
margin传递只会出现在嵌套的结构中,且只有margin-top会有传递的问题,子容器改变位置,父容器也会改变。其他三个方向是没有传递问题的。
解决方案:给父容器加边框;子容器的margin换成父容器的padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
margin-top: 10px;
}
.parent{
width: 200px;
height: 200px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="parent">parent
<div class="child">child</div>
</div>
</body>
</html>
margin自适应居中
margin: 0 auto;
margin左右自适应居中是可以的,但是上下自适应是不行的。
解决上下可以自适应居中,需要用到flex
width,weight不设置的时候,block块容器会自动计算大小
标签分类
按类型划分标签
注:布局一般用block、修饰文本一般用inline
display
使用display可以设置不同的类型
-
display:none 不占空间的隐藏
-
visibility:hidden 占空间的隐藏
块block :div、p、ul、li、h1-h5
- 独占一行
- 支持所有样式(宽高,margin)
- 不写宽的时候,默认和父元素宽相同
- 所占区域是一个矩形
行内、内联inline:span、a、em、strong、img
- 挨在一起
- 有些样式不支持(宽高、margin、padding某些方向不支持)
- 不写宽的时候,宽度由内容决定
- 所占的区域不一定是矩形
- 内联标签之间会有空隙,由换行引起的
inline-block:input、select
- 挨在一起
- 支持样式(宽高、margin、padding)
按内容划分标签
Flow:流内容,网页当中能感知到的标签,大部分标签
Metadata:元内容,网页中的编码,title,style等,部分能感知
Sectioning:分区
Heading:标题
Phrasing:措辞
Embedded:嵌入的,图片,视频
Interactive:互动,输入框
标签嵌套规范
ul、li、
dl、dt、dd
table、tr、td
- 块标签可以嵌套内联标签
- 块标签不一定能嵌套块标签(p标签里面不能嵌套div)
- 大部分内联标签不能嵌套块标签(a标签可以嵌套div)
溢出隐藏overflow
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
---|---|
hidden | 多余内容不可见 |
scroll | 显示滚动条 |
auto | 超出了范围自动显示滚动条 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
透明度与手势
opacity:0(透明)~1(不透明)
0.5(半透明)
注:会占空间,所有的子内容也会透明
想要子内容不透明,采用rgba(255,0,0,0.5),最后一个参数调透明度
cursor:手势
auto(默认,根据浏览器决定)
crosshair:十字线
pointer:一只小手
move:十字箭头
自定义手势:图片要求.cur、.ico cursor:url(./cursor.ico),auto;
最大最小宽高
min-width、max-width
min-height、max-height
当我们需要让宽高小于等于或者大于等于一个值的时候,可以采用最大最小宽高来自适应
%单位换算是以父容器的大小进行换算,爷爷辈的也不算
一般想要设置容器的宽高100%,先设置html和body的
body,html{
height: 100%;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
div{
width: 100px;
min-height: 100px;
border: 1px red solid;
}
body,html{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
最大最小宽高
最大最小宽高
最大最小宽高
最大最小宽高
最大最小宽高
最大最小宽高
最大最小宽高
最大最小宽高
最大最小宽高
</div>
</body>
</html>
CSS 默认样式
没有默认样式
div、span
有默认样式的
body->margin:8px
h1->margin: 上下 21.440px font-weight:bold
p->margin:上下 16px
ul->margin:上下 16px padding:左 40px
默认点:list-style-type:disc
a->cursor:pointer text-decoration:underline
CSS重置样式
*{
margin:0;padding:0
}
对于图片而言,图片是内联样式,后面跟文字时,默认跟文字的基线对齐而不是底部对齐,可以通过vertical-align样式来设置底部对齐。或者也推荐用display把图片设置成block
写具体页面或一个布局的时候
- 写结构
- css重置样式
- 写具体样式
float浮动
文档流:是文档可显示对象在排列时所占用的位置。
float会脱离文档流,沿着父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
float注意事项
- 只会影响后面的元素,浮动之前的元素不影响
- 内容默认提升半层
- 默认宽根据内容决定
- 浮动元素放不下会换行排列
- 主要给块元素添加,也可以给内联元素添加
清除float浮动
上下排列:clear:left、right、both
clear属性只会操作块标签,对内联标签不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: yellow;
opacity: 0.5;
}
#div2{
width: 200px;
height: 200px;
background-color: rgba(255,0,0,0.5);
float: right;
}
#div3{
width: 300px;
height: 300px;
background-color: blue;
clear:right
}
#div4{
background-color: green
}
body{
border: 1px black solid;
}
#box1{
width: 200px;
border: 1px black solid;
clear: both;
}
#box2{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.clear:after{
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<div id="div4">这是一个没有宽度的div</div>
<div>隔开</div>
<div id="box1" class="clear">
<div id="box2">
</div>
</div>
</body>
</html>
position定位
static(默认) ,没有定位
relative相对定位
- 如果没有定位偏移量,对元素本身没有任何影响
- 不使元素脱离文档流
- 不影响其他元素布局
- left、top、right、bottom是相对于当前元素自身进行偏移的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 100px;
top: 100px;
}
#div3{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</div>
</body>
</html>
absolute绝对定位
- 会使元素脱离文档流
- 使内联元素支持宽高(让内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联特性)
- 在嵌套的组合中,如果父元素没有(绝对定位、相对定位、固定定位),则子元素会相对于整个文档流html进行定位。如果有,则子元素会相对于父元素定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
#div3{
background-color: yellow;
}
span{
width: 100px;
height: 100px;
background-color: red;
}
#box1{
width: 300px;
border: 1px red solid;
height: 300px;
margin: 200px;
position: relative;
}
#box2{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
top: 0;
}
body{
border: 2px black solid;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">这是一个块</div>
<span>这是一个内联</span>
<div id="box1"><div id="box2"></div></div>
</div>
</div>
</body>
</html>
fixed固定定位
- 使元素完全脱离文档流
- 使内联元素支持宽高(内联具备块特性)
- 使块元素默认宽根据内容决定(让块具备内联特性)
- 相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
right: 0;
}
#div2{
width: 300px;
height: 200px;
background-color: blue;
}
body{
border: 2px black solid;
height: 2000px;
}
</style>
</head>
<body>
<div id="div1">这是一个块
<div id="div2"></div></div>
</body>
</html>
sticky粘性定位
在指定的位置,进行粘性操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
border: 2px black solid;
height: 2000px;
}
div{
background-color: red;
position: sticky;
top: 10%;
}
</style>
</head>
<body>
<p>aaaaaaaa</p>
<p>aaaaaaaa</p> <p>aaaaaaaa</p> <p>aaaaaaaa</p>
<div>this is a block</div>
<p>aaaaaaaa</p>
<p>aaaaaaaa</p> <p>aaaaaaaa</p> <p>aaaaaaaa</p>
</body>
</html>
z-index定位层级
- 默认层级为0
- 层级更大的优先展示
- 如果两个元素层级相同,优先展示后一个元素
- 如果出现嵌套的,比如div和嵌套的parent,child。div先和parent比较,再和child比较
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
border: 2px black solid;
height: 2000px;
}
#box1{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
z-index: 1;
}
.parent{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 25px;
top: 25px;
}
.child{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50px;
top: 50px;
z-index: 2;
}
</style>
</head>
<body>
<div id="box1"></div>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
定位的下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#menu{
width: 100px;
height: 30px;
margin: 20px auto;
border: 1px black solid;
position: relative;
}
#menu ul{
width: 100px;
border: 1px black solid;
position: absolute;
left: 0;
top: 30px;
background-color: white;
display: none;
}
#menu:hover ul{
display: block;
}
#menu ul li:hover{
background-color: cadetblue;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div id="menu" >
卖家中心
<ul><li>列</li>
<li>列</li>
<li>列</li>
<li>列</li></ul>
</div>
<p>
测试段落 测试段落 测试段落 测试段落 测试段落
</p>
</body>
</html>
定位实现居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 300px;
height: 300px;
position: relative;
border: 1px black solid;
}
#box2{
width: 100px;
height: 100px;
position: absolute;
background-color: red;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
CSS单行添加省略号
width:必须要有一个固定的宽
white-space:nowrap 不让内容折行
overflow:hidden 隐藏溢出的内容
text-overflow:ellipsis
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#content{
width: 200px;
border: 1px black solid;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="content">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</div>
</body>
</html>
CSS SPrite
是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处:
可以减少图片的质量,网页的图片加载速度快
减少图片的请求的次数,加快网页的打开
CSS 圆角
border-radius: 20px;
border-radius: 20px 40px; 左上,右下 和右上左下
border-radius: 10px 20px 30px 40px ;左上 右上 右下 左下
border-radius: 10px /20px x轴半径、y轴半径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 100px;
background-color: red;
border-radius: 100px 100px 0 0
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS3新增2D和3D属性
定位盒子位置居中
transform:translate(100px) //向右移动100px
如果是百分比% 盒子是移动自身元素的位置,不是相对父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/*
right: 50%; 需要计算
margin-right: -100px; */
/* transform: translate(50%); */
/* 自己div宽度的一半 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置变形中心点
根据给定角度顺时针或逆时针旋转元素
顺时针旋转20度
transform:rotate(20deg)
逆时针旋转20度
transform:rotate(-20deg)
设置旋转点 默认中心点,左下角转
transform-origin: bottom left;
也可以设置像素转
0.6秒后渐变移动
transition: all 0.6s;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
margin: 200px;
transition: all 0.6s;
transform-origin: 20px 30px;
}
img:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<img src="1.jpg" width="200" alt="">
</body>
</html>
旋转的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 170px;
border: 1px solid pink;
margin: 200px auto;
position: relative;
}
div:hover img:nth-child(1){
transform: rotate(60deg);
}
div:hover img:nth-child(2){
transform: rotate(160deg);
}
div:hover img:nth-child(3){
transform: rotate(180deg);
}
div:hover img:nth-child(4){
transform: rotate(240deg);
}
div:hover img:nth-child(5){
transform: rotate(300deg);
}
div:hover img:nth-child(6){
transform: rotate(360deg);
}
div img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<img src="4.jpg" alt="">
<img src="5.jpg" alt="">
<img src="6.jpg" alt="">
</div>
</body>
</html>
左手法则
绕着x、y、z轴旋转
- rotateX()
- rotateY()
- rotateZ()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 170px;
border: 1px solid pink;
margin: 200px auto;
}
div img{
width: 100%;
height: 100%;
transition: all 5s;
}
img:hover{
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body>
</html>
透视
原理:近大远小
perspective: 500px; //视距d 近大远小 ,perspective的值越小,立体效果越明显。为0,恢复2d
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
perspective: 500px;
}
div{
width: 200px;
height: 170px;
border: 1px solid pink;
margin: 200px auto;
}
div img{
width: 100%;
height: 100%;
transition: all 3s;
}
img:hover{
transform: rotateY(360deg);
}
</style>
</head>
<body>
<div>
<img src="2.jpg" alt="">
</div>
</body>
</html>
translate3d
transform:translate3d(x,y,z) //x和y可以是px可以是% ,z只能是px
transform-style
属性:flat(默认值),表示所有子元素在2D平面呈现
preserve-3d表示所有子元素在3D空间中呈现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 145px;
border: 5px solid red;
margin: 100px auto;
transform: rotateY(30deg);
transform-style: preserve-3d;
}
div img{
width: 100%;
transform: rotateY(30deg);
}
</style>
</head>
<body>
<div >
<img src="./1.jpg"/>
</div>
</body>
</html>
例子:旋转轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
perspective: 1000px;
}
section{
width: 300px;
height: 200px;
margin: 100px auto;
background: url(./1.jpg) no-repeat;
background-size: cover;
position: relative;
transform-style: preserve-3d;
transition: all 5s linear;
}
section:hover{
transform:rotateY(360deg)
}
section div{
width: 100%;
height: 100%;
background:url(./3.jpg) no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
section div:nth-child(1){
transform: rotateY(0deg) translateZ(400px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(400px);
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(400px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(400px);
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(400px);
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(400px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
例子:开门大吉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section{
width: 450px;
height: 300px;
border: 1px solid pink;
margin: 100px auto;
background:url(./3.jpg) no-repeat;
position: relative;
perspective: 1000px;
}
.door-l, .door-r{
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: red;
transition: all 4s;
}
.door-l{
left: 0;
border-right: 1px solid pink;
transform-origin: left;
}
.door-l::before{
content: "";
position: absolute;
right: 5px;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid blue;
transform: translateY(-50%);/*走自己高度的一半*/
}
.door-r::before{
content: "";
position: absolute;
left: 5px;
top: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid blue;
transform: translateY(-50%);/*走自己高度的一半*/
}
.door-r{
right: 0;
border-left: 1px solid pink;
transform-origin: right;
}
section:hover .door-l{
transform: rotateY(-180deg)
}
section:hover .door-r{
transform: rotateY(180deg)
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>
例子:翻转的图片
backface-visibility: hidden;/不是正面对象屏幕,就隐藏/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
}
div img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
}
div img:first-child{
backface-visibility: hidden;/*不是正面对象屏幕,就隐藏*/
z-index: 1;
}
div:hover img{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="./1.jpg" alt="">
<img src="./2.jpg" alt="">
</div>
</body>
</html>
CSS 动画定义
定义动画
@keyframes mymove //定义动画名称 mymove
{
from {top:0px;}
to {top:200px;}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
animation: go 2s ease 0s 2
}
@keyframes go{
form{
transform: translateX(0)
}
to{
transform: translateX(600px)
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
例子:动画转圈
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
animation: go 2s ease 0s 2
}
@keyframes go{
0%{
transform: translate3d(0,0,0);
}
25%{
transform: translate3d(400px,0,0);
}
50%{
transform: translate3d(400px,400px,0);
}
75%{
transform: translate3d(0,400px,0);
}
100%{
transform: translate3d(0,0,0);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
伸缩布局Flex(CSS3)
使用方式
display:flex
flex:1 flex:2
如果子容器有固定的像素,则会在父容器减去固定的像素,再分割flex
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section{
width: 1000px;
height: 500px;
margin: 100px auto;
display: flex;
border: 1px red solid;
min-width: 400px;
flex-direction: column-reverse;
}
section div:nth-child(1){
background-color: red;
flex: 150px;
}
section div:nth-child(2){
background-color: blue;
flex: 2;
}
section div:nth-child(3){
background-color: yellow;
flex: 3;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
最大最小值
flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280
flex-direction调整主轴方向
flex-direction: column 垂直排列
column-reverse 垂直翻转
flex-direction: row 水平排列
row-reverse 水平翻转
vertical-align
vertical-align这个是设置元素的垂直排列的
用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.
它的值比较多:baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit
justify-content
子盒子如何在父盒子里面水平对齐
值 | 描述 | 白话文 |
---|---|---|
flex-start | 默认值。项目位于容器的开头。 | 让子元素从父容器的开头开始排序但是盒子顺序不变 |
flex-end | 项目位于容器的结尾。 | 让子元素从父容器的后面开始排序但是盒子顺序不变 |
center | 项目位于容器的中心。 | 让子元素在父容器中间显示 |
space-between | 项目位于各行之间留有空白的容器内。 | 左右的盒子贴近父盒子,中间的平均分布空白间距 |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | 相当于给每个盒子添加了左右margin外边距 |
align-items
子盒子如何在父盒子里面垂直对齐(单行)
值 | 描述 | 白话文 |
---|---|---|
stretch | 默认值。项目被拉伸以适应容器。 | 让子元素的高度拉伸适用父容器(子元素不给高度的前提下) |
center | 项目位于容器的中心。 | 垂直居中 |
flex-start | 项目位于容器的开头。 | 垂直对齐开始位置 上对齐 |
flex-end | 项目位于容器的结尾。 | 垂直对齐结束位置 底对齐 |
flex-wrap
flex-wrap控制是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理
值 | 描述 |
---|---|
nowrap | 默认值。规定灵活的项目不拆行或不拆列。 不换行,则 收缩(压缩) 显示 强制一行内显示 |
wrap | 规定灵活的项目在必要的时候拆行或拆列。 |
wrap-reverse | 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。 |
flex-flow
flex-flow是flex-direction、flex-wrap的简写形式
flex-flow: flex-direction flex-wrap;
flex-direction: row + flex-wrap: wrap=flex-flow:row wrap
例如:
display: flex;
/* flex-direction: row;
flex-wrap: wrap; 这两句话等价于下面的这句话*/
flex-flow: column wrap; /* 两者的综合 */
align-content
align-content针对多行的情况,
align-items是针对一行的情况
必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:row;并且设置换行,flex-wrap:wrap;这样这个属性的设置才会起作用。
值 | 描述 | 测试 |
---|---|---|
stretch | 默认值。项目被拉伸以适应容器。 | |
center | 项目位于容器的中心。 | |
flex-start | 项目位于容器的开头。 | |
flex-end | 项目位于容器的结尾。 | |
space-between | 项目位于各行之间留有空白的容器内。 | |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
order
默认值是0,数字越小,越往前
用整数值来定义排列顺序,数值小的排在前面。可以为负值。
order: 1;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section{
width: 1000px;
height: 1000px;
margin: 100px auto;
display: flex;
border: 1px red solid;
min-width: 400px;
justify-content: space-between;
align-content: center;
flex-flow: row wrap;
/* flex-direction: column-reverse; */
}
section div{
width: 250px;
height: 250px;
}
section div:nth-child(1){
background-color: red;
}
section div:nth-child(2){
background-color: blue;
}
section div:nth-child(3){
background-color: rgb(110, 110, 40);
}
section div:nth-child(4){
background-color: red;
}
section div:nth-child(5){
background-color: blue;
}
section div:nth-child(6){
background-color: yellow;
order: -1;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
BFC
BFC就是独立的,隔离的区域,脱离文档流的容器
如何产生BFC
同样,要给这些元素添加如下属性就可以触发BFC。
-float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible。
BFC元素所具有的特性
BFC布局规则特性:
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
- BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
- 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
BFC的主要用途
BFC能用来做什么?
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了。
计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father{
width: 300px;
border: 1px solid red;
overflow: auto;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.son2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
</html>
(2) 解决外边距合并问题
外边距合并的问题。
主要用到
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father{
width: 300px;
border: 1px solid red;
height: 300px;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.son2{
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
.over{
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="over">
<div class="son1"></div>
</div>
<div class="son2"></div>
</div>
</body>
</html>
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.father{
width: 300px;
border: 1px solid red;
height: 300px;
}
.box{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.txt{
height: 300px;
width: 100px;
background-color: chartreuse;
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
<div class="txt"></div>
</div>
</body>
</html>
优雅降级和渐进增强
什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?
渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
先针对低版本浏览器,再兼容高级版本浏览器
优雅降级 graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
先针对高版本浏览器,再兼容低版本浏览器
区别:渐进增强是向上兼容,优雅降级是向下兼容。
个人建议: 现在互联网发展很快, 连微软公司都抛弃了ie浏览器,转而支持 edge这样的高版本浏览器,我们很多情况下没有必要再时刻想着低版本浏览器了,而是一开始就构建完整的效果,根据实际情况,修补低版本浏览器问题。
浏览器前缀
浏览器前缀 | 浏览器 |
---|---|
-webkit- | Google Chrome, Safari, Android Browser |
-moz- | Firefox |
-o- | Opera |
-ms- | Internet Explorer, Edge |
-khtml- | Konqueror |
背景渐变
在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件,比如说Photoshop,你对线性渐变并不会陌生。
线性渐变
background:-webkit-linear-gradient(渐变的起始位置, 起始颜色, 结束颜色);
background:-webkit-linear-gradient(渐变的起始位置, 颜色 位置, 颜色位置....);
CSS W3C 统一验证工具
CssStats 是一个在线的 CSS 代码分析工具
网址是: http://www.cssstats.com/
W3C 统一验证工具: http://validator.w3.org/unicorn/ ☆☆☆☆☆
CSS 压缩
通过上面的检测没有错误,为了提高加载速度和节约空间(相对来说,css量很少的情况下,几乎没啥区别),可以通过css压缩工具把css进行压缩。
http://tool.chinaz.com/Tools/CssFormat.aspx