HTML+CSS
HTML4
HTML设置语言
主要作用
- 让浏览器显示对应的翻译
- 有利于搜索引擎优化
具体写法
<html lang="zh-CN"></html>
块级元素和行内元素
- 块级元素内能写块级元素和行内元素
- 行内元素内不能写块级元素
<span>
<span>span1</span>
<input type="text">
<span>span2</span>
<div>
div1
</div>
</span>
<span>span3</span>
原本span1,2和span3应该会在同一行,但是因为中间多了一个div(块级元素),加上
被浏览器优化了
,导致了如下的结果。鼠标放在第一个span,却包含了span3
-
h1~h6不能互相嵌套
-
p中不要写块级元素。如果写了,p标签会在块级标签的前后生成一对空的p标签
img标签属性:alt
- 搜索引擎优化。会读取alt的值
- 图片无法显示时,显示alt的值
- 盲人阅读器会阅读
超链接标签:a
- self:当前页打开
(默认)
- blank:新标签页
- a标签能包裹除它自身以外的标签
- download属性可以允许下载,download的值是下载时的默认文件名
- name属性可以设置跳转锚点。name是区分大小写的,且跳转时需要加
#
号
使用a-name做锚点
<a href="#xxx">跳转到xxx内容</a>
使用id做锚点(推荐)
<a href="#div">跳转到div内容</a>
<a name="xxx"></a>
<div>
一些内容
</div>
<div id="div">
一些内容
</div>
回到顶部
<a href="#">回到顶部</a>
刷新页面
<a href="">刷新页面</a>
js脚本
<a href="JavaScript:xxx;">刷新页面</a>
- 唤起指定应用
手机
<a href="tel:xxx">手机</a>
邮件
<a href="mailto:xxx">邮件</a>
短信
<a href="sms:fee">短信</a>
自定义列表:dl
<!-- dl:definition list -->
<dl>
<!-- dt:definition title -->
<dt>做好笔记</dt>
<!-- dd:definition description,可以有多个 -->
<dd>好记性不如烂笔头</dd>
<dt>多做实践</dt>
<dd>绝知此事要躬行</dd>
</dl>
表格
thead
- tr:行
- td:tr的内容,即单元格,有
加粗
样式
tbody / tfoot
- tr:行
- td:tr的内容,也是单元格
常用属性
- table中的height属性,不会影响thead和tfoot的高度,且代表
至少高度
,可以超过(被内容影响) - 承接上一点,如果thead / tfoot 设置height,高度会改变,且实实在在就是这个值。
- th / td修改高度宽度会影响整行/列
- colspan和rowspan 列/行合并
- tbody的height属性修改不一定起效。如下例子,tbody修改高度至少要420以上
常用标签补充
标签名 | 标签含义 |
---|---|
br | 换行 |
hr | 分割 |
pre | 按原文显示,一般用来展示代码 |
- 不要用多个br来增加间隔
- hr的语义是间隔,不要语义只想画线用css来做
表单
标签名 | 语义 | 常用属性 |
---|---|---|
form | 表单 | action:指定表单提交地址 target:和超链接一样 method:表单提交方式 |
input | 输入框 | type:类型。例如text,password,radio,checkbox,hidden name:指定提交数据的名字,键值对 value:默认输入值,对于radio和checkbox意味着提交的值 maxlength:最大长度 checked:选中 |
button | 按钮 | input写法:input-type=submit / reset / button button写法:button-type=submit / reset / button |
textarea | 文本域 | cols / rows:设置宽高 |
select | 选择 | name:键值对的键 |
option | 选项 | value:选中后提交的值 selected表示选中 |
disabled:禁用 | ||
label | 标签 | 使用: 1.label标签的for属性等于控件的id属性 2.控件嵌套在label标签里 |
fieldset | 表单分组控件 | |
legend | 分组标题 |
<fieldset>
<legend>fenzu biaoti</legend>
具体的控件。。。
</fieldset>
框架标签:iframe
标签名 | 语义 | 属性 |
---|---|---|
iframe | 框架,在网页中嵌入其他文件 | name:框架名字,可以与target配合 src:资源地址 width / height:宽高 frameborder:是否显示边框,0 / 1 |
实际应用:
- 在页面中嵌入可访问资源,使用src属性
- 与超链接或表单的target属性配合使用,展示相应内容
HTML字符实体
字符实体由三部分组成:& + 名称 + ; 或者 & + # + 编号 + ;
例如空格: ;
HTML全局属性
常见的全局属性:id,class,style,dir(内容的方向,值:ltr(left to right),rtl),title(设置文字提示)
CSS2
简介
三种引入方式:内联样式(优先级最高),内部样式,外部样式(推荐)。遵循“后来者居上”的覆盖原则
<link rel="stylesheet" href="../css/demo.css">
CSS语法由两部分组成:
- 选择器:找到要添加样式的元素
- 声明块:具体的样式,键值对
选择器
基本选择器
通配选择器
作用:用于选中所有的html元素
* {
属性名: 属性值
}
元素选择器
作用:为某种元素设置样式
标签名{
键值对
}
类选择器
作用:为特定的class设定样式
.类名{
键值对
}
注意点:
- class要见名知意
- 多个class,后写的无效
- class可以携带多个值,用空格隔开(class=“a b”)
- id和class可以同时拥有
id选择器
作用:根据id来精确设定样式
#id值{
键值对
}
复合选择器
交集选择器
作用:选中同时符合多个条件的元素
注意:标签名写在最前面
选择器1选择器2....{
键值对
}
并集选择器
作用:选中多个选择器对应的元素,又称分组选择器,或的关系
注意:
- 并集选择器一般竖着写
- 任何形式的选择器都可以是并集的一部分
选择器1,选择器2,选择器3{
键值对
}
后代选择器
作用:选中指定元素中,符合要求的后代元素,子代,孙子代
选择器1 选择器2 选择器3{
键值对
}
子代选择器
作用:符合要求的子代元素,就是儿子,不是孙子
选择器1>选择器2>选择器3{
键值对
}
兄弟选择器(都是往下看)
相邻兄弟选择器
作用:选中指定元素后,符合条件的相邻兄弟元素,即紧挨的下一个元素
选择器1+选择器2{
键值对
}
通用兄弟选择器
作用:选中指定元素后,符合条件的所有兄弟元素
选择器1~选择器2{
键值对
}
属性选择器
伪类选择器
作用:选中特殊状态的元素
伪类:像类,但不是类,是元素的一种特殊状态
标签:状态{
键值对
}
动态伪类
- :link——超链接未被访问
- :visited——超链接被访问
- :hover——鼠标悬停在元素上
- :active——元素激活状态(鼠标按不松开)
- :focus——获取焦点的元素,表单类元素才能使用
注意:前四个需要遵循
LVHA
原则,即link、visited、hover、active顺序,否则会有不生效的情况。这是由于状态的叠加时,后来者居上的原则,覆盖了前者的设置。
结构伪类
关于n的值:官方规定一定要符合an+b
的规则,所以n要写在前面
否定伪类
:not——排除满足括号中条件的元素
UI伪类
目标伪类
:target——选中锚点所指向的元素
语言伪类
:lang——根据lang属性的值指定元素
伪元素选择器
作用:选中元素中的一些特殊位置
标签::位置{
键值对
}
常见:
- first-letter:第一个文字
- first-line:第一行文字
- selection:被鼠标选中的文字
- placeholder:选中输入框中的提示文字
- before:在元素最开始的位置,创建一个子元素(必须用content属性指定内容)
- after:在元素最后的位置
选择器优先级
简单来说:行内 > ID选择器 > 类选择器 > 元素选择器 > 通用选择器
复杂来说:优先级满足一个计算式,格式为(a,b,c)
- a表示ID选择器的个数
- b表示类,伪类,属性选择器的个数
- c表示元素、伪元素选择器的个数
比较规则:按照从左到右的顺序依次比较,胜出后不再比较。例如(1,1,0) > (0,2,2)
特殊规则:
- 行内样式权重大于所有样式
!important
的权重大于所有样式
特性
层叠性
如果发生了样式的冲突,就会根据优先级,进行覆盖。
继承性
元素会自动拥有父元素,祖先元素上设置的某些样式,优先继承离的最近的父元素
继承的样式都是不影响布局的,比如margin
优先性
见上一节选择器优先级
颜色
- color:颜色名
- color:rgb() 或者 rgba()。a表示透明度 0-255或者百分比
- color:#hex或hexa。就是16进制的rgb
- color:hsl()或hsla()。通过色相,饱和度,亮度来设置
字体
字体族
属性名:font-family
语法:font-family: “字体”,“字体0”,sans-serif / serif
设置多个字体逐个查找,通常最后写上sans-serif / serif
字体粗细
属性名:font-weight
值:light、normal、bold、bolder
字体复合属性(推荐)
属性名:font
编写规则:
- 字体大小、字体族必须有
- 字体族最后一位,字体大小倒二
- 各属性值空格隔开
文本
文本间距
- 字母间距:letter-spacing
- 单词间距:word-spacing(通过空格识别词)
- 通过px,正值距离增大,反之减小
文本修饰
属性名:text-decoration
文本缩进
属性名:text-indent
值:所有的长度单位
文本对齐-水平
属性值:text-align
值:
- center
- left
- right
行高
属性名:line-height
值:
- normal:浏览器根据文字大小决定一个默认值
- px
- 数字:参考自身
font-size
的倍数 - 百分比:参考自身
font-size
的百分比
注意事项:
- 数值过小文字会发成重叠
- line-height和height,height的优先级更高。
vertical-align
作用:用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式。不能控制块元素
列表
css属性名 | 功能 | 属性值 |
---|---|---|
list-style-type | 设置列表符号 | none:不显示 square:方 等等 |
list-style-position | 列表符号的位置(配置背景色才能看出来) | inside:在li里面 outside:在li外面 |
list-style-image | 自定义列表符号 | url:图片地址 |
list-style | 复合属性 | 没有限制 |
显示模式
- 块元素:独占一行,撑满整个容器,宽高可修改
- 行内元素:不独占,由内容决定,不可修改
- 行内块元素:不独占,宽高可修改
属性名:display
值:
- none:隐藏
- block:作为块元素展示
- inline:作为行内元素
- inline-block:作为行内块元素
盒子模型
css会把所有的HTML元素看成一个盒子,所有的样式都是基于这个盒子
margin
:外边距。盒子与外界的距离border
:边框。盒子的边框padding
:内边距。紧贴内容的补白区域content
:内容。元素中的文本或后代内容
如图所示:
盒子的大小 = content
+ 左右 padding
+ 左右border
关于默认宽度:所谓的默认宽度,就是不设置
width
属性时,元素所呈现出现的宽度总宽度 = 父
content
- 自身的margin
内容区的宽度 = 父
content
- 自身的margin
- 自身的border
- 自身的padding
内容区(content)
属性名 | 功能 |
---|---|
width / height | 宽度 / 高度 |
max-width / height | 最大宽度 / 高度 |
min-width / height | 最小宽度 / 高度 |
内边距(padding)
行内元素左右
padding
可以完美设置,上下不行。块元素全都可以完美设置
边框(border)
border
主要包括了三个属性:style
、width
、color
。可以配合上下左右单独设置,例如border-left-style
外边距(margin)
子元素的
margin
是参考父元素的content
计算的块元素、行内块元素可以完美设置,行内元素上下设置无效
值可以是
auto
,如果四边都是auto
,会在父元素水平居中可以是负值
关于
margin
塌陷:第一个子元素的上margin
会作用在父元素上,最后一个子元素的下margin
会作用在父元素上解决方案:
- 给父元素设置不为0的
padding
- 给父元素设置宽度不为0的
border
- 给父元素的css设置样式
overflow: hidden
margin
合并:上面兄弟的下外边距会和下面兄弟的上外边距合并,取最大值,而不是相加。解决方案:只给其中一个设置外边距
内容溢出
overflow
:
visible
:直接显示,可能会超出父元素的限制hidde
:超出的部分直接截断隐藏scroll
:显示滚动条auto
:自动显示滚动条,没溢出就不显示滚动条
隐藏元素两种方式
-
visibility属性
visibility
默认值是show
,设置为hidden
元素会隐藏,但还是占据原来的位置 -
display属性
设置
display: none
元素隐藏,则会彻底消失
布局技巧
-
行内元素、行内块元素可以被父元素当作文本来处理。即使用
text-align
,line-height
,text-indent
等 -
子元素在父元素中水平居中:
- 子元素为块元素,父元素中使用
margin:0 auto
- 子元素为行内元素、行内块元素,父元素使用
text-align
等
- 子元素为块元素,父元素中使用
-
子元素在父元素中垂直居中:
- 块元素:子元素添加
margin-top
:(父元素content
- 子元素盒子总高)/ 2 - 行内元素、行内块元素:父元素
height = line-height
(意味着没有了padding
和border
),每个子元素使用vertical-align:middle
- 块元素:子元素添加
-
行内 / 块元素之间的空白问题:
产生原因就是因为编写代码时,使用了换行符和空格
- 去掉换行和空格(不推荐)
- 给父元素设置
font-size:0
,再给需要显示的元素设置字体大小
-
行内块元素的幽灵空白问题
幽灵空白是因为元素的基线问题,因为有类似字母g这样的存在,所有才会出现幽灵空白问题。
vertical-align:bottom
,不设置为baseline
就行display:block
- 给父元素设置
font-size:0
,给单独需要显示的设置font-size
浮动
最初是用来解决文字环绕图片这样的需求
float
:left / right
特点
- 脱离文档流
- 不管浮动前什么元素,默认宽高都是由内容大小决定
- 不会独占一行,可以和其他元素共用一行,仿佛飘起来了
- 不会
margin
合并,可以完美设置四个方向 - 不会像行内块一样被当作文本处理,没有行内块的空白问题
影响
- 对兄弟元素:后面的兄弟元素,会占据浮动元素之前的位置,在浮动元素的下面,但是文字会被挤开,对前面的兄弟无影响。
- 对父元素:不能撑开父元素的高度,导致父元素高度塌陷,但父元素的宽度仍束缚浮动元素。
解决方案
-
给父元素指定高度
-
给父元素设置为
float
,但是这样其实也会带来相同的影响 -
给父元素设置
overflow:hidden
,但是这样没浮动的那个子元素会直接消失(本质是被截断,设置成scroll
就能看出来) -
给所有浮动元素的后面,添加一个块元素,并设置
clear:bost
(忽略所有浮动的影响) -
给浮动元素的父元素,设置伪元素,通过伪元素清除浮动,原理与方案四相同(推荐)
.parent::after{ content: ""; display: block; clear: both; }
布局原则:设置浮动的时候,兄弟元素要么都浮动,要么都不浮动
定位
相对定位
选择器{
position:relative
left|right|top|bottom:数值
}
相对定位的参考点是自己原来的位置
绝大多数情况下,会配合绝对定位一起使用
特点:
- 不会脱离文档流,位置上的变化只是视觉上的变化
- 定位元素的层级比普通元素高,都启用定位的元素,后写的大于先写
left
和right
不能一起设置,left
主导;另外一组同理- 相对定位的元素可以使用
margin
和float
,但是不推荐
绝对定位
选择器{
position:absolute
left|right|top|bottom: 数值
}
绝对定位的参考点是它的包含块——对于没有脱离文档流的元素,包含块就是父元素;对于脱流的,包含块就是第一个拥有定位属性的元素,没有就是整个页面
特点:
- 脱离文档流,会对后面的兄弟,父元素有影响
left
和right
同理- 绝对定位和浮动不能同时设置,浮动会失效
- 不推荐使用
margin
。属性中包含left
,才能使用margin-left
- 无论什么类型的元素,开启定位后就变成了定位元素——默认宽高由内容决定,且能自由设置宽高
固定定位
选择器{
position:fixed
left|right|top|bottom: 数值
}
固定定位的参考点是它的视口——对于PC来说,视口就是我们看网页的那扇窗户。
区别于绝对定位,绝对定位的左上角元素会随着页面滚动而消失,固定定位不会
特点同绝对定位
粘性定位
选择器{
position:sticky
left|right|top|bottom: 数值
}
粘性定位的参考点是第一个拥有滚动机制的元素,就是有滚动条。到了符合条件的值就会开始黏在页面上,直到所属父容器完全消失在页面中。
特点:
- 不会脱离文档流,它是一种专门用于窗口滚动时的新的定位方式
- 最常用的是
top
- 和浮动能同时设置,不推荐
- 不推荐使用
margin
定位层级
- 定位元素的显示层级比普通元素高,无论什么定位,层级都是一样的
- 位置发生重叠,默认情况是,后写的压着先写的
- 可以通过
z-index
来调整显示层级 z-index
的值是数字,没有单位,越大层级越高- 只有定位元素设置
z-idnex
才有效 - 定位元素的覆盖情况会受包含块本身的层级影响
- 定位可以越过父元素设置好的
padding
特殊应用
- 发生固定定位、绝对定位后,元素都变成了定位元素,默认宽高被内容撑开,且依然可以设置宽高
- 发声相对定位后,元素依然是之前的显示模式
- 以下特殊应用,只针对绝对定位和固定定位的元素,不包括相对定位
让定位元素充满包含块
- 块充满:给定位元素同时设定
left
和right
为0 - 高充满:
top
和bottom
设置为0
让定位元素在包含块中居中(定位元素必须有宽高>)
-
上下左右都为0
-
left:50% top:50% margin-left:负的宽度的一半 margin-top:负的高度的一半
布局
版心
- 在pc网页中一般都会有一个固定宽度且水平居中的盒子,来显示网页的主要内容。
- 目前宽度一般设定在960-1200之间
- 可以是一个,也可以是多个
重置默认样式
使用全局选择器
*{
margin:0
padding:0
}
简答的案例可以使用,实际开发中并不会使用。因为它选择的是所有元素,而并不是所有的元素都有默认样式。
reset.css
选择到具有默认样式的元素,清空其默认的样式。
Normalize.css
它在清除默认样式的同时,保留了一些有价值的样式
相对reset.css
,Normalize.css
有如下优点
- 保护了具有价值的默认样式
- 为大部分HTML元素提供一般化的样式
- 新增对HTML5元素的设置
- 对并集选择器的使用比较谨慎,有效避免调试工具杂乱
HTML5
新增标签
布局类标签
标签名 | 语义 |
---|---|
header | 整个页面,或部分区域的头部 |
footer | 整个页面, 或部分区域的底部 |
nav | 导航 |
article | 文章,帖子,杂志,新闻等 |
section | 页面中的某段文字,或者文章中的某段文字 |
aside | 侧边栏 |
关于article
和section
:
article
里面可有多个section
section
强调的是分段或分块,如果想将一块内容分成几段可以用article
比seciton
更强调独立性,一块内容如果独立完成,应该用前者
状态类标签
标签名 | 语义 | 用法 |
---|---|---|
meter | 定义已知范围内的标量测量 | high:规定高值 low:规定低值 max:最大值 min:最小值 optimun:最优值 value:当前值 |
progress | 显示某个任务完成的进度的指示器 | max:目标值 value:当前值 |
列表类标签
标签名 | 语义 |
---|---|
datalist | 用于搜索框的关键字提示 |
details | 用于展示问题和答案,或对专有名词进行解释 |
summary | 写在details里面,用于指定问题或专有名词 |
文本类标签
标签名 | 语义 |
---|---|
ruby | 包裹需要注音的文字 |
rt | 写注音,写在ruby标签里 |
mark | 标记,用于标记搜索结果的关键字 |
<ruby>
<span>标签</span>
<rt>biao qian</rt>
</ruby>
表单控件属性
属性名 | 功能 |
---|---|
placeholder | 提示文字,value用于设置默认提示值 |
required | 必填 |
autofocus | 自动获取焦点 |
autocomplete | 自动完成,可设置为on / off,适用于文字输入类的控件 密码输入框和多行输入不可用 |
pattern | 填写正则表达式。 多行输入不可用 |
input新增type类型
属性名 | 功能 |
---|---|
邮箱类输入框校验 | |
url | url校验 |
number | 数字类校验 step:设置每次增加/减少的步频 max/min:最大最小值 |
search | 搜索类,无校验。更多侧重的是语义 |
tel | 电话类输入框,不校验;安卓端会唤起数字键盘 |
range | 范围选择器,滑块 max/min:最大最小值 value:当前值 |
color | 颜色选择器 |
date | 日期选择器 |
time | 时间选择器 |
datetime-local | 日期时间混合选择器 |
month | 月份选择器 |
week | 周选择器 |
form标签新增属性
novalidate
:表单提交时不再进行验证。
多媒体标签
video标签
属性 | 值 | 描述 |
---|---|---|
src | url地址 | 视频地址 |
width | 像素值 | 视频播放器宽度 |
height | 像素值 | 高度 |
controls | 向用户显示视频控件,比如播放/暂停按钮 | |
muted | 静音 | |
autoplay | 自动播放 | |
loop | 循环 | |
poster | url地址 | 视频封面 |
preload | auto/metadata/none | 视频预加载,如果使用autoplay,则忽略 none:不进行预加载 metadata:仅预先获取视频的元数据,例如长度 auto:下载整个文件,即使用户不打算使用 |
audip标签
属性 | 值 | 描述 |
---|---|---|
src | url地址 | 视频地址 |
controls | 向用户显示视频控件,比如播放/暂停按钮 | |
muted | 静音 | |
autoplay | 自动播放 | |
loop | 循环 | |
preload | auto/metadata/none | 视频预加载,如果使用autoplay,则忽略 none:不进行预加载 metadata:仅预先获取音频的元数据,例如长度 auto:下载整个文件,即使用户不打算使用 |
全局属性(了解)
属性名 | 功能 |
---|---|
contenteditable | 表示元素是否可被用户编辑,可选true / false |
draggable | 元素是否可以被拖动 可选true / false |
hidden | 隐藏 |
spellcheck | 规定是否对元素进行拼写和语法检查 true / false。需要打开浏览器拼写检查 |
contextmenu | 规定元素的上下文菜单,在用户鼠标右键点击元素时显示 |
data-* | 用于存储页面的私有定制数据 |
CSS3
新增长度单位
- rem根元素字体大小的倍数,只与根元素字体大小有关
- vw视口宽度的百分之多少,10vw就是视口宽度的10%
- vh视口高度的百分之多少
- vmax / vmin 视口宽高中大 / 小的那个的百分之多少
新增背景属性
属性名 | 功能 | 使用 |
---|---|---|
background-origin | 设置背景图的原点 | padding-box:从padding区域开始铺开图片,默认值 border-box:从border区域开始铺开 content-box:从content区开始 |
background-clip | 设置背景图的向外裁剪的区域 | border-box:从border区域开始向外裁剪背景,默认值 padding-box:从padding区域开始 content-box:从content区开始 text:背景只呈现在文字上。 若值为text,则属性名需要加上 -webkit- 前缀 |
background-size | 设置背景图的尺寸 | 1. 用长度指定大小,不允许负值 2. 用百分比,不允许负值 3. auto:真实大小 4. contain:将图片等比例缩放,使图片的宽 / 高和容器的宽 / 高相等,因而可能会出现部分区域为空白 5. cover:将图片等比例缩放,直到完全覆盖容器,图片会尽可能全的显示,但是最后可能会显示不完整——相对比较好的选择 |
多背景图 | 设置多个背景图 | 使用background复合属性,具体不展开 |
新增边框属性
属性名 | 功能 | 使用 |
---|---|---|
border-radius | 设置边框圆角 | border-radius:10px |
outline-width | 外轮廓的宽度 | |
outline-height | 外轮廓的高度 | |
outline-style | 外轮廓的风格 | none:无轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实现轮廓 double:双线轮廓 |
outline-offset | 设置外轮廓与边框的距离 | 正负值都可以。 |
outline复合属性这里不展开,例如:outline: 50px solid blue
outline-offset不是outline的子属性,不能用复合属性的写法
新增文本属性
文本阴影
text-shadow:h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必须写,水平阴影的位置,允许负值 |
v-shadow | 必须写,垂直阴影的位置,允许负值 |
blur | 可选,模糊的距离 |
color | 可选,阴影的颜色 |
默认值:text-shadow:nono
表示没有阴影
文本换行
white-space:normal(默认值)
值 | 含义 |
---|---|
normal | 文本超出边界自动换行,文本中的换行被浏览器识别为一个空格 |
pre | 原样输出,与pre标签相同 |
pre-warp | 在pre的基础上,超出后换行 |
pre-line | 在pre的基础上,超出后换行,且只识别文本中的换行,空格会忽略 |
nowrap | 强制不换行 |
文本溢出
值 | 含义 |
---|---|
clip | 当内联内容溢出时,将溢出的部分裁切掉(默认值) |
ellipsis | 当内联内容溢出时,将溢出部分替换为。。。 |
要使得
text-overflow
属性生效,块容器必须显式定义overflow
为非visible
值,white-space
为nowrap
值
文本修饰
在css3中被升级为复合属性
text-decoration:text-decoration-line || text-decoration-style || text-decoration-color
属性名 | 值 |
---|---|
text-decoration-line | none:指定文字无装饰(默认值) underline:下划线 overline:上划线 line-through:贯穿线 |
text-decoration-style | solid:实线(默认) double:双线 dotted:点状线条 dashed:虚线 wavy:波浪线 |
text-decoration-color | 颜色 |
新增渐变
线性渐变
-
多个颜色的渐变,默认是从上到下
background-image:linear-gradient(颜色1,颜色2)
-
使用关键词设置渐变的方向
background-image:linear-gradient(to top | bottom | left | right,颜色1,颜色2)
-
使用角度设置方向
background-image:linear-gradient(30deg,颜色1,颜色2)
30deg是角度,是指中心横线的偏转角
-
调整开始渐变的位置
background-image:linear-gradient(颜色1 50px,颜色2 100px)
从0-50,纯颜色1;50-100,颜色1到颜色2的渐变,100之后,纯颜色2
径向渐变
-
多个颜色之间的渐变,默认从圆心到四周(不一定是正圆,要看容器本身的宽高比)
background-image:radial-gradient(颜色1,颜色2)
-
关键词调整渐变圆的圆心位置
background-image:radial-gradient(at top | bottom | left | right,颜色1,颜色2)
-
使用像素调整圆心位置
background-image:radial-gradient(at 100px 20px,颜色1,颜色2)
-
调整渐变形状为正圆
background-image:radial-gradient(circle,颜色1,颜色2)
-
调整形状的半径
background-image:radial-gradient(100px,颜色1,颜色2)——正圆
background-image:radial-gradient(50px 100px,颜色1,颜色2)——椭圆
-
调整开始渐变的位置
background-image:radial-gradient(颜色1 50px,颜色2 100px)——同上
重复渐变
在没有发生渐变,或者说是纯色的区域,重新开始新的一轮渐变
web字体
@font-face{
font-family:“xxx”;
src:url(“xxx.ttf”);
}
字体图标
- 相比图片更清晰
- 灵活性更高,更方便改变大小,颜色,风格
- 兼容性好,IE也支持
2D变换
位移
选择器{
transform:translateX(30px)| translateY(40px)| translate(30px,40px);
}
位移与相对定位很像,都不脱离文档流,不会影响其他元素
与相对定位相比:相对定位的百分比是参考父元素,位移的百分比是参考自己
浏览器针对位移有优化,与定位相比,浏览器处理位移效率更高
transform
可以链式编写,例如:
transform:translateX(30px) translateY(40px)
位移对行内元素无效
位移配合定位可以实现水平垂直居中
选择器{ position:absolute; left:50%; top:50%; // 上两步使得子元素的 左上顶点 在父元素的中心 transform:translate(-50%,-50%); // 这一步使得子元素的中心,在父元素的中心 }
缩放
选择器{
transform:scaleX(1.1) | scaleY(1.2)| scale(1.1,1.2)
}
- 值大于1表示放大, 反之缩小
- 可以为负值,效果是颠倒转向
- 借助缩放,可实现小于浏览器默认的字体大小
旋转
选择器{
// 正值代表顺时针,反之
transform:rotate(20deg)
}
扭曲(了解)
选择器{
// skew一个值的时候仅代表skewX
transform:skewX(20deg)| skewY(30deg)| skew(20deg,30deg)
}
变换原点
- 元素变换时,默认的原点是元素的中心,使用
transform-origin
可以设置变换的原点 - 修改变化原点对位移没有影响,对旋转和缩放会有影响
- 如果提供两个值,第一个用于横坐标,第二个纵坐标
- 只提供一个,若是像素值,表示横坐标,纵坐标取50%;若是关键词,另一个取50%
3D变换
空间与景深
开启3D空间
重要原则:元素进行3D变换的首要操作:父元素必须开启3D空间!!!
选择器{
transform-style:flat(2d,默认值)| preserve-3d
}
设置景深
景深:指定观察者与z=0平面的距离,能让发生3D变换的元素,产生透视效果,看起来更立体
使用
perspective
设置景深,可选:
- none:不指定,默认值
- 长度值:不允许负值
注意:
perspective
可以设定给父元素
透视点位置
就是观察者位置,默认的透视点在开启3D空间元素的中心。
使用perspective-origin
可以修改
背部
backface-visibility:hidden。旋转时看不到背部
过渡
过渡就是使瞬间的样式变化,按照一定方式变得缓慢平缓;
例如鼠标划过超链接时颜色的变化,点击按钮后的颜色变化等,默认转化都是瞬间完成,可能你已经习惯了这种变换,但有时候平缓一些看着还是比较舒适的;
基本使用
选择器{
// 设置为all,让所有能过渡的属性拥有过渡效果
transition-property:设置哪个属性需要过渡效果;能用数字值表示的属性才可以过渡
transition-duration:只能设置秒和毫秒;可以用逗号隔开每一个的变化时间
}
高级使用
transition-delay
作用:指定开始过渡的延迟时间,单位:s / ms
transition-timing-function
作用:设置过渡的类型
常用值:
- ease:平滑过渡——默认值
- linear:线性过渡
- ease-in:慢-快
- ease-out:快-慢
- ease-in-out:慢-快-慢
- step-start:直接到达终点
- step-end:过渡时间的最后一刻,直接到达终点
- steps():接收两个参数,第一个必须为正整数,指定函数的步数。第二个可以指定start或end,指定每一步的值发生变化的时间点,默认为end
- cubic-bezie():特定的贝塞尔曲线,通过网站制作就行
动画
基本使用
第一步:定义关键帧
-
简单定义
@keyframes 动画名{ from{ ...... } to{ ...... } }
-
完整定义
@keyframes 动画名{ 0%{ ... } 10%{ ... } 50%{ .... } 100%{ .... } }
第二步:给元素应用动画
- animation-name:指定动画名
- animation-duration:设置动画所需时间
- animation-delay:设置动画延迟
其他属性
- animation-timing-function:可选值同过渡
- animation-iteration-count:infinite——无限循环,设置数值就是次数
- animation-direction:normal(0-100),reverse(100-0),alternate(往复运动),alternate-reverse(反向往复)
- animation-fill-mode:设置动画之外的状态。backwards(默认,动画开始时的状态),forwards(动画结束时的状态)
- animation-play-state:设置动画的播放状态。running(默认,运动),pause(暂停)
记得考虑浏览器兼容的问题
与过渡的区别
过渡需要触发一个事件才会随着时间改变其CSS属性;动画在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。
-
动画不需要事件触发,过渡需要。
-
过渡只有一组(两个:开始-结束) 关键帧,动画可以设置多个。
多列布局
用于实现报纸类布局
- column-count:指定列数
- column-width:指定列宽
- columns:复合属性
- column-gap:列边距。即使设置为0,也不是完全的0
- column-rule-style/width/color:列与列之间边框的风格,宽度,颜色
- column-span:是否跨列,none / all
在布局中插入图片时,给图片的
width
设置为100%即可实现行内图片
伸缩盒模型——flex布局
- 传统布局:基于传统盒状模型,主要靠
display
属性+position
属性+float
属性 flex
布局在移动端应用广泛
伸缩容器/项目
- 伸缩容器:开启了
flex
的元素display: flex
- 伸缩项目:伸缩容器的所有子元素自动成为了:伸缩项目
- 一个元素可以同时是这两种身份
- 无论原来是哪种元素,一旦成为了伸缩项目,全部都会“块状化”
主轴方向
主轴:伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右
侧轴:与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下
主轴换行方式
选择器{
// 默认值不换行 | 自动换行 | 反向换行
flex-wrap:nowrap | wrap | wrap-reverse
}
主轴对齐方式
属性名:justify-content
常用值:
侧轴对齐
只有一行的情况
- 所需属性:
align-items
- 常用值:
以上主轴默认是水平方向。
多行的情况
- 所需属性:
align-content
- 常用值:
居中
-
选择器{ justify-content:center; align-items:center; }
-
选择器{ // 前提是已经开启flex布局 margin:auto; }
基准长度
- 概念:
flex-basis
设置的是主轴方向的基准长度,会让宽度或高度失效(取决于主轴方向) - 作用:浏览器根据这个属性设置的值,计算主轴上是否有多余空间,默认值为
auto
,即:伸缩项目本身的宽或高。
伸缩性
flex:1
会自动充满剩余空间,但是要先给一个初始的高度/宽度,不然初始化渲染会有问题
flex-grow
- 概念:定义伸缩项目的放大比例,默认为0,即:纵使主轴存在剩余空间,也不拉伸(放大)。
- 规则:
- 若所有伸缩项目的
flex-grow
都为1,则等分 - 若分别为1,2,3,则分到1/6,1/3,1/2的空间
- 若所有伸缩项目的
flex-shrink
- 概念:定义了项目的压缩比例,默认为1。即:如果空间不足,该项目就会缩小
排序和单独对齐
order
定义项目的排序顺序,数值越小,越靠前,默认为0- 通过
align-self
属性,可以单独调整某个伸缩项目的对齐方式。默认值为auto
,表示继承父元素的align-items / align-content
属性
媒体查询
媒体类型
@media all/print/screen{
......
}
媒体特性
运算符
- and:并且
- ,或者or:或
- not:否定
- only:肯定
BFC
概述
- BFC是Block Formatting Context(块级格式上下文),可以理解成元素的一个“特异功能”
- 该功能在默认的情况下处于关闭状态;当元素满足某些条件后被激活
- 所谓激活,就是:该元素创建了BFC
解决什么问题
- 元素开启BFC后,子元素不会再产生
margin
塌陷问题 - 自己不会被其他浮动元素所覆盖
- 就算子元素浮动,元素自身高度也不会塌陷