一、基础
CSS 全称为 Cascading Style Sheets,层叠样式表。 网页实际上是一个多层的结构,通过 CSS 可以分别为网页的每一个层来设置样式,而最终我们能 看到只是网页的最上边一层
。 这些层中,最底下的一层称为文档流
,文档流是网页的基础,我们所创建的元素默认都是在文档流中进行排列。 对于我们来元素主要有两个状态:在文档流中的和不在文档流中的(脱离文档流)。
对比项 块级元素 行级元素 场景 主要对页面进行布局 主要用来包裹文字 空间 块元素会在页面中独占一行(自上向下垂直排列) 行内元素与其它行内元素共占一行(自左向右水平排列并会自动换行) 宽高 可控,默认铺满整行 不可控,只占自身的大小 默认宽度 父元素的全部(会把父元素撑满) 被内容撑开 默认高度 被内容撑开(子元素) 被内容撑开 互转 <p style="display:inline"></p>
<span style="display:block"></span>
1.1 引用
优先级:外部样式 < 内部样式 < 内联样式
< div> 行间样式测试</ div>
< div style = " color : olive; width : 100px; border : 1px solid blue; " > 行间样式测试</ div>
< head>
< style type = " text/css" >
p {
background-color : #eeeeee;
font-size : 18px;
font-style : italic;
}
</ style>
</ head>
< body>
< p> 内部样式测试</ p>
</ body>
< head>
< link rel = " stylesheet" type = " text/css" href = " style.css" >
</ head>
< body>
< span> 外部样式测试</ span>
</ body>
span {
font-size: 15px;
color: rgba(65, 206, 110, 0.79);
}
导入外部样式:先创建一个CSS文件,再在style标签中用import导入。
< head>
< style type = " text/css" >
@import "style.css"
</ style>
</ head>
< body>
< div> 导入外部样式测试</ div>
< span class = " box" > 导入外部样式测试</ span>
</ body>
.box {
font-weight: bold;
font-size: 16px;
}
对比项 外部样式 导入外部样式 加载范围 link是XHTML标签,除了加载CSS外,还可以定义RSS等其它事务 @import属于CSS范畴,只能加载CSS 加载时机 在页面载入时同时加载 页面完全载入以后加载 兼容问题 HTML标签,无兼容问题 @import是在CSS2.1提出的,低版本的浏览器不支持 JS交互 link支持使用Javascript控制DOM去改变样式 @import不支持
1.2 单位
单位 说明 像素 屏幕实际上是由一个一个的小点点(1px)构成,不同屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰。 百分比 相对于其父元素属性的百分比,设置百分比可以使子元素跟随父元素的改变而改变。 em 相对于元素的字体大小来计算的,1em = 1 font-size
,em会根据字体大小的改变而改变。 rem 相对于根元素的字体大小来计算的
单位 说明 RGB值 通过三种颜色的不同浓度来调配出不同的颜色,每一种颜色的范围在 0 - 255 (0% - 100%) 之间。 RGBA 就是在rgb的基础上增加了一个a表示不透明度,1表示完全不透明 0表示完全透明 .5半透明。 十六进制的RGB值 语法:#红绿蓝,颜色浓度通过 00-ff;如果颜色两位两位重复可以进行简写 #aabbcc --> #abc。 HSL值 & HSLA值 H 色相(0 - 360);S 饱和度,颜色的浓度 0% - 100%;L 亮度,颜色的亮度 0% - 100%;A 不透明度。
1.3 字体
列表中展示的属性值仅为举例,完整列表请参考 Zeal或 W3C。
属性 说明 设置 font-size 字号 10px
固定值尺寸像素、75%
基于包含块字号的百分比font-family 字体 "Segoe UI",Tahoma,sans-serif
从左到右依次匹配第一个浏览器支持的字体,否则使用默认font-style 样式 normal:正常、italic:斜体(特殊字体使用 oblique 元素强制使其倾斜) font-weight 加粗 lighter、normal、bold、bolder font-variant 变体 small-caps
字母大写但大小比常规的要小color 颜色 通过颜色单位指定
语法 font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;
实例 font: italic small-caps bolder 18px/1.5 宋体;
顺序不可颠倒,font-size和 font-family必填
当有特殊的字体效果渲染需求,浏览器已有字体不能满足时,可以自定义字体。 通过 font-face将服务器中的字体直接提供给用户去使用:
@font-face {
font-family : 'myfont' ;
src : url ( './font/ZCOOLKuaiLe-Regular.ttf' ) format ( "truetype" ) ;
}
定义后的字体可以直接通过 font-family进行引用:
p {
font-family : myfont, sans-serif;
}
1.4 文本
属性 说明 设置 line-height 行高 10px
固定值尺寸像素、1.5
字体大小的倍数text-decration 修饰 underline(下划线)、line-through(贯穿线)、overline(上划线) text-align 水平对齐 left、center、right、justify(两端对齐) vertical-align 垂直对齐 baseline(基线对齐)、top、bottom、middle text-tansform 转换 capitalize(单词首字母大写)、uppercase(全部大写)、lowercase(全部小写) text-indent 缩进 10px
首行缩进10个像素、2em
首行缩进2个字符text-shadow 阴影 2px 3px 5px #bfa
水平偏移距离 垂直偏移距离 [模糊距离] [颜色]word-wrap 换行 normal | breakword
单词不拆分直到下个换行、自动拆分换行
white-space: normal | nowarp | pre
设置网页如何处理空白:正常 | 不换行 | 保持原有格式(不处理换行和空格)
word-break 说明 normal 使用浏览器默认的换行规则 break-all 允许在单词内换行 keep-all 只能在半角空格或连字符处换行
< p class = " normal" > This is a veeeeeeeeeeeeeery long word.</ p>
< p class = " break" > This is a veeeeeeeeeeeeeery long word.</ p>
< p class = " keep" > This is a veeeeeeeeeeeeee-ry long word.</ p>
文本溢出:text-overflow: clip(修剪文本)| ellipsis(显示省略号来代表被修剪的文本)
< style>
p {
width : 200px;
border : 1px solid #bfa;
margin-left : 100px;
white-space : nowrap;
overflow : hidden;
}
.clip {
text-overflow : clip;
}
.ellipsis {
text-overflow : ellipsis;
}
</ style>
< p class = " clip" > 用于匹配父元素中兄弟子元素,可以用于子元素非连续的情况用于匹配父元素中兄弟子元素,可以用于子元素非连续的情况</ p>
< p class = " ellipsis" > 用于匹配父元素中兄弟子元素,可以用于子元素非连续的情况用于匹配父元素中兄弟子元素,可以用于子元素非连续的情况</ p>
1.5 背景
属性 说明 background-color 设置背景颜色 transparent/color background-image 设置背景图片 url(‘./img/some.png’) background-repeat 背景图像铺排方式 repeat(默认)/no-repeat/repeat-x/repeat-y
background-position
用来设置背景图片的位置
用两个表示方位的词 top | left | right | bottom | center 来设置背景图片的位置,如果只写一个则第二个默认是 center。 也通过偏移量来指定背景图片的位置:-50px 300px。
background-clip
用来规定背景(包含背景图像和背景色)的绘制区域,background-origin
设置背景图像的起始位置,这两个属性的取值相同;border-box
:background-clip 的默认值,用来指示背景会覆盖到边框下面;padding-box
:background-origin 的默认值,用来指示背景只会覆盖到内边距;content-box
:用来指示背景仅会覆盖到内容区;
background-size
设置背景图片的大小
可以 230px 1500px
特别指定宽高,也可以只指定一个则另一个会自动根据原图片比例进行调整; cover
:图片的比例不变,将元素铺满(图片可以能展示不全);contain
:图片比例不变,将图片在元素中完整显示(背景可能铺不满);
background-attachment
背景图片是否跟随元素移动
scroll
默认值,背景图片会跟随元素移动。fixed
背景会固定在页面中,不会随元素移动。
所有背景相关的样式都可以通过 background
来设置并且该样式没有顺序要求,也没有哪个属性是必须写的; background-size必须写在 background-position的后边,并且使用/隔开 background-position/background-size; background-origin、background-clip 两个样式 ,orgin 要在 clip的前边;
1.6 边框
属性 说明 border-radius 设置边框角的弧度,可以通过 border-top-left | top-rigth | bottom-left | bottom-right
-radius 分别设置 box-shadow 设置边框的阴影,水平偏移距离 垂直偏移距离 [模糊距离] [阴影的尺寸] [颜色]
举例 2px 2px 2px 1px rgba(0, 0, 0, 0.2)
border-image 设置边框的图片,图片 向内偏移距离 宽度 图像区域超出边框的距离 重复效果
1.7 渐变
通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果 渐变是图片,需要通过 background-image来设置 线性渐变颜色沿着一条直线发生变化,径向渐变则呈现放射性的效果
linear-gradient: [direction], color1 [positions], [position,] color2 [positions] (, ..., [position,] colorN [positions])
direction 可以通过 to top | right | bottom | left 或其组合的方式 to top left 来指定,也可以通过 45deg 角度或 .25turn 圈数来指定 position 指的是每种颜色发生渐变的范围:哪个位置开始渐变、哪个位置到达两种颜色渐变的中部、哪个位置结束渐变 background-image: linear-gradient(45deg, orange 0% 10%, 30%, #bfa 50% 60%, 75%, purple 90% 100%); 从左下角到右上角,0-10%保持 orange纯色,10%-50%发生 orange->#bfa渐变并在 30%处到达中值,接着 50%-60%保持 #bfa纯色,60%-90%发生 #bfa->purple渐变并在 75%处到达中值,最后 90%-100%保持 purple纯色 还可以通过 repeating-linear-gradient
设定重复排列的线性渐变
radial-gradient: [size] [at position,] color1 position1, color2 position2 [, ..., colorN positionN]
size 可以通过 circle | ellipse 形状或 closest-side | closest-corner | farthest-side | farthest-corner 渐变到边界来指定,也可以直接通过长度单位来指定 position 则是通过 to top | right | bottom | left 或其组合的方式 to top left 来指定 background-image: radial-gradient(200px 200px at top left, yellow , rgba(130, 165, 249, 0.497)); 从左上角的位置渐变出一个半径为 200px的圆 同样的,还可以通过 repeating-radial-gradient
设定重复排列的径向渐变
1.8 默认样式
浏览器都会为元素设置一些默认样式,其存在会影响到页面的布局,通常情况下需要清除或统一。
reset.css
直接去除了浏览器的默认样式normalize.css
对默认样式进行了统一
二、选择器
2.1 样式选择器
选择器 说明 * 用来匹配所有的标签 标签选择器 针对指定的标签 类选择器 用来选择class命名的标签 id选择器 用来选择用id命名的标签 派出选择器 根据上下文确定要选择的标签
< body>
< p> 全匹配:p标签</ p>
< strong> 全匹配:strong标签</ strong>
< span> 标签匹配:span标签</ span>
< div class = " wrapper" > 类匹配:div标签</ div>
< p id = " content" > id匹配:p标签</ p>
< ul>
< li> li01</ li>
< li> li01</ li>
</ ul>
< ul class = " list" >
< li> li02</ li>
< li> li02</ li>
</ ul>
</ body>
* {
color : red;
}
span {
display : block;
margin-right : 20px;
border : 1px solid gray;
}
.wrapper {
color : aqua;
}
#content {
color : pink;
}
.list li {
color : blue;
}
分组:让多个选择器(元素)具有相同的样式,一般用于设置公共样式。
< body>
< h1> h1</ h1>
< div class = " box" > class box</ div>
< p> p</ p>
</ body>
h1, .box, p {
color : red;
}
p {
width : 100px;
background-color : #999999;
}
< body>
< div class = " extend" > 这是一段< span> 继承测试</ span> </ div>
< div class = " override" > 这是一段< span> 覆写测试</ span> </ div>
</ body>
.extend {
font-size : 28px;
}
.extend span {
font-weight : bold;
}
.override {
color : red;
}
.override span {
color : blue;
}
样式 权重 !important 10000 内联样式 1000 id选择器 100 类、伪类选择器 10 标签选择器 1
< head>
< link rel = " stylesheet" type = " text/css" href = " style.css" >
< style type = " text/css" >
p {
color : blue;
}
strong {
color : blue!important ;
}
</ style>
</ head>
< body>
< strong style = " color : yellow; " > 1. !important > 内联样式</ strong>
< p style = " color : yellow; " > 2. 内联样式 > 内部样式</ p>
< p> 3. 内部样式 > 外部样式</ p>
< div id = " content" >
< div class = " main_content" >
< h2> 4. 复杂情况需依次累加计算权重</ h2>
</ div>
</ div>
</ body>
p {
color : red;
}
#content div.main_content h2 {
color : red;
}
#content .main_content h2 {
color : blue;
}
2.2 伪类选择器
伪类:专门用来表示元素的一种特殊状态
伪类选择器 说明 a:link 未访问状态 a:visited 已访问状态 a:hover 鼠标悬停状态 a:active 用户激活(单击) input:disabled 表单禁用时触发样式 input:enabled 表单启用时触发样式 input:checked 表单勾选时触发样式 input:focus 表单获得焦点时触发样式 :first-child 第一个子元素 :last-child 倒数第一个子元素 :nth-child(n) 正数第N个子元素 :nth-last-child(n) 倒数第N个子元素 :nth-child(2n) 偶数 :nth-of-type(n) 匹配父元素中兄弟子元素,可以用于子元素非连续的情况 :nth-last-of-type(n) 倒数 :only-child 父元素中仅有它一个子元素(不允许其它元素存在) :only-of-type 父元素中仅有它一个这样类型的子元素(不允许同类型元素出现) :empty 没有元素,包含文本元素,即查找空元素
< body>
< a href = " #" > 多变的伪类选择器</ a>
< input type = " text" >
< ul>
< li> aaa</ li>
< li> bbb</ li>
< li> ccc</ li>
</ ul>
</ body>
a:hover {
color : yellow;
}
input:focus {
outline : 1px solid #f00;
}
ul li:first-child {
color : red;
}
ul li:nth-child(2) {
color : green;
}
ul li:last-child {
color : blue;
}
2.3 属性选择器
写法 说明 属性名 包含有指定属性名的元素 属性名=值 属性名的值为指定值的元素 属性名~=值 属性名的值包含指定值的元素 属性名^=值 属性名以指定值开头的元素 属性名$=值 属性名以指定值结尾的元素
< body>
< div class = " content" title = " 内容" > content0</ div>
< div class = " content" > content1</ div>
< form>
< input type = " text" name = " account" >
< input type = " text" name = " usr" >
</ form>
< div class = " box public" > public</ div>
< div class = " box private" > private</ div>
</ body>
div.content[title] {
font-weight : bolder;
}
input[name=usr] {
background-color : #eee;
}
div[class~=public] {
font-size : 30px;
}
2.4 关系选择器
选择器 说明 空格 后代选择器 > 只选择儿子元素 + 只选择兄弟元素
< body>
< h1>
< strong> 关系1</ strong>
< span>
< strong> 关系2</ strong>
</ span>
</ h1>
< ul>
< li> aaa</ li>
< li> bbb</ li>
< li> ccc</ li>
</ ul>
</ body>
h1 strong {
color : red;
}
h1>strong {
background-color : black;
}
ul li+li {
list-style-type : none;
color : red;
}
2.5 伪元素选择器
css引入伪类和伪元素概念是为了 格式化文档树以外的信息
。 伪类用于当已有元素处于某个状态时,为其添加对应的样式 ,这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式,所以将其称为伪类。伪元素用于创建一些不在文档树中的元素,并为其添加样式 。比如说,我们可以通过 ::before 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不存在于文档树中。
伪元素和伪类都不会出现在源文档或文档树中; 伪类允许出现在选择器的任何位置,而一个伪元素只能跟在选择器的最后一个简单选择器后面; 伪元素名和伪类名都是大小写不敏感的 有些伪类是互斥的,而其它的可以同时用在一个元素上。(在规则冲突的情况下,常规层叠顺序决定结果)
伪元素 说明 ::before 在元素之前添加内容 ::after 在元素之前添加内容 ::first-letter 在元素第一个字母前添加内容 ::first-line 在元素第一行前添加内容 ::selection ::placeholder ::backdrop
< body>
< p> 伪类用于当已有元素处于某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态改变的。它只有处于dom树无法描述的状态时才能为元素添加样式,所以将其称为伪类。</ p>
</ body>
p::before {
content : "Today is a good day!"
}
p::first-letter {
font-size : 30px;
font-family : 黑体;
color : blue;
}
p::first-line {
text-decoration : underline;
}
p::after {
content : "....." ;
}
三、盒子模型
CSS 将页面中的所有元素都设置为了一个矩形的盒子,每个盒子由 margin
(外边距),border
(边框线),padding
(内边距)和 content
(内容)组成。 将元素设置为矩形的盒子后,对页面的布局就变成将不同的盒子摆放到不同的位置。
属性值 说明 none 不显示元素 block 块显示,在元素前后设置换行符,将行级标签转换为块级标签 inline 行显示,将块级标签转换为行级标签 inline-block 将块级或行级标签转换为行内块级标签
visibility 属性:用来设置元素的显示状态
属性值 说明 visible 默认值,元素在页面中正常显示 hidden 元素在页面中隐藏 不显示,但是依然占据页面的位置
box-shadow 属性:用来设置元素的阴影效果,阴影不会影响页面布局
属性值 说明 第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动 第二个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动 第三个值 阴影的模糊半径 第四个值 阴影的颜色
box-sizing 属性:设定盒子宽高属性生效的范围
div {
width : 100px;
height : 100px;
padding : 5px;
border : 7px solid #fff;
margin : 10px;
}
content-box(默认值):宽高 = 内容区的宽高 border-box:宽高 = 内容区 + 内边距 + 边框 的宽高
3.1 组成
内容区 :元素中的所有的子元素和文本内容都在内容区中排列,大小由 width 和 height 决定
.box1 {
width : 200px;
height : 200px;
background-color : #bfa;
}
常用的有三个属性 style|width|color
如 border: 10px red solid
; 可以通过如 border-color: red
分别指定,也可以通过 top|right|bottom|left
指定每边如 border-left: 10px red solid
,甚至可以通过如 border-left-width: 10px
精细到每边的每种属性; 还可以通过如 border-radius: length|%
为盒子设置圆角,更精细化的设置方式是 border-(top-left|top-right|bottom-right|bottom-left)-radius
; outline 用来设置元素的轮廓线,用法和border一模一样,轮廓和边框不同的点,就是轮廓不会影响到可见框的大小;盒子有四边和四角,书写样式时会触发简写模式,如 border-width: 10px 30px
表示上下边10px、左右边30px;
传值 边 角 四个值 (上、右、下、左) (左上、右上、右下、左下) 三个值 (上、左右、下) (左上、右上/左下、右下) 两个值 (上下、左右) (左上/右下、右上/左下) 一个值 (上下左右) (左上/右下/右上/左下)
一共有四个方向的内边距:padding-top|right|bottom|left
; 内边距的设置会影响到盒子的大小,背景颜色会延伸到内边距上; 盒子的可见框大小由内容区、内边距和边框共同决定 ;内边距的简写属性规则和 border-width 一样;
不会影响盒子可见框的大小,但是会影响盒子的位置和盒子的实际占用空间 共有四个方向的外边距(可以设置负值即往相反的方向移动):
方向 说明 margin-top 上外边距,设置一个正值,元素会向下移动 margin-right 默认情况下不会产生任何效果 margin-bottom 下外边距,设置一个正值,其下边的元素会向下移动 margin-left 左外边距,设置一个正值,元素会向右移动
元素在页面中是按照自左向右的顺序排列的,所以默认情况下如果我们设置的左和上外边距则会移动元素自身,而设置下和右外边距会移动其他元素; 简写方式和规则和 border-width 一样;
行内元素不支持设置宽度和高度 行内元素可以设置 padding,但是垂直方向 padding 不会影响页面的布局 行内元素可以设置 border,但是垂直方向 border 不会影响页面的布局 行内元素可以设置 margin,但是垂直方向 margin 不会影响页面的布局
.s1 {
background-color : yellow;
width : 100px;
height : 100px;
padding : 50px;
border : 20px solid red;
margin : 30px;
}
3.2 元素的布局
元素在父元素中水平方向的位置由 margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
共同决定且 和必须等于父元素内容区的宽度
。 当等式不成立时浏览器会根据设置的 auto 情况对 width | margin-left | maring-right
进行自动调整,这种行为称为 过渡约束
。
auto 场景 说明 无 auto 自动调整 margin-right 值以使等式满足 1 个 auto 自动调整为 auto 的那个值以使等式成立 width: auto 宽度会调整到最大,外边距都是 0 width: XXpx; margin: 0 auto 元素在其父元素中水平居中
父元素在没有设置高度时,默认情况下被内容撑开。 子元素是在父元素的内容区中排列的,如果子元素的大小超过了父元素,则子元素会从父元素中溢出。 使用 overflow 属性来设置父元素如何处理溢出的子元素:
属性值 说明 visible 默认值 子元素会从父元素中溢出,在父元素外部的位置显示 hidden 溢出内容将会被裁剪不会显示 scroll 生成两个滚动条,通过滚动条来查看完整的内容 auto 根据需要生成滚动条
3.3 垂直外边距的折叠
相邻的垂直方向外边距会发生折叠现象。
兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)。 如果相邻的外边距一正一负,则取两者的和;如果相邻的外边距都是负值,则取两者中绝对值较大的。 兄弟元素之间的外边距的重叠,对于开发是有利的,所以我们不需要进行处理。
父子元素间相邻外边距,子元素的会传递给父元素(上外边距
),这时外边距的折叠会影响到页面的布局,需要进行处理。 如想要通过设置外边距让子元素与父元素的下边框对齐,可以通过以下方式解决:
< style>
.outer {
width : 200px;
height : 200px;
background-color : #bfa;
}
.outer::before {
content : '' ;
display : table;
}
.inner {
width : 100px;
height : 100px;
background-color : orange;
margin-top : 100px;
}
</ style>
< div class = " outer" >
< div class = " inner" > </ div>
</ div>
未添加 ::before
父子同时下移 添加 ::before
来隔离父子元素以完成布局
四、浮动
4.1 简介
通过 float: none | left | right
属性可以使一个元素向其父元素的左侧或右侧移动。 元素设置浮动以后,会 完全从文档流中脱离 ,元素下边还在文档流中的元素会自动向上移动,水平布局的等式便不需要强制成立。 浮动的主要作用就是让页面中的元素可以水平排列,以制作一些水平方向的布局。
div {
font-size : 30px;
height : 100px;
width : 100px;
float : left;
}
.box1 { background-color : #fba; }
.box2 { background-color : aliceblue; }
.box3 { background-color : aquamarine; }
浮动元素会完全脱离文档流,但默认不会从父元素中移出。 浮动元素向左或向右移动时,不会超过它前边的其他浮动元素(依次排列)。 如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移。 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,可以利用浮动来设置 文字环绕图片
的效果。 无论块元素或行内元素设置浮动以后都会从文档流中脱离,默认被内容撑开不会独占一行。
4.2 布局
< header> </ header>
< main>
< nav> </ nav>
< article> </ article>
< aside> </ aside>
</ main>
< footer> </ footer>
header, main, footer {
width : 1000px;
margin : 0 auto;
}
header {
height : 150px;
background-color : silver;
}
main {
height : 500px;
margin : 10px auto;
}
nav, article, aside {
float : left;
height : 100%;
}
nav {
width : 200px;
background-color : yellow;
}
article {
width : 580px;
background-color : orange;
margin : 0 10px;
}
aside {
width : 200px;
background-color : pink;
}
footer {
height : 150px;
background-color : tomato;
}
4.3 高度塌陷
在浮动布局中,父元素的高度默认是被子元素撑开的。 当子元素浮动后,其会完全脱离文档流,将会无法撑起父元素的高度。 父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱。
< div class = " outer" >
< div class = " inner" > </ div>
</ div>
< div class = " box3" " > </ div>
.outer {
border : 10px red solid;
}
.inner {
width : 100px;
height : 100px;
background-color : #bfa;
float : left;
}
.box3 {
width : 200px;
height : 200px;
background-color : yellow;
}
方案一 :BFC(Block Formatting Context)块级格式化环境
CSS 中的隐含属性,开启后会为元素开辟 独立的布局区域
。 元素开启 BFC 后的特点:不会被浮动元素所覆盖、子元素和父元素外边距不会重叠、可以包含浮动的子元素 。 元素开启 BFC 的方式:
方式 说明 float: left;
设置元素的浮动(不推荐) display: inline-block;
将元素设置为行内块元素(不推荐) overflow: hidden;
将元素的overflow设置为一个非 visible 的值
.outer {
border : 10px red solid;
}
IFC的元素会在一行中从左至右排列,在一行上的所有元素会在该区域形成一个行框 行宽的高度为包含框的高度,高度为行框中最高元素的高度 浮动的元素不会在行框中,并且浮动元素会压缩行框的高度 行框的高度容纳不下子元素时,子元素会自动会换下一行显示,并且会产生新行框 行框的元素内遵循 text-align和 vertical-align
方案二 :clear: left | right | both
清除浮动元素对当前元素所产生的影响
.outer::after {
content : '' ;
display : block;
clear : both;
}
方案二(扩展) :clearfix 同时解决高度塌陷和外边距重叠的问题(CSS 权威指南中介绍到的方案)
.clearfix::before, .clearfix::after {
content : '' ;
display : table;
clear : both;
}
< div class = " outer clearfix" >
< div class = " inner" > </ div>
</ div>
< div class = " box3" " > </ div>
五、定位
定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置。 使用 position: static | relative | absolute | fixed | sticky;
属性来设置定位。 当元素开启了定位以后,可以通过偏移量属性 top | bottom | left | right
来设置元素的位置。
5.1 相对定位
元素开启相对定位以后,如果不设置偏移量元素不会发生任何的变化 相对定位是 参照于元素在文档流中的位置进行定位
的 相对定位会提升元素的层级 相对定位 不会使元素脱离文档流
相对定位不会改变元素的性质块还是块,行内还是行内
< div class = " box1" > 1</ div>
< div class = " box2" > 2</ div>
< div class = " box3" > 3</ div>
body {
font-size : 60px;
}
div {
width : 200px;
height : 200px;
}
.box1 {
background-color : #bfa;
}
.box2 {
background-color : orange;
position : relative;
left : 200px;
top : -200px;
}
.box3 {
background-color : yellow;
}
5.2 绝对定位
开启绝对定位后,如果不设置偏移量元素的位置不会发生变化 开启绝对定位后,元素会 从文档流中脱离 绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开 绝对定位会使元素提升一个层级 绝对定位元素是 相对于其包含块进行定位
的
正常情况下包含块就是离当前元素最近的祖先块元素 绝对定位的包含块就是 离它最近的开启了定位的
祖先元素 如果所有的祖先元素都没有开启定位则 html(根元素、初始包含块)就是它的包含块
< div class = " box1" > 1</ div>
< div class = " box3" >
3
< div class = " box2" > 2</ div>
</ div>
body {
font-size : 60px;
}
div {
width : 200px;
height : 200px;
}
.box1 {
background-color : #bfa;
}
.box2 {
background-color : orange;
position : absolute;
left : 200px;
top : 200px;
}
.box3 {
width : 400px;
height : 400px;
background-color : blanchedalmond;
position : relative;
}
5.3 固定定位
固定定位也是一种绝对定位,所以固定定位的大部分特点都和绝对定位一样 唯一不同的是固定定位永远 参照于浏览器的视口
进行定位 即:固定定位的元素不会随网页的滚动条滚动
< div class = " box1" > 1</ div>
< div class = " box2" > 2</ div>
< div class = " box3" > 3</ div>
body {
font-size : 60px;
height : 2000px;
}
div {
width : 200px;
height : 200px;
}
.box1 {
background-color : #bfa;
}
.box2 {
background-color : orange;
position : fixed;
top : 100px;
}
.box3 {
background-color : yellow;
}
5.4 粘滞定位
粘滞定位和相对定位的特点基本一致,不同的是粘滞定位可以在元素 到达某个位置时将其固定
IE 浏览器不支持,如需兼容请考虑其它方案
< div class = " box1" > 1</ div>
< div class = " box2" > 2</ div>
< div class = " box3" > 3</ div>
body {
font-size : 60px;
height : 2000px;
}
div {
width : 200px;
height : 200px;
}
.box1 {
background-color : #bfa;
}
.box2 {
background-color : orange;
position : sticky;
top : 100px;
}
.box3 {
background-color : yellow;
}
5.5 绝对定位元素的布局
当开启了绝对定位后,水平方向的布局等式就需要添加 left 和 right 两个值,即:left + margin-left/right + border-left/right + padding-left/right + width + right = 包含块的内容区的宽度
过渡约束:如果没有 auto 则自动调整 right 值以使等式满足(left 和 right的值默认是 auto),如果有auto,则自动调整auto的值以使等式满足 据此特征可以通过以下样式将元素在其包含块中水平居中:
.box {
margin : 0 auto;
left : 0;
right : 0;
}
垂直方向布局的等式的也必须要满足:top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
据此特征可以通过以下样式将元素放置在其包含块的正中:
.box {
margin : auto;
left : 0;
right : 0;
top : 0;
bottom : 0;
}
5.6 层级
对于开启了定位元素,可以通过 z-index 属性来指定元素的层级 z-index 需要一个整数作为参数,值越大元素的层级越高,元素的层级越高越优先显示 如果元素的层级一样,则优先显示靠下的元素 祖先的元素的层级再高也不会盖住后代元素
<div class="box1" >1</div>
<divclass="box2" >2</div>
<div class="box3" >3
<div class="box4" >4</div>
</div>
body {
font-size : 60px;
}
div {
width : 200px;
height : 200px;
position : absolute;
}
.box1 {
background-color : rgba ( 255 , 0, 0, .6) ;
z-index : 3;
}
.box2 {
background-color : #bfa;
top : 50px;
left : 50px;
}
.box3 {
background-color : yellow;
top : 100px;
left : 100px;
z-index : 999;
}
.box4 {
width : 100px;
height : 100px;
background-color : orange;
}
六、动态效果
6.1 过渡
通过过渡可以指定一个属性发生变化时的切换效果。
< style type = " text/css" >
.box1 {
height : 10px;
overflow : hidden;
transition : height 0.3s;
width : 100px;
background-color : #bfa;
margin : 100px auto;
}
.box1:hover {
height : 100px;
}
</ style>
< div class = " box1" >
</ div>
transition-property
:设置要执行过渡的属性
transition-property : height, width;
transition-property : all;
多个属性间使用 ','
隔开 如果所有/ 很多属性都需要过渡,可以直接使用 all关键字 过渡时必须是从一个有效数值向另外一个有效数值进行过渡,不能使用 auto
属性值 说明 ease 默认值,慢速开始,先加速,再减速 linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速 后减速 cubic-bezier() 来指定时序函数(参考:https://cubic-bezier.com) steps(num, end/start) 分步执行过渡效果,通过 end/start 指定在时间结束/开始时执行过渡
div {
height : 271px;
width : 132px;
margin : 200px auto;
background-image : url ( ./img/bigtap-mitu-queue-big.png) ;
background-position : 0 0;
transition : 0.3s steps ( 3) ;
}
div:hover {
background-position : -396px 0;
}
6.2 动画
过渡需要在某个属性发生变化时才会触发,动画可以自动触发动态效果。
引入:颜色的不断变化
.box1 {
height : 100px;
width : 100px;
border-radius : 50%;
margin : 100px auto;
animation : change-color 1s infinite alternate;
}
@keyframes change-color {
from {
background-color : red;
}
to {
background-color : yellow;
}
}
关键帧:动画效果必须指定一个关键帧,关键帧设置了动画执行每一个步骤
from 指定动画开始时元素的状态,等价于 0% to 指定动画结束时元素的状态,等价于 100% from和 to之间还可以引入多个 帧
,使用对应的百分比来表示
属性 说明 animation-name 要对当前元素生效的关键帧的名字 animation-duration 执行时间 animation-delay 延时 animation-timing-function 时序函数 animation-iteration-count: n/ infinite 执行的次数
animation-direction
:指定动画运行的方向
属性值 说明 normal 默认值 从 from 向 to 运行 每次都是这样 reverse 从 to 向 from 运行 每次都是这样 alternate 从 from 向 to 运行 重复执行动画时反向执行 alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行
属性值 说明 none 默认值 动画执行完毕元素回到原来位置 forwards 动画执行完毕元素会停止在动画结束的位置 backwards 动画延时等待时,元素就会处于开始位置(即直接将 from 设置的属性给到元素) both 结合了forwards 和 backwards
div {
width : 256px;
height : 256px;
margin : 200px auto;
background-image : url ( './img/bg2.png' ) ;
animation : run 0.5s steps ( 6) infinite;
}
@keyframes run {
from { background-position : 0 0; }
to { background-position : -1536px 0; }
}
6.3 变形
变形就是指通过 CSS来改变元素的形状或位置 变形不会影响到页面的布局 通过 transform: translateX(px/xx%) translateY() translateZ()
来设置元素的变形效果
div {
width : 200px;
height : 200px;
margin : 200px auto;
background-image : url ( './img/4.jpg' ) ;
transition : 0.3s;
}
div:hover {
transform : translateY ( -4px) ;
box-shadow : 0 0 10px rgba ( 0, 0, 0, .3) ;
}
div {
position : absolute;
left : 50%;
top : 50%;
transform : translateX ( -50%) translateY ( -50%) ;
}
调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近。 z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距。 通过 html { perspective: 800px; }
来设置视距,取值范围一般为 600 - 1200。
6.4 旋转
旋转可以使元素沿着 x y 或 z 旋转指定的角度。 通过 transform: rotateX(.25turn) rotateY(45deg) rotateZ(100px)
进行设置。 通过 backface-visibility: hidden
设置是否展示元素的背面。
制作时钟效果
< style>
.clock-wrapper {
height : 300px;
width : 300px;
margin : 100px auto;
border-radius : 50%;
position : relative;
background-image : url ( ./img/13/bg3.jpg) ;
background-size : cover;
}
.clock-wrapper>div {
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
margin : auto;
}
.hour-wrapper {
height : 60%;
width : 60%;
animation : clock 43200s linear infinite;
}
.hour {
height : 50%;
width : 6px;
margin : 0 auto;
background-color : black;
}
.minute-wrapper {
height : 70%;
width : 70%;
animation : clock 3600s steps ( 60, end) infinite;
}
.minute {
height : 50%;
width : 4px;
margin : 0 auto;
background-color : black;
}
.second-wrapper {
height : 90%;
width : 90%;
animation : clock 60s linear infinite;
}
.second {
height : 50%;
width : 3px;
margin : 0 auto;
background-color : black;
}
@keyframes clock {
from {
transform : rotateZ ( 0) ;
}
to {
transform : rotateZ ( 360deg) ;
}
}
</ style>
< div class = " clock-wrapper" >
< div class = " hour-wrapper" >
< div class = " hour" > </ div>
</ div>
< div class = " minute-wrapper" >
< div class = " minute" > </ div>
</ div>
< div class = " second-wrapper" >
< div class = " second" > </ div>
</ div>
</ div>
制作魔力方块
< style>
img {
vertical-align : top;
}
.cube {
width : 200px;
height : 200px;
margin : 200px auto;
transform-style : preserve-3d;
animation : rotate 15s linear infinite;
}
.cube > div {
opacity : .8;
position : absolute;
}
.box1 { transform : rotateY ( 90deg) translateZ ( 100px) ; }
.box2 { transform : rotateY ( -90deg) translateZ ( 100px) ; }
.box3 { transform : rotateX ( 90deg) translateZ ( 100px) ; }
.box4 { transform : rotateX ( -90deg) translateZ ( 100px) ; }
.box5 { transform : rotateY ( 180deg) translateZ ( 100px) ; }
.box6 { transform : rotateY ( 0deg) translateZ ( 100px) ; }
@keyframes rotate {
from {
transform : rotateX ( 0) rotateZ ( 0) ;
}
to {
transform : rotateX ( 1turn) rotateZ ( 1turn) ;
}
}
</ style>
< div class = " cube" >
< div class = " box1" > < img src = " ./img/14/1.jpg" > </ div>
< div class = " box2" > < img src = " ./img/14/2.jpg" > </ div>
< div class = " box3" > < img src = " ./img/14/3.jpg" > </ div>
< div class = " box4" > < img src = " ./img/14/4.jpg" > </ div>
< div class = " box5" > < img src = " ./img/14/5.jpg" > </ div>
< div class = " box6" > < img src = " ./img/14/6.jpg" > </ div>
</ div>
6.5 缩放
即字面的含义,将元素进行放大和缩小。 通过 transform: scale()/ scaleX() scaleY()
进行设置。 通过 transform-origin: center;
来设置缩放的源点。
< style>
.img-wrapper {
width : 200px;
height : 200px;
margin : 100px auto;
border : 1px black solid;
overflow : hidden;
}
img {
width : 100%;
transition : .2s;
}
.img-wrapper:hover img {
transform : scale ( 1.2) ;
}
</ style>
< div class = " img-wrapper" >
< img src = " an.jpg" >
</ div>
七、弹性布局
Flex 是 Flexible Box 的缩写,意为“弹性布局”或者“弹性盒子”,是 CSS3 中的一种新的布局模式,可以简便、完整、响应式地实现各种页面布局,当页面需要适应不同的屏幕大小以及设备类型时非常适用。
7.1 简介
采用 Flex 布局的元素,称为 Flex 容器(flex container),即弹性容器。它的所有子元素自动成为容器成员,称为 Flex 元素(flex item),即弹性元素。 容器默认存在两根轴,弹性元素的排列方向称为主轴(main axis)、主轴的垂直方向称为侧轴/交叉轴(cross axis)。 主轴的开始位置叫做 main start,结束位置叫做 main end;侧轴的开始位置叫做 cross start,结束位置叫做 cross end。 单个元素占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
通过 float: left
进行布局 通过 display: flex
进行布局
< style>
* {
margin : 0;
padding : 0;
list-style : none;
}
ul {
width : 800px;
border : 10px red solid;
margin : 100px auto;
display : flex;
}
li {
width : 200px;
line-height : 100px;
font-size : 50px;
text-align : center;
}
li:nth-child(1) {
background-color : #bfa;
}
li:nth-child(2) {
background-color : pink;
}
li:nth-child(3) {
background-color : orange;
}
</ style>
< ul>
< li> 1</ li>
< li> 2</ li>
< li> 3</ li>
</ ul>
弹性容器:flex-direction
、flex-wrap
、flex-flow
、justify-content
、align-items
、align-content
弹性元素:order
、align-self
、flex
、flex-grow
、flex-shrink
、flex-basis
属性 描述 display 指定 HTML 元素的盒子类型 flex-direction 指定弹性盒子中子元素的排列方式 flex-wrap 设置当弹性盒子的子元素超出父容器时是否换行 flex-flow flex-direction 和 flex-wrap 两个属性的简写 justify-content 设置弹性盒子中元素在主轴(横轴)方向上的对齐方式 align-items 设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式 align-content 修改 flex-wrap 属性的行为,类似 align-items,但不是设置子元素对齐,而是设置行对齐 order 设置弹性盒子中子元素的排列顺序 align-self 在弹性盒子的子元素上使用,用来覆盖容器的 align-items 属性 flex 设置弹性盒子中子元素如何分配空间 flex-grow 设置弹性盒子的扩展比率 flex-shrink 设置弹性盒子的收缩比率 flex-basis 设置弹性盒子伸缩基准值
7.2 容器属性
flex-direction :用来决定主轴的方向(即元素的排列方向)
值 描述 row 默认值
,主轴沿水平方向从左到右row-reverse 主轴沿水平方向从右到左 column 主轴沿垂直方向从上到下 column-reverse 主轴沿垂直方向从下到上
flex-wrap :用来设置当弹性盒子的子元素超出父容器时是否换行
值 描述 nowrap 默认值
,表示元素不会换行wrap 表示元素会在需要时换行 wrap-reverse 表示元素会在需要时换行,但会以相反的顺序
justify-content :用于设置弹性盒子中元素在主轴(横轴)方向上的对齐方式
值 描述 flex-start 默认值
,左对齐flex-end 右对齐 center 居中 space-between 两端对齐,项目之间的间隔是相等的 space-around 每个项目两侧的间隔相等
align-items :用来设置弹性盒子中元素在侧轴方向上的对齐方式
值 描述 stretch 默认值
,项目将被拉伸以适合容器center 项目位于容器的中央 flex-start 项目位于容器的顶部 flex-end 项目位于容器的底部 baseline 项目与容器的基线对齐
align-content :与 justify-content
属性类似,可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式
值 描述 stretch 默认值
,将项目拉伸以占据剩余空间center 项目在容器内居中排布 flex-start 项目在容器的顶部排列 flex-end 项目在容器的底部排列 space-between 多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部 space-around 多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等
7.3 元素属性
order :通过 order: number
设置元素在容器中出现的顺序
.flex div:nth-child(1) {
order : 5;
}
.flex div:nth-child(2) {
order : 3;
}
.flex div:nth-child(3) {
order : 1;
}
.flex div:nth-child(4) {
order : 2;
}
.flex div:nth-child(5) {
order : 4;
}
align-self :单独设置自身的对齐方式,用于覆盖 align-items
属性
值 描述 stretch 默认值
,项目将被拉伸以适合容器center 项目位于容器的中央 flex-start 项目位于容器的顶部 flex-end 项目位于容器的底部 baseline 项目与容器的基线对齐
使用场景 - 当父元素有多余的空间时,子元素如何伸展,默认为 0
不伸展 当属性值设置为一个具体的长度时,子元素会按照比例进行分配
使用场景:当父元素中的空间不足以容纳所有的元素时,子元素如何收缩,默认为 1
等比例收缩
如果主轴是 横向的
,则该值指定的就是元素的 宽度
如果主轴是 纵向的
,则该值指定的是就是元素的 高度
如果传递了一个具体的数值,则以该值为准 默认值是 auto,表示参考元素自身的高度或宽度
flex:flex: flex-grow flex-shrink flex-basis;
三个属性的简写
initial == 0 1 auto auto == 1 1 auto none == 0 0 auto 弹性元素没有弹性
八、移动端
8.1 视口
屏幕是由一个一个发光的小点构成,这一个个的小点就是 像素
;分辨率 1920 x 1080 说的就是屏幕中小点的数量。 像素分为 CSS像素
和 物理像素
:上述所说的小点点就属于物理像素,而编写网页时所用像素是CSS像素。 浏览器在显示网页时,需要将CSS像素转换为物理像素然后再呈现。 一个CSS像素最终由几个物理像素显示,由浏览器决定:默认情况下在PC端,一个CSS像素 = 一个物理像素。
视口就是屏幕中用来显示网页的区域,可以通过查看视口的大小,来观察CSS像素和物理像素的比值。 PC端默认情况下CSS像素和物理像素的比是 1:1,即如果屏幕分辨率 1920 x 1080,那么视口宽度也为 1920px(CSS像素)。 可以通过改变视口的大小,来改变CSS像素和物理像素的比值。
智能手机的像素点远远小于计算机的像素点,如24寸的电脑显示器像素为 1920 x 1080px,而4.7寸的手机就可达到 750 x 1334px。 为了显示完整、移动端会自动对网页进行缩放,如网页的宽度为 1260px,在 750px的移动端则会缩放 1260/750 倍,也可以说这时的 750/1260 个CSS像素才对应 1个物理像素。 移动端本身像素高,却为了适配 PC而用多个 CSS像素对应 1个物理像素
;所以基本大部分的pc端网站都可以在移动端中正常浏览,但是往往都不会有一个好的体验。为了解决这个问题,大部分网站都会 专门为移动端设计网页 。
由于不同设备视口和像素比不同,所以在移动端开发时,就不能再使用px来进行布局了。 vw 表示的是视口的宽度,100vw = 一个视口的宽度 ,假设设计图的宽度为 750px,那么如何构造一个 45 * 60px 的盒子呢? 一般通过 less 将 html 的 font-size 设置为大于 12px(浏览器限制)的一个值,如 html { font-size: 100vw/750 * 40; }
,即先把 100vw分给 750像素再取 40份作为字体大小,这时 1rem 就相当于设计图的 40px。 构造盒子时,只需要通过 less 进行运算 width: 45/40rem;
即可得出宽度为 45px 的盒子。 这样,在任何移动端展示出来的页面效果/ 比例都是相同的。
可以通过 meta标签
来设置视口大小,如 <meta name="viewport" content="width=375px">
即将视口设置 375px,这时 1 CSS像素对应两个物理像素。 每一款移动设备设计时,都会有一个最佳的像素比。 <meta name="viewport" content="width=device-width, initial-scale=1.0">
即是将网页的视口设置为完美视口。
8.2 媒体查询
为了在移动端获得良好的网页阅读效果,除了可以通过 VW适配来专门为移动端设计网页外,还可以通过媒体查询来进行响应式布局。
类型 说明 all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器
可以使用 ,
连接多个媒体类型,这样它们之间就是一个或的关系 可以在媒体类型前添加一个only,表示只有
特性 说明 width 视口的宽度 height 视口的高度 min-width 视口的最小宽度(视口大于指定宽度时生效) max-width 视口的最大宽度(视口小于指定宽度时生效)
断点 说明 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px
@media only screen and ( max-width : 768px) {
body {
background-color : #bfa;
}
}
@media only screen and ( min-width : 768px) and ( max-width : 992px) {
body {
background-color : #ffa;
}
}
@media only screen and ( min-width : 992px) and ( max-width : 1200px) {
body {
background-color : #bff;
}
}
@media only screen and ( min-width : 1200px) {
body {
background-color : #bba;
}
}
8.3 响应式布局
网页可以根据不通的设备或窗口大小呈现出不同的效果 使用响应式布局,可以 使一个网页适用于所有设备 响应布局的关键就是 媒体查询
通过媒体查询,可以为不通的设备,或设备不同状态来分别设置样式