CSS样式

CSS样式

常用标签

标签名	作用	备注
p	段落文本内容	<P>段落文本内容</P>
br	换行	<br/> 换行
hr	水平线	<hr/> 水平线
strong	文本加粗（推荐使用）	<strong>强调的内容</strong>
b	文本加粗	<b>加粗内容</b>
em	文本倾斜（推荐使用）	<em>强调倾斜文本</em>
i	文本倾斜	<i>倾斜文本</i>
s	文本带删除线	<s>文本</s>
del	文本带删除线（推荐使用）	<del>文本</del>
u	文本带下滑线	<u>文本带下滑线</u>
sub	下标	<sub>下标</sub>
sup	上标	<sup>上标</sup>
div	块级元素，独占一行	<div>块级元素，独占一行</div>
span	独立修饰一段文字	<span>独立修饰一段文字</span>
ul >li	无序列表（type类型 disc默认实心圆、 circle 空心圆、square 方块、none无样式）	<ul> <li>无序列表<li/> </ul>
ol> li	有序列表（type类型1、a、A 、I， start开始位，只能是数字）	<ol type="A" start="4"> <li>有序列表</li> </ol>
dl> dt dd	自定义列表，常用于图文混排	<dl> <dt>可以是文字也可以是图</dt> <dd>相关文字</dd> </dl>
img	图片标签（属性 src 图片路径、 title鼠标悬停上去之后的提示信息、 alt图片不显示（加载失败）的提示信息）	<img src=''</img>
a	超链接（属性href点击后跳转网站、 target self默认值，当前页面打开，blank新页面打开、title鼠标悬停上去之后的提示信息）	<a href="www.baidu.com" target="self"></a>
table > tr >td	表格tr行td列（属性 border： 边框宽度 ；bordercolor：边框颜色；bgcolor：背景颜色；align：水平对齐方式；cellspacing：单元格与单元格之间的间距；cellpadding：单元格与内容之间的间距） tr属性 height：高度；bgcolor：背景颜色；align：文本水平对齐（left/right/center）；valign：文本垂直对齐（top/middle/bottom) td属性，给一个单元格设置宽高，影响的是一整列或一整行，Colspan：所要合并的单元格的列数；Rowspan：所要合并的单元格的行数	<table> <tr> <td></td> <td></td> <td></td> </tr> </table>
form	表单标签（属性 method：提交方式 get/post；action：向何处发送表单数据；type：文本框text、password密码框、submit提交按钮、button按钮、reset点击清空输入内容；placeholder：提示信息hint；name：必须设置，否则提交表单时输入内容不会被提交；value：值）	<form method="post" action="http://baidu.com>" <input type="text" placeholder="hint" name="username"/> </form>

标签分类

元素类型的分类，依据CSS的显示

块元素（block element）	行内（内联）元素	行内块元素
1、块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域 2、默认情况下，块状元素都会占据一行，会按顺序自上而下排列 3、块状元素都可以定义自己的宽高 4、块状元素一般都作为其他元素的容器，它可以容纳其他内联元素和其他块状元素，我们把这种容器比喻为一个盒子	1、内联元素的表现形式是始终以行内逐个进行显示，横着排 2、内联元素没有自己的形状，不能定义自己的宽高，它显示的宽高只能根据所包含内容的宽高来确定，它的最小内容单元也会呈现矩形形状 3、内联元素也会遵循盒模型基本规则，但对于margin和padding个别属性值不生效 4、只能设置左右边距，设置上下边距无效	内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
都有display:block/list-item;属性	display:inline;	display : inline-block;
例如：div p ul li ol li dl dt dd h1-h6等	例如：a b em i span strong等	例如：img input等

三种元素都可以设置display属性使其具备其他两种元素的特性，具体案例：

• img和p标签上下排列时，由于两者元素类型不一样，会出现3px的间距，可以给img设置display:block;属性使其具备块级元素属性以达到消除间距的目的
• 由横向排列的几个a标签组成的导航栏，可以通过给a设置display:inline-block;属性，使其具备行内块元素的属性，以达到给a设置上下边距的目的
• 二级菜单设置display:none;隐藏元素，可以通过给一级元素设置:hover属性，当鼠标滑过一级元素时改变二级元素的display属性为block达到显示隐藏的效果

标签选择器

内部样式<style> h1{width:200px}</style>

导入外部样式<link rel="stylesheet" type="text/css" href="css/index.css"

@import url(css/index.css)

link和import之间的区别：

1. 本质的差别：link属于XHTML标签，而@import是CSS提供的一种方式；
2. 加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以@import加载CSS页面时会没有样式，网速慢时会比较明显。
3. 兼容性差别：@import是CSS2.1提出的，老的浏览器不支持，只有在IE5以上的才能识别，而link标签无此问题。

行内样式style="width:200px;height:200px;"

