前端基础-真基础（下）

Hyram_皓
144 阅读4分钟

布局方式

  • 有内宽的
  • 左边固定，右边自适应
    • 左边加float:left;给右边设置margin-left，右边不能设置宽度
    • 左边加float:left;给右边设置overflow:hidden，右边不能设置宽度【BFC】
    • 给左边和右边设置浮动，给右边设置宽度
    • 定位

rem布局

rem是一个单位，根据页面跟元素字体的大小来实现等比例缩放

flex布局

容器:设置display：flex的元素

项目：容器里面的子元素

flex布局也叫弹性布局/弹性盒子

设置flex之后子元素浮动不生效

flex默认存在两条轴：主，交叉

容器属性

  • 项目排列方式:flex-direction

    • row 左→右
    • row-reverse 右→左
    • column 上→下
    • column-reverse 下→上

  • 项目包裹方式：flex-wrap

    • wrap 换行
    • nowrap 布换行
    • wrap-reverse 反向换行

  • 项目水平对齐方式：justify-content

    • flex-start 主轴开始的位置、左对齐
    • flex-end 主轴结束的位置对齐/右对齐
    • center 居中对齐
    • space-between 两端对齐
    • space-around 两端间隔相等

  • 项目垂直对齐方式：align-items：

    • flex-start 交叉开始的位置、左对齐

    • flex-end 交叉结束的位置对齐/右对齐

    • center 居中对齐

颜色表达方式

1、英文单词
2、16进制： #ff6600
3、rgb(255,255,255)
4、rgba()
5、hsl()
6、hsla()
7、transparent 透明

透明度表示方式

rgba()
hsla
transparent
opacity

图片精灵

图片精灵技术，雪碧图，css sprites

原理：将很多小图放在一张大图里，采用背景图定位方式

目的为了减少http请求次数

属性描述
background-color背景颜色
background-image:url("图片路径")背景图片
background-position：距离左边 距离上边背景定位
background-size:宽 高背景大小
background-repeat：no-repeat/repeat-x/repeat-y背景重复：不重复/x轴重复/y轴重复

水平垂直居中

  • 定位

    postion:absolute;
top:50%;
left:50%;
margin-top:元素一半
margin-left：元素一半

  • 定位

    postion:absolute;
top:50%;
left:50%;
transform:traslate(-50%,-50%)

  • 定位

    postion:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin；auto

  • flex

    display:flex;
justify-content:center;
align-item:center;

css3

  • 圆角

    border-top-left-radius:20px;左上角
border-bottom-left-radius:20px;右下角

简写：
border-radius:20px;上下圆角
border-radius:50%;圆

  • 阴影

    盒子阴影：
box-shadow：水平位移 垂直位移 模糊半径 阴影颜色；
box-shadow：0px 0px 10px #000

文本阴影；
text-shadow：水平位移 垂直位移 模糊半径 阴影颜色；
text-shadow：0px 0px 10px #000

  • 渐变

    线性渐变：
background: linear-gradient(red,yellow);
background: linear-gradient(to right, red,yellow); 
background: linear-gradient(45deg, red,yellow);
background: linear-gradient(to right, red,yellow 80%, blue);
径向渐变：
background: radial-gradient(red,yellow);
background: radial-gradient(red,yellow 80%,blue);
椭圆轨道：
background: radial-gradient(ellipse,red,yellow);

  • 过渡

    transtion:过渡的属性 过渡时间 过渡速度曲线 过渡延迟时间
transtion-property:过渡的属性 
transtion-duration:过渡时间 
transtion-delay:过渡延迟时间
用法：
transtion:width 2s；
transtion:all 2s linear;
transtion:all 2s ease 2s;

  • 动画

     定义动画：
	@keyframes 动画名称{
        0%{} -也可以是from
		100%-也可以是to
					}

animation: name duration timing-function delay 	iteration-count   direction fill-mode;
			名称	时长		动画速度曲线		延迟时间	播放次数		  动画下一周期播放方向

动画播放次数：infinite 无数次
下一周期播放方向：alternate 逆向播放
animation-name
animation-duration: 
animation-timing-function: 
animation-delay: 
animation-iteration-count: 
animation-direction fill-mode: 
anmation-play-state

浏览器工作原理

浏览器内核分为：渲染引擎和JavaScript引擎

  • ie Trident
  • 火狐 Gecko
  • safari webkit
  • 谷歌浏览器 Blink

由于浏览器内核不同导致css3属性存在兼容性，有必要添加前缀

  • ie Trident：-ms-
  • 火狐 Gecko：-moz-
  • safari webkit： -webkit-

网页优化

  • 减少http请求次数
    • 合并文件
    • 合并图标
      • 图片精灵技术
      • iconfont
      • Base64（建议小图）
  • 减少页面内容

    • 压缩css

    • 压缩图片

      • 智图

      • 熊猫压缩

      • 减少标签嵌套

seo

  • 站外seo

  • 站内seo

    • 设置标题

    • 设置关键字

    • 设置描述

    • 合理使用标题标签，em，strong

    • 尽量使用语义化标签（html5）

    • img设置alt属性

    • 减少dom嵌套层级

avatar
文章
阅读
粉丝