HTML
1.如何理解HTML语义化
1.标签语义化让人更通俗易懂
2.让搜索引擎更容易读懂SEO
2.默认情况下 哪些标签是块级元素 哪些标签是内联元素
内联元素 display: inline/inline-block;有span img input button等
与块级元素 display: block; 有div h1 h2 table p 等
css
盒模型
offsetWidth=(内容宽度 + 内边距 + 边框),无外边距
正常盒模型 context-box：设置元素的 width 属性指的是content部分
怪异盒模型 border-box：设置元素的height/width属性指的是border + padding + content部分的高/宽
box-sizing: border-box; ie盒模型
box-sizing: content-box; 标准盒模型
BFC理解与应用
块级格式化上下文
一块独立渲染区域,内部元素渲染不会影响边界以外的元素
形成BFC条件的常见条件
float不是none
overflow 不是 visible;
position是absolute或fixed
disolay是flex inline-block
BFC应用
清除浮动 解决子元素的margin-top的问题
<div className='box bfc' > 让父元素触发BFC overflow:hidden...
<div className='a'>AAA</div>
<div className='b bfc'>BBB</div>让子元素触发BFC overflow:hidden...
</div>
.bfc{
overflow: hidden;
}
margin纵向重叠
相邻元素的margin-top/bottom: 30px; 会发生重叠
空内容也会被重叠
margin负值问题
margin-top/margin-left 负值 元素向上 向左移动
margin-right负值 将后续的元素向拉进来，覆盖自身的元素。
margin-bottom负值 将后续的元素向拉进来，覆盖自身的元素。
margin父子margin-top塌陷及解决办法
<div className='bfc'>
<div>son</div>
</div>
子的margin-top不能实现会塌陷
弥补办法 BFC
让父元素触发BFC overflow:hidden...
float
产生了BFC的元素以及文本类元素及文本都可以看到浮动元素 只有块级元素看不到浮动流 清除浮动流 最好添加div{clear:both;float:none}
圣杯布局和双飞翼布局技术总结
使用float布局
两侧使用margin负值,以便内容横向重叠
给中间内容腾位置 一个使用padding一个使用margin
圣杯布局
<div className='header'>头部</div>
<div className="box">
<div className="center">中间</div>
<div className="left" >左边</div>
<div className="right" >右边</div>
</div>
<div className="footer">底部</div>
body{
min-width: 550px;
}
.box {
padding-left: 200px;
padding-right: 150px;
>div{
float: left;
}
.center{
width: 100%;
background: yellowgreen;
}
.left{
width: 200px;
background: red;
margin-left: -100%;
position: relative;
right: 200px;
}
.right{
width:150px;
background: orange;
margin-right: -150px;
}
}
.footer{
clear: both;
}
双飞翼布局
<div className='header'>头部</div>
<div className="box item">
<div className="center">中间</div>
</div>
<div className="left item" >左边</div>
<div className="right item" >右边</div>
<div className="footer">底部</div>
body {
min-width: 500px;
}
.item{
float: left;
}
.box{
width: 100%;
.center{
margin-left: 200px;
margin-right: 150px;
background: green;
}
}
.left{
background: red;
width: 200px;
margin-left: -100%;
}
.right{
background: blue;
width: 150px;
margin-left: -150px;
}
.footer{
clear: both;
}
flex 画骰子
<div className='box'>
<div></div>
<div></div>
<div></div>
</div>
.box{
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
>div{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
div:nth-child(2){
align-self: center;
}
div:nth-child(3){
align-self:flex-end;
}
}
绝对定位
position: relative;自身定位
position: absolute;父元素拥有relative的定位
position: fixed;屏幕定位
垂直居中
inline元素text-align:center
block元素:margin:auto
absolute元素:left:50% + margin-left + 一半宽度负值
水平居中
inline元素line-height的值等于height
absolute元素:top:50% + margin-top + 一半高度负值
不知道宽高的情况下
absolute元素:transform: translate(-50%, -50%) ;top + left = 50%;
absolute元素left,right,top,bottom = 0 加 margin: auto;(兼容性最好 推荐)
CSS图文样式
.box{
line-height:200%;
font-size: 20px;
p{
font-size: 16px;
background: red;
}
}
子元素行高等于200%乘20
.box{
line-height:1.5;
font-size: 20px;
p{
font-size: 16px;
background: red;
}
}
子元素行高等于1.5乘16
求子元素行高
line-height:为百分比时 和自己的font-size计算值等于结果
line-height:为1.5或30px时 和子元素的font-size相乘
CSS响应式
rem是什么
rem 是一个长度单位
px绝对长度单位
em 相对长度单位,相对于父元素 不常用
rem相对长度单位,相对于根元素,常用于响应式布局(html)
html{
font-size: 100px;
p{
font-size: 0.16rem;
background: red;
}
.item{
font-size: 1rem;
margin: 0.12rem;
}
}
rem等于根元素100乘0.16
响应式布局的常用方案
1.media-query,根据不同屏幕宽度设置根元素font-size
rem,基于根元素的相对单位
@media only screen and(max-width :374px){
/*iphone5/或者更小的尺寸*/
html{font-size:86px};
}
@media only screen and(max-width :375px) and (max-width:413px){
/*iphone6/7/8*/
html{font-size:100px};
}
@media only screen and(max-width :414px){
/*iphone6p更大的尺寸*/
html{font-size:110px};
}
CSS响应式-vw/vh
rem的弊端
适合于跨度比较大的阶梯现象
网页视口尺寸
window.screen.height 全屏幕高度 手机尺寸
window.innerHight 页面视口高度 浏览器的窗口
document.body.clientHeight body内容-高度
vw/vh
vh 网页视口高度的1/100
vw 网页视口宽度的1/100
window.innerHight == 100vh
window.innerwidth == 100vw
vmax 取两者最大值;vmin取两者最小值
.box{
background: red;
height: 10vh;
width: 10vw;
}
给定一个pc端商品列表,除了3的倍数后都添加一个竖线
.block{
&:after{
content:''
whitn:1px;
height:20px;
}
&:nth-child(3n):after{
dispaly:none;
}
}
手写一个三角形
.triangle{
height: 0;
width: 0;
border-bottom: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;//透明值
}
对于 transform translate tarnsition的理解
tarnsform 转换
transform-origin: (x,y)对于缩放的参照点
transform : translate(x,y) 移动 单位px
transform : scale(0) 缩放 大于1放大,小于1缩小 无单位
transform : rotate() 顺时针旋转 单位deg
transition 过渡
transition:[属性名] [持续时间] [速度曲线] [延迟时间]
transition: <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
transtion:[]
场景1
transition: 5s 2s;[持续时间] [延迟时间]
场景2
transition:width 3s , heigth 2s;
场景3
transition:width 3s ease 1s,background:4s ease 2s;
各种样式
场景1 轮廓线
outline-style : dotted;
outline-color:red; //设置轮廓颜色之前 请先指定轮廓的style
场景2 文字阴影
text-shadow :5px 5px 1px red;
text-shadow :[x-shadow,y-shadow,blur,color] [x轴阴影的位置,y轴阴影的位置,模糊度,颜色]
场景3 文字缩进
text-indent:2em
场景4 文字装饰
text-decoration:underline 下划线 overline上划线 line-through 中划线
场景5 文字换行
word-wrap: break-wrap;
场景6 元素垂直排列
vertical-align:top bottom middle 相对于自身元素的 顶部 底部 中间
场景7 圆角边框
border-radius:5%;
场景8 手型
cursor: pointer;
场景9 计算宽度
width: calc(30% - 20px); 总宽度-20px之后占百分之30
场景10 负边距
两个相邻的div
margin-left/top : -20px 会把位置往左 / 上 移动20px
margin-right/bottom:-20px 会将后面的元素拉向自己,从而覆盖自己
场景11 图片环绕
1.shape-outside : inset(5px 10px 15px 20px round 50%) //上 右 下左 圆
2.shape-outside :padding-box; border-radius: 50%;
场景12 隐藏文本
1.font-size:0
2.text-indent:-2000px
场景13 文本的收缩
winth : min-content 将文本尽量收缩
winth :min-content 将文本尽量展开
样式优先级
1.内联样式
2.id样式
3.class
4.标签
5.伪类
6.通配符
!important 声明的样式优先级最高
背景图片
background-color 图片没覆盖地方的背景颜色
backgound-image:url('xx.png')
background-repeat 图片如何重复
background-repeat: repeat;重复/no-repeat;不重复
background-size 图片大小
background-size:cover 图片拉伸布满容器,可能图片会有部分无法展示;
background-size:contain 图片全部展示容器中,容器可能会有留白;
background-position 图片位置
background-position : center center;/top left;/20px 20px 距左边20px，距上边20px......
综合写法:background:red url(图片地址) no-repeat 20px 20px;
如何清除浮动
方法1;添加一个空div
div{
clear:both;
flaot:none /overflow:hidden;
}
方法2 给父div设置高度
方法3 给父div添加伪类
div:after{
clear:both;
display:block;
overflow:hidden;
}
css省略号
/* 显示一行，省略号 */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
/* 显示两行，省略号 */
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