优先级：就近原则 行内>内部>外部 !important优先级最高（<style>div{color:yellow!important}）

选择器名称	作用	备注
元素选择器	某一类标签样式
类选择器	某一类别标签样式（一个标签class可以有多个，空格隔开）	<div class="ibm"></div> <style> .ibm{background-color:red} </style>
id选择器	某一个标签样式（一个标签id只能有一个内容）	<div id="box"></div> <style> #box{color:red}</style>
*通配符	所有标签样式	*{ margin:0; padding:0; }
群组选择器	合并共同样式的选择器，逗号隔开	div,p,h1,.ibm, #box{color:red;}
子代选择器	父元素和子元素通过>连接，只能匹配到子元素	div>li li:hover{display:block;}
兄弟选择器	当前元素的后面一个兄弟选择器（.box+li）匹配class为box的后面第一个li节点 当前元素的后面所有的亲兄弟节点（.box~li)匹配class为box的节点的后面所有的li节点	.box+li{background:yellow;} .box~li{background:red};
后代选择器	包含选择器（div下边的p标签）（从右向左匹配）	div p{color:red;}
属性选择器	匹配属性的选择器	E[attr]:只使用属性名，但没有确定任何属性值 E[attr=“value”]:指定属性名并指定了该属性的属性值 E[attr=“value”]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含一个value词，并且等号前的不能不写。 E[attr^=“value”]:指定了属性名，并且有属性值，属性值是以value开头的 E[attr$=“value”]:指定了属性名，并且有属性值，属性值是以value结束的 E[attr*=“value”]:指定了属性名，并且有属性值，属性值中包含了value
伪类选择器	主要用于a标签（属性：a:link{}超链接的初始状态； a:visited{}超链接被访问后的状态； a:hover{}鼠标悬停，即鼠标滑过超链接时的状态；a:active{}超链接被激活时的状态， 即鼠标按下时超链接的状态；） link–visited–hover–active	当这4个超链接伪类选择符联合使用时， 应注意他们的顺序，正常顺序为 a:link，a:visited，a:hover，a:active， 错误的顺序有时会使超链接的样式失效
结构伪类选择器	X:first-child：匹配父元素的第一个X元素。IE7就可以支持 X:last-child：匹配父元素中最后一个X元素 X:nth-child(n)：用于匹配父元素中索引值为n的X元元素，索引值从1开始 X:only-child：匹配只有一个子元素且是X元素的X元素 X:root：匹配文档的根元素，在HTML中根元素是HTML X:empty：匹配没有任何子元素的元素X	.box div:first-child:{background:red}//匹配box容器下第一个div元素 li:nth-child(odd){background:yellow}//偶数 2n/even，奇数2n+1/odd
目标伪类选择器	E:target选择匹配E的所有元素，且匹配元素被相关URL指向	div.content{ display:none; } div.content:target{ display:block; } <div> <a href="#aaaa">aaaa</a> <div id="aaa" class="content">test</div> </div> 初始状态下id为aaa的div元素隐藏，当点击a标签时才显示
元素状态伪类选择器	E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素 E:disabled匹配所有用户界面（form表单）中处于不可用状态的E元素 E:checked匹配所有用户界面（form表单）中处于选中状态的元素E E:selection匹配E元素中被用户选中或处于高亮状态的部分 input:focus当input获取焦点时的会匹配此属性	input:enabled{background:red;} input:disabled{background:yellow;} input:focus{background:blue;} input:checked{background:red;}
删除默认样式选择器	input[type=checkbox]{appearance:none;width:20px; height=20px;border:1px solid black;}
否定伪类选择器	E:not(s)匹配所有不匹配简单选择符s的元素E	li:not(:first-chlid){background:yellow;}

选择器权重

!important(10000) > 内联样式(1000) > 包含选择符(为包含选择符的权重之和) > id选择器(0100) > class选择器(类选择器)(0010) > 类型(元素)选择器(0001)

当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式；相同权重的选择符，样式遵循就近原则，哪个最后定义，就采用哪个选择符的样式。

常用样式

样式名	含义	备注
color	颜色
width	宽度
align	对齐方式	left/right
noshade	取消阴影
opacity	透明度	0-1（0完全透明，1完全透明）

文本属性

