- CSS：全称Cascading Style Sheets（层叠样式表）
- CSS 规则由两个主要部分构成,选择器(给谁改样式)以及一条或多条声明
h1 { color:red; font-size: 25px; }h1 即为选择器, color:red;是一条声明,每条声明后面一定要加分号结束, 选择器就是根据不同需求把不同的标签选出来, - CSS 属性名，属性值关键字虽然大写也能执行，但是推荐使用小写， 冒号后面保留一个空格，选择器和大括号中间也保留一个空格
选择器
- 选择器（选择符）的作用就是根据不同需求把不同的标签选出来，简单说就是选择标签用的
- 选择器分为基础选择器和复合选择器
- 基础选择器是由单个选择器组成的,包括: 标签选择器、类选择器、id 选择器和通配符选择器
- 标签选择器:是指用 html 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式,能快速为页面中同类型的标签统一设置样式,不能差异化设置。
标签名 {
属性1: 属性值1;
属性 2: 属性值 2;
...
}
- 类选择器: 如果想要差异化选择不同的标签,单独或者几个标签,可以使用类选择器, 在标签中通过 class 属性来设置样式，类选择器使用.标识，.后紧跟类名
.类名 {
属性1: 属性值 1;
属性2: 属性值 2;
...
}
<div class='类名'> 红色</div>
可以给一个标签指定多个类名,从而达到更多的选择的目的,这些类名都可以选出这个标签, class 属性值中将多个类型用空格分开既可给标签指定多个类名
<style>
.red {
color: red;
}
.font12 {
font-size: 12px;
}
</style>
<div class="red font12">多类名</div>
- id 选择器: 可以为标有特定 id 的 html 元素指定特定的样式,css 中以#来定义 id 选择器, 只能被调用一次（如果有标签已经调用了，则后面的标签不允许再调用）, 用于页面唯一性的元素,经常的 JS 搭配使用
#id名{
属性1: 属性值 1;
属性 2: 属性值 2;
...
}
在标签中将 id 设置为 css 中定义的id名就好, <div id="id名"> red</div>
- 通配符选择器: 以*号表示,不用被调用,自动会用里面的属性值把所有标签的对应样式都修改掉
* {
}
- font-family 属性可以设置一个字体或多个字体, 如果字体名字中间有空格,需要用引号包起来,当设置多个字体时,用逗号隔开,会优先使用第一个,第一个没有时才用第二个,第二个没有才用第三个,以此类推....,如果都没有装,就会使用电脑上默认的字体。通常为了兼容性,推荐使用系统默认字体,保证在任何浏览器中都能正确显示.通常设置 body 的字体,这样就能改变所有字体,应该所有显示的内容都在 body 里.
- font-size: 由于不同浏览器默认字体大小不一致,所以通常要明确指定字体的大小值,记得加上px, 一般设置 body 标签的字体大小,就能改变所有标签的字体大小了,但是标题标签比较特殊,需要单独指定。
- font-weight: normal 相当于 400, bold 相当于 700
- font-style: normal标准样式, italic 斜体样式
- font的复合属性,注意顺序是固定死的, font-style 和 font-weight 可以省略, 但是font-size和font-family一定不能省
div {
font: font-style font-weight font-size/line-height font-family;
}
-
文本属性
- color 属性支持三种方式的值:
预定义的颜色值,比如: red 、green、blue
十六进制: #FF0000、#FF9900 注意以#开头
RGB代码: rgb(255,0,125)或者 rgb(100%,0,50%) - text-align: 水平对齐方式 left（默认） 、center、right
- text-decoration: 添加下划线、删除线、上划线等 none、underline、line-through、overline。可以通过设置a标签的text-decoration：none属性，将其自带的下划线去掉
4.text-indent: 文本第一行的缩进,单位可以是 px,也可以是 em,一单位的 em 表示一个字符的大小
- line-height: 行间距/行高
- color 属性支持三种方式的值:
CSS 引入的三种方式
- 内部样式表(嵌入式):是写到 html 页面内部,是将所有的 CSS 代码抽取出来,单独放到一个
<style>标签中, 这个<style>标签理论上可以放到 html 文档中的任何地方,但一般会放在文档的<head>标签中,通过这种方式,可以方便的控制当前整个页面中的元素样式设置 - 行内样式表(行内式):在标签的 style 属性上进行赋值
<div style="color: red; font-size: 12px"> 内部样式表</div> - 外部样式表(链接式):样式单独写到 css 文件中,之后把 css 文件使用<link>标签引入到html 文件中,
<link rel="stylesheet" href="style.css">，rel表示使用的样式表，href表示css文件路径
Emmet 语法
快速生成html标签语法
- 生成标签：直接输入标签名，按回车键即可，比如输入div 然后按回车键，就可以生成<div></div>
- 生成多个相同标签：直接输入标签名数量，然后按回车键即可，比如div3，然后按回车键，就可以快速生成3个div
- 有父子关系的标签：可以用>,比如 ul>li ，回车，就可以生成<ul><li></li></ul>
- 有兄弟关系的标签：可以使用+连接，比如 div+p，回车，就可以生成<div></div><p></p>
- 如果生成带有类名或者id名字的，直接写.类名，或者#id名，回车即可，比如输入 .demo 回车就可生成<div class=‘demo’></div>， 输入#two 回车就可生成<div id=‘two’></div>
- 如果生成的div类名是有顺序的，可以使用自增符号$,比如输入.demo$*5回车就可生成<div class=‘demo1’></div><div class=‘demo2’></div><div class=‘demo3’></div><div class=‘demo4’></div><div class=‘demo5’></div>
- 如果想要在生成的标签内部写内容可以用{}表示，比如 div{asdfsfs} 就会生成<div>asdfsfs</div>
快速生成CSS样式语法
- 比如 输入tac可以生成 text-align：center；
- 输入w100可以生成width：100px；
- 输入h100可以生成height：200px；
- 输入lh26可以生成line-height：26px；
- 输入tdn可以生成text-decoration：none；
.......
格式化代码
- shift+option+f 可以格式化当前文档,或者点击当前页面右键选择格式化文档
- 点击左下角设置图标-->设置-->搜索emmet.include-->在 setting.json 中添加下面两条语句:
"editor.formatOnType":true,
"editor.formatOnSave":true,
设置好后,每次只要保存代码会自动的帮我们格式化代码
复合选择器
- 复合选择器: 是建立在基础选择器之上,对基本选择器进行组合形成的; 复合选择器可以更准确,更高效的选择目标元素(标签); 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。主要包括: 后代选择器、子选择器、并集选择器、伪类选择器等等
- 后代选择器: 又称包含选择器,可以选择父元素里面子元素,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代。
元素1 元素2 { 样式声明 }
ol li { // 指定 ol 中的 li 标签颜色为红色
color: red;
}
注意: 元素1 和元素2 中间用空格隔开,元素 2 可以是儿子也可以是孙子,只要是元素 1 的后代都可以,元素 1 和元素 2 可以是任意的基础选择器,前面也可以加自定义的类名.nav ol li { 样式声明 }
子选择器: 只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素,孙子及后代不选，使用>隔开
元素1>元素 2 { 样式声明 }并集选择器: 可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明,使用逗号隔开, 任何形式的选择器都可以作为并集选择器的一部分
元素1,元素2 { 样式声明 }
div,p,.pig li { color: red; }-
伪类选择器: 用于向某些选择器添加特殊的效果,比如鼠标放到标签上,标签产生变化。其最大的特点是用冒号(:)表示,比如 :hover、:first-child。
- 链接伪类选择器:
a:link // 选择所有未被访问的链接
a:visited // 选择所有已被访问的链接
a:hover // 选择鼠标指针位于其上的链接
a:active // 选择活动链接(鼠标按下未弹起的链接)
- 链接伪类选择器:
a:link {
color: #333333;
text-decoration: none;
}
注意:使用伪类选择器的时候顺序不要写错了,一定要是:link :visited :hover :active。
a 标签的样式由于浏览器有默认设置,所以需要单独设置
- :focus 伪类选择器: 用于选取获得焦点的表单元素,焦点就是光标, 主要是 input 使用
input:focus {
color: red;
}
CSS 的元素显示模式:
块元素
- 特点：
- 自己独占一行
- 高度，宽度，内外边距都可以控制
- 宽度是默认容器（父级宽度）的100%
- 是一个容器及盒子里面可以放行内或者块级元素
- 常见块元素有h1～h6，p，div，ul，ol，li等
注意： 文字类的元素内不能使用块级元素，比如p标签和h标签里面主要用于存放文字，因此不能放块级元素
行内元素
- 也称内联元素
- 特点：
- 一行可以显示多个
- 高度，宽度直接设置是无效的
- 默认宽度是它本身的宽度
- 行内元素只能容纳文本或其他行内元素
- 常见行内元素有a,b,strong,em,i,del,s,ins,u,span等
- 注意：链接里不能在放链接， a里面可以放块级元素
行内块元素
- 特点：
- 同时具有块元素和行内元素的特点
- 和相邻行内元素在一行上，但是他们之间会有空隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度，行高，内外边距都可以控制（块级元素特点）
- 常见行内块级元素有 img、input、td
显示总结
显示模式的转换
在对应的样式中设置对应的 display 值就可以做对应的转换
a {
width: 200px;
height: 100px;
display: block;
}
转换为块元素 display: block;
转换为行内元素 display: inline;
转换为行内块元素 display: inline-block;
让 line-height 的高度和 height 的高度相等,既可设置垂直居中
background-color: 背景色
background-image: 背景图片,容易控制位置, 设置为 none,就是没有背景图片;设置为 url,就是有背景图片
background-image: url(images/icon.png)background-repeat: repeat | no-repeat | repeat-x | repeat-y: 背景平铺,默认是平铺的
background-position: x y; 背景图片位置, x y 如果表示方位名词(top、center、left、right、bottom), 如果只设置了一个,另一个默认居中对齐; x y 如果表示精确单位需要带上单位 px,此时第一个值是水平方向的偏移,第二个值是垂直方向上的偏移;x y可以一个设置精确位置,另一个设置方位
background-attachment: 背景图像固定, scroll 背景随内容滚动, fixed 内容滚动时背景图像固定
背景复合写法
background: 颜色 图片 平铺 滚动 位置,顺序没要求背景半透明:
background: rgba(0,0,0,0.3)使用背景图片的优势是控制位置非常方便
CSS 的三大特性: 层叠性、继承性、优先级
- 层叠性: 相同选择器设置相同的样式,后设置的会覆盖之前设置的,注意只覆盖相同的属性值
- 继承性: 子标签会继承父标签的某些样式,如文本颜色、字号
- 行高的继承：
{
body {
font: 12px/1.5 Microsoft YaHei; // 这里的1.5表示的是所有body里的字元素的行高是子元素本身fontsize的1.5倍，如果子元素没有设置fontsize则继承父元素的fontsize计算
}
}
-
优先级: 继承的权重值最低,不管父元素权重多高,子元素得到的权重值都是 0
- 复合选择器会有权重叠加的问题,权重虽然会叠加,但是不会有进位的问题
ul li { // 这里ul 权重为0001， li权重为0001， 所以其权重为0001+0001 = 0002
color:green
}
.nav li { // 这里.nav 权重为0010， li权重为0001， 所以其权重为0010+0001 = 0011
color:red
}
页面布局的三大核心:盒子模型、定位、浮动
盒子模型
- 盒子模型由边框，内边距，外边距，内容四部分组成
- border 边框: border-width、border-style、border-color、border-top、border-bottom、border-left、border-right
边框的简写:border-top: 1px solid red;
border-collapse: collapse; 合并相邻的边框
边框会增加盒子的实际大小 - content 内容:
- padding 内边距:
| 值的个数 | 表达意思 |
|---|---|
| padding:5px; | 1个值，代表上下左右都有5像素内边距 |
| padding:5px 10px; | 2个值，代表上下内边距是5像素 左右内边距是10像素 |
| padding:5px 10px 20px; | 3个值，代表上内边距是5像素，左右内边距是10像素 下内边距是20像素 |
| padding:5px 10px 20px 30px; | 4个值，代表上内边距是5像素，右内边距是10像素，下内边距是20像素，左内边距是30像素， 顺时针 |
padding 会影响盒子实际大小
- margin 外边距: margin-left、margin-top、margin-right、margin-bottom
块级盒子水平居中 设置margin: 0 auto;就可以了
相邻块元素外边距合并: 比如上下两个块元素,上边的块元素设置了底部 margin,下边的块元素设置了顶部,margin, 这时候两个块元素的 margin 不是取两者的和,而是取两者之中较大的那个作为两者之间的 margin;左右相邻的块元素也是同样的
嵌套块元素垂直外边距的塌陷: 对于两个嵌套关系(父子关系)的块元素,父元素有上边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值; 浮动的元素不会有塌陷的问题
解决方案:
1、可以为父元素定义上边框
2、可以为父元素定义内边距
3、可以为父元素添加 overflow: hidden;
- 清除内外边距: 很多网页元素都带有默认的内外边距
* {
margin: 0;
padding: 0;
}
- border-radius: 圆角边框, 可以设置 px,也可以设置百分比 , 也可以按顺序设置 4 个值,分别对应 左上 右上 右下 左下 ; 还有分别对应四个角的写法: border-top-left-radius、border-top-right-radius、border-botom-right-radius 和 border-bottom-left-radius
- box-shadow: 为盒子添加阴影，顺序为
box-shadow:h-shadow v-shadow blur spread color inset- h-shadow: 必需，水平阴影的位置，允许负值
- v-shadow：必须，垂直阴影的位置，允许负值
- blur： 可选，模糊距离
- spread： 可选，阴影的尺寸
- color：可选，阴影的颜色
- inset：可选，将外部阴影改为内部阴影
- text-shadow: 文字阴影，顺序为
box-shadow:h-shadow v-shadow blur color，没有spread和inset
传统网页布局的三种方式
- 标准流(普通流/文档流): 标签按照规定好默认方式排列. 块级元素独占一行从上向下顺序排列;行内元素按照从左到右的顺序排列
- 浮动
- 定位
浮动
- 为什么需要浮动, 比如我们需要多个div显示在同一行,这时我们可以将div的显示设置为行内块元素,但这个时候每个div横向之间会有空白缝隙,这个缝隙是很难控制的,而通过浮动就可以将多个块级元素显示在同一行,并且可以控制它们之间的缝隙;再比如希望将行内的两个块元素分别位居左右两边,中间空白,这时也可以用浮动解决
- 网页布局第一准则: 多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动
- 网页布局第二准则: 先设置盒子大小,再设置盒子位置
- float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框的边缘, 包括下面三个值:
- none: 元素不浮动,默认值
- left: 元素向左浮动
- right: 元素向右浮动
浮动的特性
- 加了浮动之后的元素,会具有很多特性:
- 浮动的元素会脱离标准流(脱标), 移动到指定位置,浮动的盒子不再保留原先的位置,浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
- 如果多个盒子都设置了浮动,则他们会按照属性值一行内显示并且顶端对齐排列,当一行放不下时,会自动换行显示,换行后也是顶端对齐排列
- 浮动的元素会具有行内块元素的特性
- 为了约束浮动元素位置,网页布局一般采用的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则
- 浮动和标准流的父盒子搭配,先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
- 一个元素浮动了,理论上其余的兄弟元素也要浮动,浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
清除浮动
- 为什么要清楚浮动:由于父级盒子很多情况下,不方便给高度,但子盒子浮动又不占有位置,最后父级盒子高度为 0,就会影响下面的标准流盒子
- 清楚浮动的本质就是清楚浮动元素的造成的影响,如果父盒子本身有高度,则不需要清除浮动.清除浮动之后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下面的标准流了
- 清除浮动使用的是 clear 属性,其有三个值,
- left:不允许左侧有浮动元素,清除左侧浮动的影响:
- right:不允许右侧有浮动元素,清除右侧浮动的影响:
- both:同时清除左右两侧浮动的影响
- 清除浮动的策略是: 闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外的其他盒子.
- 清除浮动的方法
- 额外标签法: 也称隔墙法,W3C 推荐的方法,就是在最后一个浮动子元素后面添加一个额外标签(必须是块级元素),添加清除浮动样式(给该标签样式设置 clear 属性)
- 父级添加 overflow 属性: 给父级盒子添加 overflow 属性,将其属性值设置为 hidden,auto,scroll 中的一种即可.缺点是无法显示溢出的部分
- 父级添加 after 伪元素: 给父级盒子样式添加下面样式
.clearfix:after{
content:"';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
*zoom:1; // 兼容 ie6,7
}
- 父级添加双伪元素:给父级盒子样式添加下面样式
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;// 兼容 ie6,7
}
jpg 图片格式: JPEG(JPG)对色彩的信息保留较好,高清,颜色较多,产品类的图片经常使用这种格式
gif 图像格式: GIF 格式最多只能存储 256 色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际常用语一些图片小动画效果
png 图像格式: 结合了 GIF 和 JPEG 的优点,具有存储形式丰富的特点,能够保持透明背景,如果想要切成背景透明的图片,选择这种格式
-
css 属性书写顺序
- 布局定位属性:dispaly,position,float,clear,visibility,overflow
- 自身属性:width,height,margin,padding,border,background
- 文本属性:color,font,text-decoration,text-align,vertical-align,white-space,break-word
- 其他属性:content.cursor,border-radius,box-shadow,text-shadow,background:linear-gradient
导航栏注意事项: 实际开发中,导航栏中的链接不是直接用a 标签,而是用 li 包含链接 a 的做法。如果直接用 a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字有容易被搜索引擎降权的风险),从而影响网站排名
多个行内块元素之间会有空隙
-
页面布局的整体思路
- 必须确定页面的版心(可视区)
- 分析页面中的行模块,以及每个行模块中的列模块
- 一行中的列模块经常浮动,先确定每个列的大小,之后确定列的位置
- 制作 html 结构,先有结构后有样式的原则,结构永远最重要
- 先理清布局再写代码
定位
- 为什么需要定位
- 定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置,并且可以压住其他盒子
- 某个元素在一个盒子内可以随意的移动,并且压住其他盒子
- 当我们滚动窗口时,盒子是固定在屏幕的某个位置的
- 定位 = 定位模式 + 边偏移
- 定位模式: 用于指定一个元素在文档中的定位方式, 通过 position 属性来设置,其值有四个如下:
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
| sticky | 粘性定位 |
- 边偏移: 决定了该元素的最终位置,通过 top,bottom,left,right,4 个属性值来确认的,注意如果同时设置了 top 和 bottom,则以 top 为准,如果同时设置了 left 和 right,则以 left 为准
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移,相对父元素的上边线距离 |
| bottom | 底部偏移,相对父元素的下边线距离 |
| left | 左侧偏移,相对父元素的左边线距离 |
| right | 右侧偏移,相对父元素的右边线距离 |
静态定位
- 静态定位是元素的默认定位方式,无定位的意思,语法入下:
***选择器 {
position: static;
}
- 静态定位按照标准流特性摆放位置,它没有边偏移,在定位布局时很少使用
相对定位relative重要
- 相对定位是元素在移动位置的时候,是相对于它原来的位置来说的, 当设置了一个元素的 position 为 relative 时,这是这是top:100px,是让该元素相对与它之前的上边线位置向下移动 100px, 如果设置 left 为 100px,是让该元素 相对于它之前的左边线位置向右移动 100px;
***选择器 {
position: relative;
top:100px;
....
width:200px;
height:200px;
}
- 相对定位特点:
- 它是相对于自己原来的位置来移动的(移动的时候参照的是自己原来的位置)
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置,类似停薪留职,职位还保留着,不会被别的盒子占有),最典型的应用是给绝对定位当爹的
绝对定位 absolute (重要)
- 绝对定位是元素在移动位置的时候,是相对于它祖先元素来说的
- 特点:
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document 文档)
- 如果祖先元素有定位(相对,绝对,固定定位),则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不在占有原先位置(脱标)
- 子绝父相: 子级使用绝对定位,父级则需要使用相对定位
- 子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不糊影响其他的兄弟盒子
- 父盒子要加定位限制子盒子在父盒子内显示
固定定位 fixed (重要)
- 固定定位: 是元素固定于浏览器可视区的位置。主要使用场景是在浏览器页面滚动时元素的位置不会改变
- 特点:
- 以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随滚动条滚动
- 固定定位不占有原先位置,也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位
粘性定位 sticky (了解)
- 粘性定位可以被认为是相对定位和固定定位的混合
- 特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加 top,left,right,bottom 其中的一个才有效
- 跟页面滚动搭配使用, 兼容性差,IE 不支持
定位叠放次序 z-index
- 使用定位布局时,可能会出现盒子重叠的情况,此时,可以使用 z-index 来控制盒子的前后次序,语法
***选择器{
z-index:1;
}
- 数值可以是正整数,负数或 0,默认是 auto,数值越大,盒子越靠上
- 如果属性值相同,则按照书写顺序,后来者居上
- 数字后面不能加单位
- 只有定位的盒子才有 z-index 属性
定位的特殊性
- 行内元素添加绝对或者固定定位后,可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位后,如果不给宽度或者高度,默认大小是内容的大小
- 脱标的盒子不会触发外边距塌陷的, 浮动元素,绝对定位,固定定位元素都不会触发外边距合并的问题
- 绝对定位(固定定位)会完全压住盒子, 在浮动中,浮动元素只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字/图片; 但是绝对定位/固定定位元素会压住标准流所有内容
- 浮动为什么不会压住下面标准流盒子里面的文字/图片呢? 因为浮动最初就是为了做文字环绕效果设计的
网页布局总结
- 一个完整的网页,是标准流,浮动,定位一起完成布局的,每个都有自己的专门用法。
- 标准流: 可以让盒子上下排列或者左右排列,垂直的块级盒子明显就用标准流布局
- 浮动: 可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
- 定位: 定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,如果元素自由在某个盒子内移动就用定位布局
元素的显示与隐藏
- display: 当属性值设置为 none 时,即隐藏元素, 使用 display 隐藏元素后,不再占有原来的位置
- visibility: 隐藏元素后继续占有原来的位置
- inherit: 继承上一个父对象的可见性
- visible: 可见
- hidden: 隐藏
- collapse: 主要用来隐藏表格的行或列,隐藏的行或列能够被其他内容使用
- overflow: 针对溢出的部分进行显示或隐藏,默认是显示的
- visible: 超出部分显示,默认值
- hidden: 超出部分隐藏
- scroll: 显示不下时滚动,滚动条不论内容能不能显示下都固定显示滚动条
- auto: 默认值,在需要的时候添加滚动条(能显示下的时候不显示滚动条,显示不下的时候显示滚动条)
精灵图
- 精灵图是为了减少服务器收发请求次数,提高页面加载速度的。一个网页中往往会应用很多小的背景图作为装饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器压力过大。核心原理是将很多小图片整合到一张大图中,这样只需要向服务器请求一次就可以了。
- 精灵图技术主要针对不经常跟换的背景图片使用,就是把多个小背景图片整合到一张大图中. 而对于经常更换的产品图则不适用
- 主要通过使用background-position移动背景图片位置,移动的距离就是这个目标图片的x和y坐标,需要注意网页中的坐标不同,x,y一般是负值
- 使用精灵图的时候需要精准测量,每个小背景图片的大小和位置
- 精灵图是有诸多优点,但是缺点很明显:
- 图片文件还是比较大
- 图片本身放大和缩小会失真
- 一旦图片制作完成想要更换比较麻烦
字体图标(iconFont)
- 字体图标主要用于显示网页中通用,常用的一些小图标,展示的是图标,本质属于字体
- 字体图标解决了精灵图的缺点
- 字体图标的优点:
- 轻量级:一个图标字体要比一系列的图像小,一旦字体加载了,图标就会马上渲染出来,减少服务器请求
- 灵活性: 本质其实是文字,可以随意的改变颜色,产生阴影,透明效果等
- 兼容性: 几乎只吃所有的浏览器,可以放心使用
- 字体图标的缺点:
- 字体图标只能是一些结构和样式比较简单的小图标
- 如果是结构和样式比较复杂的小图标,还是只能通过精灵图
- 字体图标使用:
- 字体图标下载, 推荐两个网站 http://icomoon.io 和 http://www.iconfont.cn, 可以挑选自己需要的字体图标,挑选好后下载到本地就可以了,下载的压缩包里有字体,有样式,还有使用demo
- 字体图标的引入,下载的压缩文件中有使用的demo
- 字体图标的追加, 将压缩文件中的selection.json从新上传,然后再选中自己想要新的图标,从新下载压缩包,并替换原来的文件即可
CSS 实现三角
- 设置盒子的宽高为0
- 设置盒子边框宽度 和样式, 设置为透明
- 设置箭头指向方向的反向边框的颜色
div {
width:0;
height:0;
border: 50px solid transparent;
border-left-color: pink;
}
- 可以通过设置上下左右边框的不同比例生成不同的三角形
CSS 用户界面样式
什么是界面样式
- 所谓界面样式,就是更改一些用户操作样式,以便提高更好的用户体验,比如:
- 更改用户的鼠标样式, 通过设置 cursor 属性来实现,对应有下面几个值
| 属性值 | 描述 |
|---|---|
| default | 小白箭头 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
- 表单(input,textare 等)轮廓线,当输入框成为焦点时,默认会显示蓝色边框,通过设置 outline 属性为 none,可以将蓝色边框去掉
- 防止拖拽拖拽文本域, 文本域默认右下角有个斜线三角,拖拽这个斜线三角可以改变文本域的大小,通过设置 resize 属性为 none,可以禁掉拖拽
vertical-align 属性
- vertical-align 属性用于设置一个元素的垂直对齐方式,但只针对行内元素或者行内块元素有效,比如图片或者表单(行内块元素)和文字垂直居中
| 值 | 描述 |
|---|---|
| baseline | 默认,元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
- 通常图片底部会有一个空白缝隙,原因是行内块元素默认是和文字的基线对齐的, 可以通过给图片设置 vertical-align 属性的值为 middle|top|bottom 中的一个解决
溢出文字省略号显示
- 单行文本溢出省略号显示
white-space: nowrap; //先强制一行内显示文本,默认 normal 自动换行
overflow: hidden; // 超出部分隐藏
text-overflow:ellipsis; // 用省略号替代超出的部分
- 多行文字溢出省略号显示,有较大的兼容性问题,只适用于 webkit 浏览器或者移动端,对 IE 浏览器是不兼容的
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 弹性伸缩盒子模型显示
-webkit-line-clamp: 2; // 限制一个块元素显示的文本的行数
-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
CSS 的初始化
- 为什么要进行 CSS 的初始化, 因为不同浏览器对同一种元素的默认样式是不一样的,比如有的默认margin 宽一点,有的窄一点.
- CSS 初始化里要做哪些事情呢?
- 做一些统一的处理,比如清除默认内外边距, 清除 li 标签左边的圆点, 设置 img 的垂直对齐方式,清除a 标签的下划线,设置字体,清除浮动等等
*{
margin:0;
padding:0;
}
em,
i {
font-style:normal;
}
li {
list-style:none;
}
img{
border:0;
vertical-align: middle;
}
button{
cursor: pointer;
}
a{
color:#666;
text-decoration:none;
}
body{
-webkit-font-smoothing: antialiased;// CSS3 的文字抗锯齿性
background-color:#fff;
color:#666;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino San GB, "\5B8B\4F53";// "\5B8B\4F53"是宋黑,这里这样写是有的浏览器识别不了中文会显示乱码
}
.clearfix:after { // 清除浮动
visibility:hidden;
clear: both;
display:block;
content:".";
height:0;
}
.clearfix{
*zoom:1;
}
HTML5 新特性
- 新特性都有兼容性问题,基本是 IE9 以上的浏览器才支持,对移动端没有任何兼容性问题
- <header>: 头部标签
- <nav>: 导航标签
- <article>: 内容标签
- <section>: 定义文档某个区域
- <aside>: 侧边栏标签
- <footer>: 尾部标签
- <audio>: 音频标签,只支持 mp3,Wav,Ogg 三种格式,推荐 MP3
- <video>: 视频标签,只支持 mp4,WebM,Ogg 这三种格式的视频,但并不是所有的浏览器都支持上面三种格式, 只有 MP4格式的所有浏览器都支持
- <input> 标签,增加了 type= "email","url","date","time","month","week","number","tel","search","color"等类型
CSS3 新特性
- 新特性有兼容性问题,IE9以上才支持,移动端无兼容问题
属性选择器
属性选择器: 通过中括号中的属性值将符合条件的元素选出来
-
属性选择器的权重是 0010;
|选择符|简介|
|-|-|
|E[att] |选择具有 att 属性的 E 元素|
|E[att="val"] |选择具有 att 属性且属性值等于 val的 E 元素|
|E[att^="val"] |选择具有 att 属性且值以 val 开头的的 E 元素|
|E[att$="val"] |选择具有 att 属性且值以 val 结尾的 E 元素|
|E[att*="val"] |选择具有 att 属性且值中含有 val的 E 元素|- 选择有某个属性的元素
input[value]{ // 选出有 value 属性的 input 标签
color:red;
}
- 选择属性=某值的某些元素
input[value="sss"]{ // 选出有 value 属性且 value 值等于 "sss"的 input 标签
color:red;
}
- 选择属性值开头的某些元素
input[value^="sss"]{ // 选出有 value 属性且 value 值以"sss"开头的 input 标签
color:red;
}
- 选择属性值结尾的某些元素
input[value$="sss"]{ // 选出有 value 属性且 value 值以"sss"结尾的 input 标签
color:red;
}
- 选择属性值中含有某字符串的某些元素
input[value*="sss"]{ // 选出有 value 属性且 value 值含有" sss" 的input 标签
color:red;
}
结构伪类选择器
- 结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素 E |
| E:last-child | 匹配父元素中的最后一个子元素 E |
| E:nth-child(n) | 匹配父元素中的第n个子元素 E |
| E:first-of-type | 指定类型 E 的第一个元素 |
| E:last-of-type | 指定类型 E 的最后一个元素 |
| E:nth-of-type(n) | 指定类型 E 的第n个元素 |
- 匹配父元素中第一个子元素
ul li:first-child{ // 匹配 ul 中第一个 li 元素
color:red;
}
- nth-child(n)选择某个父元素的一个或多个特定的子元素
- n 可以是数字,关键字和公式
- n 如果是数字,就是选择第 n 个子元素,里面数字从 1 开始
例如: 匹配父元素中第 5 个子元素
ul li:nth-child(5){ // 匹配 ul 中第5个且是 li 的元素
color:red;
}
- n 可以是关键字:even 偶数,odd 奇数, 可用来做表格的隔行变色
ul li:nth-child(even){ // 选出偶数行且是 li 的元素
color:red;
}
- 选择所对应类型的所有子元素
ul li:nth-child(n){ // 从 0 开始,每次往后面计算,这里面必须是你,不能是其他字母,选择了所有的孩子为 li 的子元素
color:red;
}
- n 可以是公式:常见公式如下(如果 n 是公式,则从 0 开始计算,但是第 0 个元素或者超出了元素的个数会被忽略)
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5,10,15... |
| n+5 | 从第 5 个开始(包括第 5 个)到最后 |
| -n+5 | 前 5 个(包含第 5 个) |
- nth-of-type(n) 和 nth-child(n)的用法基本相识,不同的地方如下:
section div:nth-child(1) { // nth-child 会把所有的子元素都拍序号,执行是先看 nth-child(1)之后再看 div,如果两者都匹配,则选出来
background-color:red;
}
section div:nth-of-type(1) { // nth-of-type 会把指定 div的子元素都拍序号,然后再把序号是 1 的找出来
background-color:red;
}
伪元素选择器
- 伪元素选择器可以帮助我们利用 CSS 创建新标签元素,而不需要 HTML 标签,从而简化 HTML 结构
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
可以利用伪元素选择器清除浮动
-
注意:- before 和 after 创建一个元素,但是属于行内元素
- 新创建的这个元素在文档中是找不到的,所以称为伪元素
- 语法是: element::before{}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为 1
盒子模型
- CSS3 中可以通过 box-sizing 来指定盒子模型
- box-sizing:content-box 该方式是盒子大小为 width+padding+border(以前的方式)
- box-sizing:border-box 盒子大小为设置的 width 和 height, 该模式下 padding 和 border 不会撑大盒子(前提是 padding 和 border 不超过 width 的宽度)
CSS3 滤镜 filter
- css3 新增 filter 属性将模糊或者颜色偏移等图形效果应用于元素
- 通过设置 filter 的属性值为 blur()函数,使图片模糊,blur()函数的参数值越大越模糊
filter:blur(5px);
过渡
- 过渡(transition)是 CSS3 中具有颠覆性的特性之一,我们可以在不使用 Flash 动画或 JS 的情况下,当元素从一种样式变换另一种样式时为元素添加效果
- 过渡动画: 是从一个状态渐渐地过渡到另外一个状态,可以让我们的页面更好看,虽然低版本浏览器不支持,但是不会影响页面布局
- 经常与:hover 一起搭配使用
- transition 属性有下面四个值,
transition: 变化属性 花费时间 运动曲线 何时开始- 要过度化的属性:想要变化的 css 属性,宽度高度,背景色,内外边距都可以,如果要所有的属性都变化过渡,写个 all 就可以
- 花费时间:单位是秒,比如 0.5s
- 运动曲线: 默认是 ease(可以省略), linear:匀速,ease 逐渐慢下,ease-in 加速,ease-out 减速,ease-in-out 先加速后减速
- 何时开始: 单位是秒(必须写单位)可以设置延迟触发事件,默认是 0s,可以省略
- 多个属性都要变化时,需要使用逗号隔开,比如:
transition: width 0.5s ease 0s, height 1s ease 1s;
技巧
- 添加有定位的盒子居中的设置, 水平居中可以设置 left:50%, margin-left: -width0.5; 垂直居中可以设置 top:50%,margin-top:-height0.5
- 每个标签都有一个 title 属性,当鼠标放上去时回显 title 内容
- 控制一个标签是否显示时可以控制 display 属性是否为 none,为 none 时不显示
const titleDisplayValue = isShow ? "block": "none";
<h2 style={{display: isShow}}>你好</h2>
- table 中设置 border-collapse 属性为 collapse 可以将每个单元格都显示的分割线改成相邻单元格只显示一条分隔线
- body 默认有内边距, 可以设置 padding:0, 清除
- height 和 line-height 设置一样的值可以使内容垂直居中
- <strong></strong> 加粗文字
- textare 的开始标签和结束标签如果分两行来写,输入内容开始距四周会有一定的空白区域,如果放在一行上写就没有了
- 使用 margin 负值,将边框合并,比如并排两个都有 1 像素边框的元素,那个中间那条线就是 2 像素,此时设置左边元素的 margin-right 为-1 或者右边元素的 margin-left 为-1 就可以将两条边框重叠,看起来是 1 像素,如果选中时一边边框被盖,可以设置 z-index 解决
- 对于左边是图片右边是文字的样式,可以设置图片左浮动来显示,因为浮动的图片不会盖住文字, 浮动本来就是为了实现文字环绕的
- padding 和 border 默认会把盒子变大
- 一般情况下,a 如果包含有宽度的盒子,a 需要转为块级元素
CSS3 新增其他新特性
- calc() 函数,此函数可以让你在声明 CSS 属性值时执行一些计算
width:calc(100% - 80px); // 表示宽度是父容器的 100%-80px, 括号中可以使用+-*/来进行计算
2D 转换
2D 移动
- 2D 移动是 2D 转换里的一种功能,可以改变元素在页面中位置,类似定位
- 语法:
transform: translate(x,y); //x 和 y 分别表示 X 轴和 Y 轴移动的距离
transform: translate(50%,30%); // 值为百分比时,表示相对于自身元素的宽高
transform: translateX(n); // x 轴上移动 n
transform: translateY(n); // y 轴上移动 n - translate 最大的优点是不会影响到其他元素的位置
- translate 对行内标签没有效果
2D 旋转
- 2D 旋转值的是让元素在 2 维平面内顺时针旋转或者逆时针旋转
- 语法:
transform:rotate(度数) - rotate 里面跟度数,单位是 deg,比如 rotate(45deg)
- 角度为正时是顺时针,负时是逆时针
- 默认旋转的中心点是元素的中心点, 也可以通过 transform-origin 设置元素旋转的中心点, 语法如下:
transform-origin: x y;- 注意后面的参数 x 和 y 是用空格隔开的
- xy 默认转换的中心点是元素的中心点50% 50%
- 还可以给 xy 设置像素或者方位名词(top bottom left right center)
2D 缩放
- 语法如下:
transform: scale(x,y); // 注意 xy 是用逗号隔开的 - 里面写的参数不跟单位,2 就是两倍,0.5 就是0.5 倍,当参数是一个时,表示宽和高都缩放这么大倍数
- scale 的优势是不会影响其他的盒子,而且可以设置缩放的中心点,比如设置 transform-origin:left bottom; 就可以设置其缩放的中心点事左下角
2D 转换的综合写法
- 同时使用多个转换,其格式为 transform: translate() rotate() scale() ... 等,中间用空格隔开
- 其顺序会影响转换的效果(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性的时候,记得要将位移放到最前
动画
基本使用
- 先定义动画,用 keyframes 定义动画格式入下:
@keyframes 动画名称{
0%{ // 动画开始时的状态
width:100px;
}
100%{ // 动画结束时的状态
width:200px;
}
}
- 起始和结束状态也可以分别使用 from 和to 表示
@keyframes 动画名称{
from { // 动画开始时的状态
width:100px;
}
to { // 动画结束时的状态
width:200px;
}
}
- 再使用动画, 使用动画需要给 animation-name 设置调用动画的名称, 然后给 animation-duration设置动画持续时间
div{
width:100px;
height:100px;
animation-name: 动画名称;
animation-duration: 持续时间;
}
动画常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 定义动画 |
| animation | 所有动画属性的简写属性,除了 animation-play-state 属性 |
| animation-name | 定义@keyframes 动画的名称,必须的 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒,默认是 0,必须的 |
| animation-timing-function | 规定动画的速度曲线,默认是 ease |
| animation-delay | 规定动画何时开始,默认是 0 |
| animation-iteration-count | 规定动画被播放的次数,默认是 1,还有 infinite |
| animation-direction | 规定动画是否在下一周期逆向播放,默认是 normal, alternate 逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停,默认是 running,还有 pause |
| animation-fill-mode | 规定动画结束后状态,保持 forwards 回到起始 backwards |
- 动画属性的简写:
animation: 名称 持续时间 速度曲线 延迟时间 重复次数 方向 是否停留在初始状态;
简写里不包含 animation-play-state - 速度曲线的值有如下: linear,ease,ease-in, ease-out,ease-in-out,steps(多少步)
3D 转换
- 三维坐标系
- x 轴: 水平向右,右边是正值,左边是负值
- y 轴: 垂直向下,下边是正值,上边是负值
- z 轴: 垂直屏幕,往外是正值,往里是负值
3D 位移
- 3D 移动是在 2D 移动的基础上多加了一个可以移动的方向,就是 z 轴
- transform:translated3d(0,100px,200px);
透视 perspective
- 透视就是视距,就是眼睛到屏幕的距离,物体离屏幕(z 轴)越大,我们看到的物体就越大
- z 轴上的偏移只有和透视结合使用才能看的出来
- 透视需要写在被观察元素的父盒子上,
perspective:500px
3D 转换
- 3D 旋转可以让元素在三维平面内沿着x 轴,y 轴,z 轴或者自定义轴进行旋转
- transform:rotateX(45deg):沿着 x 轴正方向旋转 45 度
- transform:rotateY(45deg):沿着 y 轴正方向旋转 45 度
- transform:rotateZ(45deg):沿着 z 轴正方向旋转 45 度
- transform:rotate3D(x,y,z,deg):沿着自定义轴旋转 deg 角度,xyz 表示旋转轴的矢量,是标识是否希望沿着该轴旋转,比如:
transform:rotate(1,0,0,45deg) 表示沿着 x 轴旋转 45 度
- 左手法则: 伸出自己的左手将大拇指指向轴的正向,四指弯曲的方向就表示正值旋转的方向
- 3D 呈现 transform-style: 控制子元素是否开启三维立体环境, 默认是 flat,子元素不开启 3d 立体空间. 子元素开启立体空间需将父级的 transform-style 设置为 preserve-3d;
浏览器私有前缀
- 浏览器私有前缀是为了兼容老版本浏览器的写法,较新版本的浏览器无需添加
| 前缀 | 浏览器 |
|---|---|
| -moz- | 代表firefox浏览器私有属性 |
| -ms- | 代表ie浏览器私有属性 |
| -webkit- | 代表safari,chrome私有属性 |
| -o- | 代表opera私有属性 |
移动web开发
- 国内浏览器都是根据Webkit修改过来的内核,兼容移动端主流浏览器,处理Webkit内核浏览器即可
- meta标签的name设置为viewport时,既是视口标签,标准写法
<meta name="viewport" conten="width=device-width, user-scalable=no,initial-scale=1.0, maximum=1.0, minimum-scale=1.0">, 其属性如下:
| 属性 | 解释 |
|---|---|
| width | 宽度设置的是viewport宽度,可以设置device-width特殊值 |
| initial-scale | 初始缩放比,大于0的数字 |
| maximum-scale | 最大缩放比,大于0的数字 |
| minimum-scale | 最小缩放比,大于0的数字 |
| user-scalable | 用户是否可以缩放,yes或no |
移动端开发方案
单独制作移动端页面(主流)
- 通过判断设备,如果是移动设备,则跳到移动端页面。通常情况下,网址前面加m可以打开移动端
响应式页面兼容移动端(非主流)
- 通过判断屏幕宽度来改变样式,以适应不同终端,缺点是制作麻烦,需要花很大精力去调兼容性问题
移动端浏览器
- 移动端浏览器基本以webkit内核为主,因此就考虑webkit兼容性问题, webkit内核对H5和CSS3支持的非常好,所以可以放心使用
移动端CSS初始化
- 推荐normalize.css,它有如下特点:
- 保护了有价值的默认值
- 修复了浏览器bug
- 是模块化的
- 拥有详细的文档
特殊样式的解决
- 清除点击高亮:
-webkit-tap-highlight-color: transparent; - 禁用长按页面时弹出的菜单:
img,a{-webkit-touch-callout:none;} - ios 需要加上这个属性才能给按钮和输入框自定义样式:
-webkit-appearance:none
两倍精灵图做法
- 先把精灵图等比例缩放为原来的一半
- 然后根据测量坐标和大小
- 把 background-size 设置为原精灵图宽度的一半
移动端常见布局
单独制作移动端页面中常见布局
流式布局(百分比布局)
- 流式布局,又称百分比布局,也称非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
- 流式布局方式是移动 web 开发比较常见的布局方式
- 可以通过设置盒子的 max-width 和 min-width 来限制盒子的最大最小宽度
flex 弹性布局(强烈推荐)
- flex是flexible Box的缩写,意为弹性布局,用来为盒子模型提供最大的灵活性,任何一个容器都可以指定为flex布局
- 操作方便,布局极为简单,移动端应用很广泛,但是PC端浏览器支持情况较差
- 其原理是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
- 当父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效
- flex布局中父元素主要使用下面几个属性:
- flex-direction: 设置主轴的方向, 默认x轴是主轴方向,水平向右,y轴是侧轴方向,水平向下,属性值如下
| 属性值 | 说明 |
|---|---|
| row | 默认值,从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
- justify-content: 设置主轴上的子元素排列方式,属性值如下:
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值,从头部开始,如果主轴是x轴,则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐(如果主轴是x轴则水平居中) |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边再平分剩余空间 |
flex-wrap: 设置子元素是否换行,默认nowrap是不换行的,当子元素加起来的宽度超过父元素宽度也不换行,而是挤压每个子盒子的宽度,使其保持在一行显示. 若想换行需设置为wrap
align-content: 设置侧轴上的子元素的排列方式(多行)
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值,从侧轴的头部开始排列 |
| flex-end | 从侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先两边贴边再平分剩余空间 |
| stretch | 设置子元素高度平分父元素高度 |
- align-items: 设置侧轴上的子元素排列方式(单行)
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸(默认值) |
- flex-flow: 复合属性,相当于同时设置了flex-direction和flex-warp,
flex-flow: row wrap;
- flex 布局中子元素常用属性如下:
- flex: 用来表示子元素分配剩余空间的份数,也可以是百分比
- align-self: 控制子项自己在侧轴上的排列方式,允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认为auto,表示继承父元素的align-items属性,如果没有父元素则等同于stretch
- order: 定义项目的排列顺序,数值越小,排列越靠前,默认为0,
less、rem、媒体查询布局
rem
- 可以让屏幕发声变化的时候元素高度和宽度等比例缩放,它是通过修改html里面的文字大小来改变页面中元素的大小
- rem (root em)是一个相对单位, 类似em,不同的是rem的基准是相对于html元素的字体大小, 比如根元素设置font-size=12px;非根元素设置width:2rem,则换成px表示就是24px;
媒体查询
- 媒体查询(Media Query)是CSS3新语法
- 使用@media查询,可以针对不同的媒体类型定义不同的样式
- @media可以针对不同的屏幕尺寸设置不同的样式
- 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
- 语法规范:
// 格式
@media mediatype and|not|only (media feature) {
...CSS code;
}
// 举例, 在我们屏幕上宽度小于等于800px时,设置背景色为pink
@media screen and (max-width:800px) {
body{
background-color: pink;
}
}
// 举例, 在我们屏幕上宽度小于等于500px时,设置背景色为purple
@media screen and (max-width:500px) {
body{
background-color: purple;
}
}
- 用@media开头
- mediatype媒体类型: 为all 时表示用于所有设备, print时表示用于打印机和打印预览,screen时表示用于电脑屏幕,平板电脑,智能手机等
- 关键字 and not only, and可以将多个媒体特性连接到一起,相当于且的意思, not排除某个媒体类型,相当于非得意思,可以省略,only指定某个特定的媒体类型,可以省略
- media feature媒体特性 必须有小括号包裹
| 值 | 说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
- 根据不同的屏幕宽度,引入不同的 css 资源,注意要从小往大的写,如下当屏幕宽度大于等于 640 的时候引入 style640.css,当屏幕宽度在 320 和 640 之间时,引入 style320.css
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
less
css 的缺点
- css 是一门非程序式语言,没有变量,函数,作用域等概念
- css 需要书写大量看似没有逻辑的代码,css 冗余度比较高
- 不方便维护及扩展,不利于复用
- css 没有很好的计算能力
less
- 全称 Leaner Style Sheets 的缩写,是一门 css 扩展语言,也称为 css 的预处理器,作为 css 的扩展,它在 css 的语法为 css 加入程序式语言特性,在 css 语法的基础上引入了变量,Mixin(混入),运算及函数等功能,大大简化了 css 的编写,降低了 css 的维护成本。(less 中文网)[http://lesscss.cn]
- less 文件后缀名为.less
- less 变量, 格式
@变量名:值, 规范如下:- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
@redColor: #ff0000; // 定义一个红色
@font14: 14px; // 定义一个 14px大小的字号
body{
background-color:@redColor; // 这里就可以使用@redColor 将背景设置为红色
font-size:@font14; // 将字体大小设置为 @font14
}
- less 编译
- less 文件不能被我们的 html 文件引用,html 文件只能引入 css 文件, 那么怎么才能使用 less 文件呢?
- vscode安装 Easy LESS 插件, 安装成功后,每次我们写/修改完 less 文键,只要 ctrl+s 保存,就会帮我们生成与 less 文件同名的.css 文件,这样我们就可以引入 css 文件使用了
- less 嵌套
- 内层选择器的前面没有&符号,则它被解析为父选择器的后代
- 如果有&符号,它就被解析为父元素自身或父元素的伪类
// less 嵌套写法
a{
&:hover{
color:red;
}
}
// 转成 css
a:hover{
color:red;
}
- less 运算
- less 中任何数字,颜色,或者变量都可以参与运算。less 提供了＋、-、*、/ 算术运算
- 对于两个不同单位值之间的运算,运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位,则运算结果就取该单位
- less 文件中使用
@import "xxx"导入文件
rem 适配方案
- 使用媒体查询根据不同设备按比例设置 html 的字体大小,然后页面元素使用 rem 做尺寸单位,当 html 字体大小变化时,元素尺寸也会发生变化,从而达到等比缩放的适配
rem + 媒体查询 + less 适配方案
混合布局
响应式页面兼容移动端中常见布局
- 响应式开发原理: 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的
| 设备划分 | 尺寸区间 | 宽度 |
|---|---|---|
| 超小屏幕(手机) | <768px | 设置宽度为 100% |
| 小屏设备(平板) | >=768px, <992px | 设置宽度为 750px |
| 中等屏幕(桌面显示器) | >=992px, <1200px | 设置宽度为 970px |
| 宽屏设备(大桌面显示器) | >=1200px | 设置宽度为 1170px |
- 媒体查询
bootstrap
-
bootstrap 是 Twitter 推出的最受欢迎的html、css、js框架, 用于开发响应式布局、移动设备优先的 WEB 项目。有如下优点:
- 标准化的 html+css 编码规范
- 提供一套简洁,直观,强悍的组件
- 有自己的生态圈,不断地更新迭代
- 让开发更简单,提高了开发的效率
-
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器,Bootstrap 预先定义好了这两个类
- container类: 响应式布局的容器,固定宽度, 大屏(>=1200px)宽度定为 1170px; 中屏(>=992px)宽度定为 970px;小屏(>=768px)宽度定为 750px; 超小屏宽度定为 100%
- container-fluid 类 :流式布局容器百分百宽度,占据全部视口(viewport)的容器,适合于单独做移动开发
Bootstrap提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列, Bootstrap里面 container 宽度是固定的,但是不同屏幕下,container 的宽度不同,我们再把 container 划分为 12 等份
vw和 vh
- vw/vh 是一个相对单位:
- vw 是 viewport width 视口宽度单位, 1vw = 1/100 视口宽度
- vh 是 viewport height 视口高度单位, 1vh = 1/100 视口高度
例如,当前屏幕视口是 375 像素,则 1vw 就是 3.75 像素,如果当前屏幕视口为 414,则 1vw 就是 4.14
- 它和百分比的的区别是,百分比是相对于父元素来说的,而 vw 和 vh 总是针对当前视口来说的
