画一条 0.5px 的直线
.line {
height: 1px;
width: 200px;
background-color: red;
transform: scaleY(0.5);
transform-origin: 50% 100%;
}
盒模型的宽度如何计算?
盒模型是指网页元素的结构。当指定一个元素的宽高时,便设置了元素内容的尺寸——任何内边距(padding)、边框(border)、外边距(margin)都会基于他叠加,这是基础的盒模型,也就是 box-sizing: content-box
给元素设置 box-sizing: border-box
会改变盒模型,使其获得更好的可预测性。这时指定宽高会把 padding 包括进来。这也是 IE 默认的配置,IE8+ 支持使用box-sizing
进行切换
/* offsetWidth 的值是多少 */
#div {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
关于元素更多几何属性,可以参考 这个
margin 纵向重叠的问题
相邻元素的 margin-top 和 margin-bottom 会发生重叠,空白内容的 <p></p>
也会重叠
<style>
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
<!-- AAA 和 BBB 之间的距离是多少? 15 -->
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
margin 负值的问题
负值的 margin 在外界看来他的宽减少了 xxx 大小
- margin-top 和 margin-left 负值,元素向上向左移动
- margin-right 和 margin-bottom 负值,右侧/下方元素左移/上移,自身不受影响
- 都会影响文档流
BFC 的理解和应用
概念:块级格式化上下文(Block format context)。一块独立的渲染区域,内部元素的渲染有自己的一套规则,不会影响外部元素
形成条件:
- 非 visible 的 overflow
- 非 none 的 float
- display: inline-block、inline-flex、inline-grid、table-cell、table-caption、flex或grid
- position: absolute / fixed
float 布局的问题(圣杯、双飞翼)
<!-- 圣杯布局 padding + 定位 -->
<style>
* {
margin: 0;
}
.wrap {
padding: 0 200px;
overflow: hidden;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: #f00;
box-sizing: border-box;
}
.left {
float: left;
position: relative;
left: -200px;
width: 200px;
height: 200px;
background-color: #0f0;
margin-left: -100%;
}
.right {
float: left;
position: relative;
right: -200px;
width: 200px;
height: 200px;
background-color: #00f;
margin-left: -200px;
}
.others {
height: 100px;
background-color: #ccc;
}
</style>
<body>
<div class="others">
<h1>我是前面的元素</h1>
</div>
<div class="wrap">
<div class="center">中间中间中间中间中间中间中间</div>
<div class="left">左边左边左边左边左边左边左边</div>
<div class="right">右边右边右边右边右边右边右边</div>
</div>
<div class="others">
<h1>我是后面的元素</h1>
</div>
</body>
<!-- 双飞翼 子元素 + margin -->
<style>
* {
margin: 0;
}
.wrap {
overflow: hidden;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: #f00;
}
.child {
margin: 0 200px;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: #0f0;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: #00f;
margin-left: -200px;
}
.others {
height: 100px;
background-color: #ccc;
}
</style>
flex 画骰子
.one {
justify-content: center;
align-items: center;
}
.two {
justify-content: space-between;
align-items: center;
}
.three {
justify-content: space-between;
}
.three > .dot:nth-child(2) {
align-self: center;
}
.three > .dot:nth-child(3) {
align-self: flex-end;
}
.four {
display: flex;
justify-content: space-between;
}
.four .inner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 比四点多一个这个 */
.five.inner:nth-child(2) {
align-self: center;
}
.box6 {
display: flex;
justify-content: space-between;
}
.box6 .inner {
display: flex;
flex-direction: column;
justify-content: space-between;
}
居中对齐实现方式
文字水平 text-align(泰嗯赖),块级元素用 margin
垂直居中定位好,负 margin,transform 都别跑
还有 calc(凯Q)和 auto,高级用法不能少
伪元素表格也很巧,就是毛病有点遭
/* 文字居中对齐 */
text-align: center;
line-height: 50px;
height:50px;
/* 块元素居中 */
margin: auto;
/* 定位元素居中(width: 100px;height: 200px;) */
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -100px;
/* CSS3方法 - 定位元素居中(width: 100px;height: 200px;) */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
/* 定位元素居中(width: 100px;height: 200px;) */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* 伪元素 */
span {
vertical-align: middle;
}
.wrap::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* table-cell */
.wrap {
display: table;
}
span {
display: table-cell;
vertical-align: middle;
}
line-height 继承问题
- 如果是具体数值,如 30px,则继承该值
- 如果是比例,如 2 / 1.5,则继承该比例(先继承,再计算)
- 如果是百分比,如 200%,则继承计算出来的值(先计算,再继承)
rem 是什么?
相对长度单位,相对于根元素(<html></html>
),常用于响应式布局
如何实现响应式?
- media-query,根据不同的屏幕宽度设置根元素 font-size
- rem,基于根元素的相对单位
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸,以 iphone5 的宽度(320px)比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
html {
font-size: 10px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸,以 iphone6p 的宽度(414px)比例设置 font-size */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
网页视口尺寸:
- window.screen.height ==> 屏幕高度
- window.innerHeight ==> 网页视口高度(去掉上下状态栏)
vw/vh
以此为依据
- document.body.clientHeight ==> body 高度
背景图片居中
.screen {
background: url('path/to/image') no-repeat center
}
CSS 样式优先级
内联样式 1,0,0,0
ID 0,1,0,0
类、伪类、属性 0,0,1,0
标签、伪元素 0,0,0,1
外边距合并
原因:两个嵌套块级元素,父元素如果没有上补白和上边框,那么它的上边距会和它的文档流中的的第一个子元素的上边距重叠,取两者较大的值。
- 为父元素定义上边框 border: 1px solid transparent
- 为父元素添加内边距 padding: 1px
- *父元素添加 overflow: hidden
阴影
盒子阴影:
- h-shadow 水平阴影
- v-shadow 垂直阴影
- blur 模糊距离
- spread 尺寸
- color 颜色
- inset 是否内阴影
.box {
box-shadow: 10px 10px 10px 2px #ccc;
}
文字阴影:
- h-shadow
- v-shadow
- blur
- color
.textarea {
text-shadow: 10px 10px 10px #ccc;
}
行元素和块元素特点
行元素:
- 水平排列,超出部分换行
- 上下 margin 无效,设置宽高无效
- padding 不参与空间计算
- 设置行高有效,等同于给父元素设置
块元素
- 独占一行,宽度自动填满父元素
行内块元素
- 水平排列,排不下直接换行
- 宽度由内容撑开,元素之间有空白缝隙,设置上一级元素 font-size 为 0 能抵消
清除浮动
/* 清除浮动修改版,能包含所有的外边距 */
.clearfix::before,
.clearfix::after {
display: table;
content: " ";
}
.clearfix::after {
clear: both;
}
CSS属性书写顺序
- 布局定位:display / position / float / clear / visibility / overflow
- 盒子属性:width / height / margin / padding / border / background
- 文本属性:color / font / text-decoration / text-align / vertical-align / break-word
- 其他属性:content / cursor / border-radius / box-shadow / text-shadow
position 定位
- static,默认定位
- relative,相对于元素原先位置定位。标准流
- absolute,没祖先元素或祖先没定位,以Document为依据;有定位以其为参考点。脱标
- fixed,固定于浏览器可视区位置。脱标
- sticky,默认行为像 relative;当页面滚出目标区域时,行为像 fixed。标准流
定位特殊特性
- 行内元素添加绝对定位,可以设定宽高
- 块级元素添加绝对定位,宽高由内容撑开(类似inline-block)
- 绝对/固定定位(脱标的盒子)不会触发外边距合并
元素显示与隐藏
- display: none 隐藏元素且不占文档流
- visibility: hidden 隐藏元素,占用文档流
- opacity: 0 隐藏元素,占用文档流
- overflow: hidden/auto/scroll
如果有定位的盒子,请慎用overflow:hidden 因为它会隐藏多余的部分
display: none
(1)DOM 结构:浏览器不会渲染 display 属性为 none 的元素,不占据空间;
(2)事件监听:无法进行 DOM 事件监听;
(3)性能:动态改变此属性时会引起重排,性能较差;
(4)继承:不会被子元素继承,毕竟子类也不会被渲染;
(5)transition:transition 不支持 display。
visibility: hidden
(1)DOM 结构:元素被隐藏,但是会被渲染不会消失,占据空间;
(2)事件监听:无法进行 DOM 事件监听;
(3)性 能:动态改变此属性时会引起重绘,性能较高;
(4)继 承:会被子元素继承,子元素可以通过设置 visibility: visible; 来取消隐藏;
(5)transition:transition 支持 visibility。
opacity: 0
(1)DOM 结构:透明度为 100%,元素隐藏,占据空间;
(2)事件监听:可以进行 DOM 事件监听;
(3)性 能:提升为合成层,不会触发重绘,性能较高;
(4)继 承:会被子元素继承,且,子元素并不能通过 opacity: 1 来取消隐藏;
(5)transition:transition 支持 opacity。
CSS 画三角
<style>
.triangle {
width: 0;
border-width: 40px 20px;
border-style: solid;
border-color: transparent;
border-bottom-color: #00f;
border-right-color: #00f;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
}
</style>
<body>
<div class="triangle"></div>
</body>
溢出文本省略号显示
/* 单行文本 */
h1 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 多行文本 */
h1 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
CSS3新特性(IE9+)
选择器
- 属性选择器
^$*
- 伪类选择器 (一个是先看序号,一个是先看类型)
- nth-child(n) n可以是数字,关键字(even偶数,odd奇数)和公式(n+3, -n+3)
- nth-of-type(n)
- 伪元素选择器(和伪类一起的话先伪类再伪元素 .box:hover::before)
- ::before
- ::after
盒子模型(box-sizing)
- content-box 盒子大小为 width + padding + border
- border-box 盒子大小为 width
其他特性(了解)
- filter: func(arg)
- calc() 声明CSS属性值时执行一些计算
过渡
- transition: property time curve start
- property css属性
- time 花费时间(单位秒)
- curve 运动曲线
- start 延时
JavaScript 相关
选择器
document.querySelector()
存储
- localStorage(本地存储)
- sessionStorage(临时存储)
localStorage.setItem('name', 'thinc')
const name = localStorage.getItem('name')
localStorage.removeItem('name')
localStorage.clear()
SEO(前提条件)
- title标签
- description标签
- keywords标签
LOGO SEO优化
- logo里面放h1标签
- h1里放链接a
- 链接a里放文字,但文字不显示(text-indent: -9999px; overflow: hidden 或 font-size: 0)
- 给链接title属性
网络中使用最多的图片格式有哪些
JPEG、GIF、PNG,最流行的是 JPEG,可以把文件压缩到最小。
- jpeg 有损压缩
- png 支持透明效果
link 和 import 引入 CSS 区别?
- 用法:
link
是 HTML 提供的标签,不仅可以加载 CSS,还能定义 RSS、rel 等属性;@import
是 CSS 提供的语法规则,只能导入样式表。 - 加载顺序:
link
标签引入的 CSS 和页面同时加载;@import
引入的 CSS 会等到页面被全部下载完再被加载(所以网速慢的时候可能会出现闪烁)。 - 兼容性:
link
标签作为 HTML 元素,不存在兼容性问题;@import
是 CSS2.1 提出的语法,只有在 IE5+ 才能识别。 - DOM 可控:可以通过 JS 操作 DOM 插入 link 标签;而
@import
是一种语法,不能用 JS 操作插入。
实现一个遮罩层
注意两个地方:
- 遮罩元素应该放在 body 元素中的最后面,这样能保证无法操作被遮挡元素
- 对话框需要阻止冒泡,不应该去执行父元素的事件
<style>
* {
margin: 0;
padding: 0;
}
button {
cursor: pointer;
}
.mask {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.modal {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
width: 300px;
height: 300px;
background-color: #fff;
}
</style>
<body>
<button class="show-mask">显示遮罩层</button>
<div class="mask">
<div class="modal">
<h1>对话框</h1>
</div>
</div>
</body>
<script>
const btn = document.querySelectorAll('.show-mask')[0]
const mask = document.querySelectorAll('.mask')[0]
const modal = document.querySelectorAll('.modal')[0]
btn.addEventListener('click', () => {
mask.style.display = 'block'
})
mask.addEventListener('click', () => {
mask.style.display = 'none'
})
modal.addEventListener('click', (e) => {
e.stopPropagation()
})
</script>
flex
属性简写:flex-grow
、flex-shrink
、flex-basis
flex-grow: 规定该项在 flex 容器中分配剩余空间的相对比例
flex-shrink: 指定 flex 元素的收缩规则
flex-basis: 规定了元素的初始大小
重排和重绘
浏览器解析渲染机制:
- 解析 HTML,生成 DOM 树;
- 解析 CSS,生成 CSSOM 树;
- 将 DOM 树和 CSSOM 树结合,生成渲染树;
- (重排)根据生成的渲染树,计算元素的几何位置;
- (重绘)根据渲染树和得到的几何位置,计算元素的绝对像素;
- 将像素发给 GPU,展示在页面上
触发机制
- 重排:元素位置发生变动;计算浏览器窗口尺寸
- 重绘:颜色、阴影等的变化