属性	描述	说明
font-size	字体大小	单位是px，浏览器默认是16px
font-family	字体	当字体是中文字体或英文字体中有空格时，需加双引号； 多个字体中间用逗号链接，先解析第一个字体， 如果没有解析第二个字体
color	颜色	color:red; color:#ff0; color:rgb(255,0,0);
font-weight	加粗	bolder(更粗的)、bold(加粗)、normal(常规) 100-500不加粗、600-900加粗
font-style	倾斜	italic(斜体字)、oblique(倾斜的文字)、normal(常规显示)
text-align	文本水平对齐	left、right、center、justify(两端对齐)
line-height	行高	line-height的数据=height的数据， 可以实现单行文本垂直居中
text-indent	首行缩进 (2em)	text-indent可以取负值；只对第一行起作用
letter-spacing	字间距	控制文字和文字之间的间距
word-spacing	英文单词间间距
text-decoration	文本修饰	none没有、underline下划线、overline上划线、 line-through删除线
text-transform	英文大小写	capitalize每一个首字母大写、lowercase全部转小写、 uppercase全部转大写、none
font	文字简写	font-style font-weight font-size line-height font-family顺序不能改变， 必须同时指定font-size和font-family属性时才起作用

@font-face是CSS3中的一个模块，它主要是把自己定义的web字体嵌入到网页中。

@font-face语法规则：souce:此值指的是自定义字体的存放路径，可以是相对路径也可以是绝对路径

@font-face{
    font-family:<FontName>;
    src:<source>[<format>];
    font-weight:<weight>;
    font-style:<style>;
}

列表属性

属性	描述	说明
list-style-type	定义列表符合样式	disc(实心圆)、circle(空心圆)、 square(实心方块)、none(去掉符号)
list-style-image	将图片设置为列表符号样式	list-style-image:url();
list-style-position	设置列表项标记的放置位置	outside列表的外面(默认值)、inside列表的里面
list-style	简写	list-style:none;去除列表符号

选项列表datalist

<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google"  value="http://www.google.com"
</datalist>
<!--option元素必须要设置value属性-->

背景属性

属性	描述	说明
background-color	背景颜色	background-color : red；
background-image	背景图片	background-image:url();
background-repeat	背景图片的平铺	background-repeat:no-repeat/repeat/repeat-x/repeat-y;
background-position	背景图片的定位	background-position:水平位置 垂直位置； left center right top center bottom
background-attachment	背景图片的固定	background-attachment : scroll(滚动)/fixed(固定， 固定在浏览器窗口里面，固定之后就相对于浏览器窗口了)
background-size	背景图片大小	background-size:100% 100%； cover等比例缩放，铺满全屏，宽高中较小的铺满，较大的被裁剪 contain宽高中较大的扩展至最大尺寸，较小的铺不满盒子，会留白
background	缩写	background : background-color background-image background-repeat background-position background-attachment; 可以是这五个中的任意几个组合，顺序可以变化， 只有background-size需要单独设置

浮动属性

属性	描述	说明
float	float:left/right/none;	元素靠左边浮动、靠右边浮动、不浮动
clear	clear:none/right/left/both;	允许有浮动对象、不允许右边有浮动对象、不允许左边有浮动对象、不允许有浮动对象

浮动的作用：定义网页中其他文本如何环绕该元素显示，让竖着的东西横着来摆放

清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。

清除浮动四种方式：

1. 浮动的元素添加固定高度
2. 浮动元素添加overflow:hidden;让浮动元素计算高度；
3. 浮动元素下一个兄弟元素添加clear :left/right/both；清除浮动
4. 浮动元素后面补一个盒子，不设置宽高，添加clear :both;

溢出属性

属性	描述	说明
overflow	容器的溢出属性 overflow:visible/hidden/scroll/auto/inherit; visible：默认值，溢出内容会显示在元素之外 hidden：溢出内容隐藏 scroll：滚动，溢出内容以滚动方式显示 auto：如果有溢出会添加滚动条，没有溢出正常显示 inherit：规定应该遵循父元素继承overflow属性 overflow-x：X轴溢出属性； overflow-y：Y轴溢出属性
white-space	空余空间，用来设置如何处理元素内的空白 white-space:nomal/nowrap/pre/pre-line/inherit; normal：默认值，空白会被浏览器忽略 nowrap：文本不会换行，文本会在同一行上显示，直到遇到<br/>标签为止 pre：显示空格，回车，不换行 pre-wrap：显示空格，回车，换行 pre-line：显示回车，不显示空格，换行
text-overflow	text-overflow:clip/ellipsis; clip：默认值，不显示省略号 ellipsis：显示省略标记；

单行文本溢出显示省略号需同时设置以下属性：

1. 容器宽度：width:200px;
2. 强制文本在一行内显示：white-space:nowrap；
3. 溢出内容为隐藏：overflow:hidden;
4. 溢出文本显示省略号：text-overflow:ellipsis;

表单属性

属性名	作用	案例
radio	单选框	<div><br/> <input type="radio" name="aaa" id="man" checked><lable for="man">男</lable><br/></div>
checkbox	多选框	<div><br/> <input type="checkbox" name="bbb" id="html" checked><label for="html">html</label><br/></div>
file	上传文件	<input type="file" name="file" id="">
image	图片代表提交按钮	<input type="image" src="submit.jpg">
hidden	隐藏按钮	<input type="hidden" name="" id="">
disabled	禁用属性	<input type="text" disabled value="value">
readonly	只读功能	<input type="text" readonly value="value">

HTML5 input新增样式

属性名	描述	说明
color	生成一个颜色选择的表单	<input type="color"/>
tel	唤起拨号盘表单
search	产生一个搜索意义的表单
range	产生一个滑动条表单	<div>滑块效果：<input type="range" name="range" min="100" max="200" value="150" step="10>"
number	产生一个数值表单
email	限制用户必须输入Email类型
url	限制用户必须输入url类型
date	限制用户必须输入日期
month	限制用户必须输入月类型
week	限制用户必须输入周类型
time	限制用户必须输入时间类型
datetime-local	选取本地时间
autofocus	给文本框、选择框或者按钮控件加上该属性，当打开页面时，该控件自动获取焦点，一个页面只能有一个
required	验证输入内容不能为空
multiple	可以输入一个或多个值，每个值之间用逗号隔开	<input type="email" multiple/>
pattern	将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。	<input pattern='[0-9][A-Z]{3}' title="输入内容：一个数与三个大写字母" placeholder=""

下拉菜单属性

<!--size显示几个 multiple多选-->
<select size="3" multiple>
    <!--value提交给后端的value,selected默认选中-->
    <option value="value" selected>value</option>
</select>

多行输入框

<!--placeholder提示文本 textarea默认value是在双标签内部
css中通过resize属性设置大小，vertical、horizontal、both、none-->
<textarea cols="10" rows="10" placeholder="hint" >value</textarea>

字段集属性

<fieldset>
    <legend>
        性别
    </legend>
    <input type="radio" name="aa">value
</fieldset>

阴影属性

属性名	描述	说明
text-shadow	字体阴影text-shadow:水平方向位移 垂直方向位移 模糊程度 阴影颜色；	text-shadow:10px 10px 1px red;
box-shadow	盒子阴影h-shadow(水平阴影的位置，允许负值，必需)， v-shadow(垂直阴影位置，允许负值，必须)， blur(模糊距离，可选)，spread(阴影大小，可选)， color(阴影颜色，可选)，inset(从外层的阴影改变阴影内存阴影)	box-shadow:10px 10px 5px #888888

圆角属性

属性名	描述	说明
border-radius	1个值，四个角圆角大小一样， 2个值左上角和右下角一样，左下角和右上角一样， 3个值左上、左下右上一致、右下 4个值左上、右上、右下、左下 border-top-left-radius:10px;可以通过此属性单独为一个角设置圆角。	border-radius:10px 20px 30px 40px/50px 60px 70px 80px; 可以通过添加/分别为x轴和y轴方向设置不同的圆角

伪元素

• ::after{与content属性一起使用，定义在对象后的内容。}

  div::after{content:url(logo.jpg)/“文本内容”;}

• ::before:{与content属性一起使用，定义在对象前的内容。}

  div::before{content:“文本内容”;}

• ::first-letter{定义对象内第一个字符的样式}

• ::first-line{定义对象内第一行文本的样式}

定位

书写语法	说明	文档流	偏移位置时的参照物	层叠顺序（z-index）
position:static;	默认值	默认	默认	z-index属性是不带单位的，并且可以给负值，没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上
position:absolute;	绝对定位	脱离	1、当没有父元素或者父元素没有定位，参照物是浏览器窗口的第一屏 2、有父元素且父元素有定位，参照物是父元素
position:relative;	相对定位	不脱离	自己的初始位置
position:fixed;	固定定位	脱离	浏览器的当前窗口
position:sticky;	粘性定位	可以做吸顶效果，粘性定位是CSS3.0新增的，兼容不好
z-index	层级	值越大越考上	当两个元素都有定位时z-index越大，越靠上

HTML5新增语义化标签

标签名	描述	说明
section	表示页面中的一个内容区块
article	表示一块与上下文无关的独立的内容
aside	在article之外的，与article内容相关的辅助信息
header	表示页面中一个内容区块或整个页面的标题
footer	表示页面中的一个内容区块或整个页面的脚注
nav	表示页面中导航链接部分
figure	表示一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）
main	表示页面中主要的内容
audio	音频标签controls：如果出现该属性，则向用户显示控件，比如播放按钮。 autoplay：如果出现此属性，则视频在就绪后马上开始播放。 loop：重复播放属性。 muted：静音属性。 poster：规定视频正在下载时显示的图像，直到用户点击播放按钮。	<audio src="someaduio.wav">Audio元素</audio>
video	视频标签	<video src="movie.ogg" controls="controls">Video元素</video>

盒模型

属性	描述	说明
padding	1个值，四个方向一样 2个值，上下，左右 3个值，上，左右，下 4个值，上、右、下、左	padding-left padding-right padding-top padding-bottom
border	border :border-width border-style border-color; border-width border-style :solid(实线)/double(双实线)/ dashed(虚线)/dotted(点状虚线) 四个方向都可以单独设置 border-color：四个方向都可以单独设置	border-left border-right border-top border-bottom
margin	支持负值 margin :0 auto;水平居中 兄弟关系：两个盒子垂直方向，外边距取最大值， 水平方向外边距会合并处理。 父子关系：子元素设置margin-top，父元素也会出现上边距， 解决方案： 1、子margin-top需转换为父的padding-top，注意高度计算； 2、给父盒子设置边框 3、子盒子或父盒子加浮动 4、父盒子overflow :hidden;	margin-left margin-right margin-top margin-bottom

怪异盒模型

box-sizing:content-box(正常盒模型)、border-box(怪异盒模型)

content-box:CSS2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。

border-box:为元素设定的宽度和高度决定了元素的边框盒。元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

弹性盒

弹性盒是一种新的布局方式，特别适合移动端布局，通过display:flex属性设置为弹性盒

影响：

1. 子元素默认横向排列，可以通过设置flex-direction:column；使其竖向排列，row/column/row-reverse(横向倒叙排列)/cloumn-reverse(竖向倒数排列)。
2. 子元素中的行内元素，变成了块级元素，可以给其设置宽高及边框等属性。
3. 只有一个子元素的时候，可以设置margin:auto自动居中。

弹性盒属性：

属性名	描述
flex-wrap	设置显示不下自动换行
align-content	flex-start/flex-end/center/space-around/space-between;控制换行后行间距

弹性盒子元素属性：

属性名	描述	说明
align-self	flex-start/flex-end/center/baseline/stretch(不加高度默认占满，其他根据内容撑开)；给子元素设置位置。
order	给子元素设置显示在第几个，值越大越靠后，默认是0；
flex	给子元素设置weight，只给一个子元素设置，该子元素占满剩余空间。
flex-shrink	设置子元素是否可被压缩，0为不可被压缩，会出现滚动条效果	ul{display:flex;overflow:auto;} li{flex-shrink=0;}

多列布局

属性名	描述	说明
column-count	规定元素应该被分隔成几列，适用于除table外的非替换块级元素
column-gap	规定列之间的间隔大小
column-rule	设置或检索对象的列与列之间的边框，复合属性： column-rule-color:列之间规则的颜色 column-rule-style:规定列之间规则的样式 column-rule-width:规定列之间规则的宽度
column-fill	设置或检索对象所有列的高度是否统一 auto:列高度自适应内容 balance:所有列的高度以其中最高的一列统一
column-span	设置或检索对象元素是否横跨所有列，none:不跨列，all:横跨所有列
column-width	设置或检索对象每列的宽度
break-inside	禁止盒子内部折行avoid

响应式布局

常见布局方案：

1. 固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只涉及一套尺寸；
2. 可切换的固定布局：同样以像素为页面单位，参考主流设备尺寸，设计几套不同宽度的布局，通过识别屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局。
3. 弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果。
4. 混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果，只是混合像素盒百分比两种单位作为页面单位。
5. 响应式布局：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；移动优先（从移动端向上设计）。无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称为断点）。

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

媒体查询操作方式：对设备提出询问（称为表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

设备类型（media_type）：all(所有设备)、aural(听觉设备)、braille(点字触觉设备)、handled(便携设备，如手机、平板电脑)、print(打印预览图等)、projection(投影设备)、screen(显示器、笔记本、移动端等设备)、tty(如打字机或终端等设备)、tv(电视机等设备类型)、embossed(盲文打印机)

媒体查询结构：

/** @media 设备类型 and 媒体特性*/
@media all and (min-width:320px){
    body{
        background-color:blue;
    }
}
/**PC客户端或大屏幕设备：1028px至更大 */
@media only screen and(min-width:1029px){}
/**竖屏*/
@media screen and (orientation:portrait) and (max-width:720px){}
/*横屏*/
@media screen and (orientation:landscape){}

响应式布局的特点：面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题。

缺点：兼容各种设备工作量大，效率低下、代码累赘，会出现隐藏无用的元素，加载时间加长、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果，一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。

常用单位间的转换

单位名称	描述
px	绝对单位
em	相对单位，相对于父元素的字体大小
rem	相对单位，相对于根元素（html）字体大小

<script>
    document.documentElement.style.fontSize=document.documentElement.clientWidth
    /750*16+"px"
</script>
// fontsize=当前设备的CSS布局宽度/物理分辨率*基准font-size

px自动转rem插件：px to rem &rpx(cssrem)

改变全局rem基准：vscode 文件——>首选项——>设置——>搜索px——>Cssrem:Root Font Size

等比例缩放布局

vh与vw：vh view-height的缩写，100vh等于可视窗口的高度；vw view-width的缩写，100vw等于可视窗口的宽度。

100vw是包含滚动条窗口大小，100%是不包含滚动条的窗口大小

以320屏幕宽度为例：设置全局rem基准为16px

<style>
    html{
        /*320px==100vw
          16px == 5vw
        */
		font-size:5vw;
	}
</style>

渐变属性

CSS3渐变

CSS渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

线性渐变

语法：background:linear-gradient(direction,color-stop1,color-stop2,…);

说明：direction：默认为to bottom,即从上向下渐变；to right top，向右上角；90deg（角度）；

stop：颜色的分布位置，默认均匀分布，例如有三个颜色，各个颜色的stop均为33.33%

div{
	background:linear-gradient(to left,red,blue)
}
div{
	baxkground:linear-gradient(to right,red,blur)
}

径向渐变

语法：background:radial-gradient(center,shape,size,start-color,…,last-color);

说明：径向渐变不同于线性渐变，线性渐变是从一个方向向另一个方向的颜色渐变，而径向渐变是熊一个点向四周的颜色渐变。

center：渐变起点的位置，可以为百分比，默认是图形的正中心。

shape：渐变的形状，ellipse标准椭圆，circle表示圆形，默认为ellipse

size：渐变的大小，即渐变到哪里停止，它有四个值，closest-side：最近边；farthest-side：最远边；closest-corner：最近角；farthest-side：最远角

div{
	background:radial-gradient(red 0%,green 10%,blue 50%);
}
div{
	background:radial-gradient(circle,red 10%,green 50%);
}
div{
	background:-webkit-radial-gradient(50% 50% ,farthest-corner,red,green,blue);
}
div{
	background:-webkit-radial-gradient(center,farthest-corner,red,green,blue);
}

重复性线性渐变

div{
	background:repeating-linear-gradient(red,yellow 10%,green 20%);
}

重复性径向渐变

div{
	background:repeating-radial-gradient(red,yellow 10%,green 20%);
}

太极案例

div{
    width:200px;
    heidht:200px;
    background:linear-gradient(white 50%,black 50%);
    margin:10px auto;
    display:flex;
    align-items:center;
    border-radius:50%;
}
div::before{
    content:"";
    display:block;
    width:100px;
    height:100px;
    border-radius:50%;
    background:radial-gradient(white 25%,black 30%);
        
}
div::after{
    content:"";
    display:block;
    width:100px;
    height:100px;
    border-radius:50%;
    background:radial-gradient(black 25%，white 30%);
}

transform属性动画

给对象设置left属性会频繁的造成浏览器回流重排，而transform和opacity属性不会，因为它们是作为合成图层发送到GPU上，由显卡执行的渲染，这样做的优化如下：

• 可以通过亚像素精确得到一个运行在特殊优化过的单位图形任务上的平滑动画，并且运行非常快。
• 动画不再绑定到CPU重排，而是通过GPU合成图像，即使运行一个非常复杂的JavaScript任务，动画仍然会很快运行。

transition属性

CSS3的transition允许CSS的属性值在一定的时间内平滑地过渡，这种效果可以在鼠标点击、获取焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

语法：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型；

transition:all 5s 3s linear;

all单一属性：transition-property：检索或设置对象中的参与过渡的属性。

5s单一属性：transition-duration：检索或设置对象过渡的持续时间。

3s单一属性：transition-delay：检索或设置对象延迟过渡的时间。

linear单一属性：transition-timing-function：检索或设置对象中过渡的动画类型。

transition-timing-function:linear（匀速)/ease（逐渐慢下来）/ easi-in（加速）/ ease-out（减速）/ ease-in-out（先加速再减速）/cubic-bezier(.23,1.15,.69,.36);（贝塞尔曲线）/steps(动画执行的步数)（逐帧动画）；

贝塞尔曲线：http://cubic-bezier.com

translate属性

将元素向指定方向移动，类似于position中的relative

水平移动：向右移动translate(tx,0)、向左移动translate(-tx,0)

垂直移动：向上移动translate(0,-ty)、向下移动translate(0,ty)

对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)

translateX()：水平方向移动一个对象，对象只向X轴进行移动，如果是正值，对象向右移动；如果为负值，对象向左移动。transform:translate(-100px,0);==transform:translateX(-100px)

translateY()：纵轴方向移动一个对象，对象只向Y轴进行移动，正值向下移动，负值向上移动。

scale属性

让元素根据中心原点对对象进行缩放，默认值是1，0.01到0.99之间的值，使一个元素缩小，大于1的值，让元素变大。

缩放scale()函数和translate()函数的语法相似，可以接受一个值，也可以接受两个值，如果只有一个值时，其第二个值默认与第一个值相当。

例如：scale(2,2)让元素沿着X轴和Y轴放大两倍。scaleX(2)：只在X轴方向放大两倍。

transform-origin属性

改变中心点位置 transform-origin：center/left top/left bottom/right top/right bottom;

rotate属性

旋转rotate()函数，通过指定的角度参数对元素根据对象原点指定一个2D旋转，它主要在二维空间进行操作，接受一个角度值，用来指定旋转的幅度，如果这个值为正值，元素相对原点中心顺时针旋转，如果这个值为负值，元素相对原点中心逆时针旋转。

rotateX()，元素围绕其X轴以给定的度数进行旋转

rotateY()，元素围绕其Y轴以给定的度数进行旋转

skew属性

倾斜skew()函数能够让元素倾斜显示，它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

属性混合使用

多个属性同时使用transform: translateX(400px) rotate(45deg);

当translate平移动画与其他属性同时使用时，translate需写在前边，写在后边达不到预期效果。

animation动画

animation和transition的区别

相同点：都时随着时间改变元素的属性值。

不同点：transition需要触发一个事件（hover或click事件）才会随着时间改变其CSS属性，而animation在不需要触发任何事件的情况下也可以显示的随着时间变化来改造元素CSS的属性值，从而达到一种动画的效果，CSS3的animation就需要明确的动画属性值。

animation语法

声明动画

@keyframes identifier{
    from{
        width:200px;
        height:200px;
        background:red;
    }
    to{
        width:100px;
        height:100px;
        background:blue;
    }
}
@keyframes identifiter2{
    0%{}
    25%{}
    50%{}
    75%{}
    100%{}
}

demo1{
	width:50px;
    height:50px;
    background:blue;
    animation:identifiter(动画名称) 20s(持续时间) ease-in-out(动画过渡类型) 2s(动画延迟时间) infinite(动画循环次数) alternate(动画在循环中是否反向运动)
}

animation复合属性

属性名	描述	说明
animation-name	设置对象所应用的动画的名称	必须与@keyframes配合使用
animation-duration	设置对象动画的持续时间
animation-timing-function	设置对象动画的过渡类型	linear：线性过渡，等同于贝塞尔曲线(0.0,0.0,1.0,1.0) ease：平滑过渡，等同于贝塞尔曲线(0.25,0.1,0.25,1.0) ease-in：由慢到快，等同于贝塞尔曲线(0.42,0,1.0,1.0) ease-out：由快到慢，等同于贝塞尔曲线(0,0,0.58,1.0) ease-in-out:由慢到快，再到慢，等同于贝塞尔曲线(0.42,0,0.58,1.0)
animation-delay	设置动画开始前延迟的时间
animation-iteration-count	设置对象动画的循环次数	infinite：无限循环 number：循环次数
animation-direction	设置对象动画在循环中是否反向运动	normal：正常方向 reverse：反方向运行 alternate：动画先正常运行再反向运行，并持续交替运行 alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行
animation-play-state	设置对象动画的状态	running：运行 paused：暂停
animation-fill-mode	设置对象动画执行完毕后状态	none forwards：停留在最后一帧画面状态 backwards：停留在第一帧画面状态
steps	关键帧跳跃	steps(1(从一种状态到下一状态需要的步数),start(保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧)/end(保留当前帧，看不到最后一帧); step-start/step-end

动画库

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css

3D动画

CSS3中的3D变换主要包括以下几种：

1. 3D位移：主要包括translateZ()和translate3d()两个功能函数
2. 3D旋转：主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3. 3D缩放：主要包括scaleZ()和scale3d()两个功能函数，当scale3d()中X轴和Y轴同时为１，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)，通过使用3D缩放函数，可以让元素在Z轴上按比例缩放，默认值是1，当值大于1时，元素放大，反之小于1大于0.01时缩小。scaleZ()和scale3d()函数单独使用没有任何效果，需要配合其他的变形函数一起使用才会由效果。

景深

景深：近大远小，perspective属性，perspective:1200px;(在父元素中使用)，transform:perspective(1200px);(在子元素中使用)，两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间。

perspective-origin：观察3d元素的角度perspective-origin:center center(中心)/left top(左上角)/100% 100%(右下角)

.box:hover .center{
	transform:translateZ(-200px);
	transform:translate3d(0,0,200px);
	transform-style:preserve-3d;
    transform:rotateY(30deg);
    transform:rotate3d(0,0,1,30deg);
    perspective:800px;
    transform:scaleZ(10) rotateX(45deg);
}

网格布局

含义：它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

与flex布局的区别：Grid布局和Flex布局由一定的相似性，都可以指定容器内部多个项目的位置，但也由重大区别，Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局。Glid布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。网格布局案例：不规则布局页面。

容器和项目

容器：一个案例中最大的盒子，可以理解成父元素

项目：一个案例中，最大盒子里面的内容，可以理解为子元素

行和列：容器里面的水平区域称为“行”，垂直区域称为“列”。

单元格：行和列的交叉区域，称为单元格

网格线：划分网格的线，称为网格线，水平网格线划分出行，垂直网格线划分出列。一个m行n列的网格需要m+1+n+1条线，m+1条横线，n+1条纵线

容器属性

属性名	描述	说明
display:grid;	给父元素添加display:grid/inline-grid	grid(块网络，容器从上向下排列)/inline-grid(行内网络，容器从左向右排列)
grid-template-row	表示多少行	grid-template-rows:200px 200px 200px; grid-template-rows:33.33% 33.33% 33.33%;
grid-template-column	表示多少列	grid-template-columns:200px 200px 200px; grid-template-columns:33.33% 33.33% 33.33%;
repeat	repeat(重复的次数,重复的数值或者重复的模式)	grid-template-columns:repeat(3,33.33%); 等同 grid-template-columns:33.33% 33.33% 33.33%;
auto-fill关键字	自动填充	grid-template-columns:repeat(auto-fill,33.33%);
fr关键字	列宽片段，两列的宽度分别为1fr和2fr，就表示后者是前者的两倍	grid-template-columns:1fr,3fr,1fr;
grid-gap	行列间距	grid-row-gap:20px; grid-column-gap:20px; grid-gap:20px 20px;(复合式写法) 新版中省略grid-前缀，row-gap/column-gap/gap
grid-template-areas	指定区域，通过grid-area指定项目名称，.box(grid-area:a)	grid-template-areas:‘a a a’ ‘b b c’ ‘d e e’;
grid-auto-flow	row dense和column dense，这两个值主要用于，某些项目指定位置后，剩下的项目怎么自动放置。	grid-auto-glow:column | row;
place-items	单元格内容对齐方式(复合属性)，place-items:<justify-items> <align-items> start:对齐单元格的起始位置；end：对齐单元格的结束位置；center：单元格内部居中；stretch：拉伸，占满单元格整个宽度（默认值）。	justify-items:start/end/center/stretch; align-items:start/end/center/stretch; place-items: start end;
place-content	单元格项目对齐方式place-content:<justify-content> <align-content>	justify-content:start/end/center/stretch/ space-around(每个项目两侧的间隔相等，多有项目之间的间隔比项目与容器的间隔大一倍)/ space-between(项目与项目的间隔相等，项目与容器边框之间没有间隔)/ pace-evenly(项目与项目、项目与容器边框之间的间隔相等)

项目属性

grid-column-start:左边框所在的垂直网格线位置
grid-column-end:右边框所在垂直网格线位置

grid-row-start:上边框所在的水平网格线位置

grid-row-end:下边框所在的水平网格线位置

合并写法：

.box div:nth-child(2){

​ grid-column:2/4;

​ grid-row:1/3;

}

特殊符号

特殊符号	解释
尖角号<	&lt; 左尖角号 &gt; 右尖角号
空格	&nbsp; 该空格占据宽度受字体影响明显而强烈 &emsp; 占据的宽度正好是一个中文宽度，且基本不受字体影响
版权	&copy; ©
商标	&trade; ™ &reg; ®

案例

三角形案例

div{
	width:0;
    height:0;
    border:20px solid transparent;
    //下三角
    border-top:5px solid black;
    //上三角
    border-bottom:5px solid black;
    position:relative;
    top:5px;
}

行内元素转块级元素方法

1. display:block;
2. position:absolute;
3. float:left;

垂直居中

div{
    width:200px;
    height:200px;
    background:yellow;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-100px;
}

float与absolute区别

float：半脱离，可实现文字环绕效果

absolute：全脱离，不会出现文字环绕

锚点作用：a链接实现跳转到页面不同区域

<a href="#锚点名字"></a>
<div id="锚点名字">
    
</div>

精灵图

CSS Sprites的原理（图片整合技术）（CSS精灵图）/雪碧图

将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术。

通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度

通过整合图片来减小图片的体积

宽高自适应

width:auto;

height:auto;

min-height/max-height/min-width/max-width

父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷，解决方案：

• 给父元素添加overflow:hidden;(缺点：会隐藏溢出的元素)

• 在浮动元素下方添加空块元素，并给该元素添加clear:both;height:0;overflow:hidden;(缺点：在结构里增加了空块元素，不利于代码的可读性，且降低了浏览器的性能)

• 万能清除浮动

  选择器:after{content:"";clear:both;display:block;width:0;height:0;visibility:hidden;}

  display:none;和visibility:hidden;区别，display:none;完全隐藏不占位；visibility:hidden;占位隐藏

html,body,div{height:100%}高度占满全屏

calc()函数的使用，calc()函数：用于动态计算长度值。需要注意的是，运算符前后都要保留一个空格，例如：width:calc(100% - 10px);

任何长度值都可以使用calc()函数进行计算，支持+、-、*、/运算，使用标准的数学运算优先级规则