1.css3的新特性有哪些

(1)CSS3选择器(基本、属性、伪类具体见下)
(2)CSS3边框与圆角

     圆角border-radius
属性:border-top-left-radius 左上角 border-top-right-radius
右上角 border-bottom-right-radius 右下角 border-bottom-left-radius 左下角

(3)CSS3背景与渐变

 可以设置多个背景图片,图片大小,位置

线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction也可以换成edge
径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);

(4)CSS3过渡


(5)CSS3变换
2D变换

3D变换
兼容性了解一下


(6)CSS3动画
在style中给动画一个名字,就是规定动画,使用@keyframes

这篇文章写的比较有条理,看完可以知道大概,但是每个特性具体如何使用,还需要再找资料深入的看

2.垂直居中

  1. margin:auto的垂直居中,需配合position:absolute一起使用,因为margin:auto不识别上下,只识别左右
  2. translate的垂直居中移动-50%,也需要position定位,因为要根据坐标

这篇文章总结的很好,没错没错,就是我写的啦o(////▽////)q,凑表要脸

3.flex

一方面是在父容器的几个属性,另一些就是子元素的属性
容器:

    flex-direction                 子元素排列方向
flex-wrap 如果一条轴线排不下,如何换行
flex-flow flex-direction属性和flex-wrap属性的简写形式
justify-content 在主轴上的对齐方式
align-items 在交叉轴上如何对齐
align-content 多根轴线的对齐方式

设置在具体的每一项上:

    order             排列顺序。数值越小,排列越靠前,默认为0
flex-grow 项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink 缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis 在分配多余空间之前,项目占据的主轴空间(main size)
flex flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto
align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

菜鸟教程上的就写很好,简单易懂
这篇讲的很全,包括实际例子,还包括布局

4.如何理解css预处理,less,sass 到底有什么好处,或者是优于css的一些特点。

预处理器:在写css的时候,为了兼容各种浏览器,我们往往需要写很多代码,css预处理器就是为了解决这一问题的,最常用的预处理器有sass、less和styuls

CSS有具体以下几个缺点:

  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了我们的开发效率。

但是,CSS预处理器也不是万金油,CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入,让我们开发工作流中多了一个环节,调试也变得更麻烦了。更大的问题在于,预编译很容易造成后代选择器的滥用。所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,CSS预处理器有没有解决更大的麻烦。

Sass

  • 变量。通过 $ 符号来定义,通过变量名称实现多处重复引用。
  • 嵌套。支持选择器及属性嵌套,但如果想要在嵌套的选择器里边应用一个类似于:hover的伪类,就需要用到 & 这个连接父选择器的标识符。
  • 代码重用之继承。使用选择器的继承,要使用关键词@extend,后面紧跟需要继承的选择器。
  • 代码重用之Mixin混合器。使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include+minxin名称来调用。如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...。小栗子,带参数的:
@mixin left($value: 10px) {
float: left;
margin-left: $value;
}
div {
@include left(66px);
}
  • 颜色函数。lighten darken
  • @import引入。Sass中的@import会在生成CSS文件时就把引入的所有文件先导入进来,也就是所有相关的样式会被编译到同一个CSS文件中,无需发起额外的请求。

less和sass的区别,less简单,sass强大
less和sass也经常会问到
sass的使用方法

5.css3选择器

基本选择器

空格(后代选择器,可以是爷孙)/>(子元素选择器)/+(手拉手,相邻兄弟选择器)/~(通用兄弟选择器)/,(群组选择器) 

属性选择器
伪类选择器

动态伪类::hover”,":active"和":focus"

:first-child选择某个元素的第一个子元素;
:last-child选择某个元素的最后一个子元素;
:nth-child()选择某个元素的一个或多个特定的子元素;
:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
:nth-of-type()选择指定的元素;
:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
:first-of-type选择一个上级元素下的第一个同类子元素;
:last-of-type选择一个上级元素的最后一个同类子元素;
:only-child选择的元素是它的父元素的唯一一个了元素;
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty选择的元素里面没有任何内容。 否定:not
伪元素:
::first-line,:first-letter,:before,:after;

6.DOM

7.盒模型

content-box和border-box:content-box(w3c)的width和height不包含border和padding,padding不是marginborder-box包含(ie)。默认是content-box

box-sizing 来自mdn
边距重叠

在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

8.行元素和块元素的区别

行元素:a、span、strong、input 、label
块元素:div、p、h1到h6,table、td、tr、ul、li

行元素和块元素有哪些

display:inline-block展示为块级元素但又不独占一行

行元素的特点:(img和input可以设置宽高)

设置宽度width   无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。

为何img,input内联元素可以设置宽和高?
img和input属于行内替换元素
如果上一篇没看懂,来看这一篇

9.自适应和媒体查询

  1. 页面中的宽度都用百分比来做
  2. 页面所有的尺寸用rem单位来设置

实现自适应的其他方法 百分比 rem
@media如何使用
其中2倍那个没有看懂

10.常见的浏览器兼容性问题

常见的浏览器及内核:

  1. IE浏览器内核:Trident内核,也是俗称的IE内核;
  2. Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
  3. Firefox浏览器内核:Gecko内核,俗称Firefox内核;
  4. Safari浏览器内核:Webkit内核;
  5. Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
  6. 360浏览器、猎豹浏览器内核:IE+Chrome双内核;
  7. 搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);

浏览器css前缀:

  1. -o-transform:rotate(7deg); // Opera
  2. -ms-transform:rotate(7deg); // IE
  3. -moz-transform:rotate(7deg); // Firefox
  4. -webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句
css的兼容性:
js的(常用):

  1. 标准的addEventListener,而IE使用的是attachEvent
  2. 获得DOM节点的方法有所差异,其获得子节点方法不一致。IE:parentElementparentElement.children
    Firefox:parentNode parentNode.childNodes
    childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

点我

这个兼容性问题真的是难受,难道我要一个一个记?一万年记不住系列
常用的手机端的兼容性 这个要记住 虽然我现在还记不住

前端基础之CSS(1)的更多相关文章

  1. 前端基础:CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  2. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  3. 02 前端基础之CSS

    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...

  4. Web前端基础(4):CSS(一)

    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  5. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

    品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...

  6. 前端基础之css样式(选择器)

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  7. 前端基础之---css

    css  介绍 css 规则有两个主要的部分构成 : 选择器  , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...

  8. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

  9. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02

    HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...

  10. 前端基础系列——CSS规范(文章内容为转载)

    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...

随机推荐

  1. MailKit和MimeKit 收发邮件

    新建项目,引用MailKit和MimeKit NuGet包 using CommonTool.MailKit; using System; using System.Collections.Gener ...

  2. JZ-017-树的子结构

    树的子结构 题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 题目链接: 树的子结构 代码 /** * 标题:树的子结构 * 题目描述 * 输入两棵 ...

  3. VirtualBox 桥接模式

    网桥网络配置 以下内容来自:http://www.jianshu.com/p/a4dbdb40b72b 特点 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间可以ping通 3.虚拟机可以ping ...

  4. Docker - 安装&测试

    一.什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中 ...

  5. cobbler check执行报错

    httpd does not appear to be running and proxying cobbler, or SELinux is in the way. 当执行cobbler check ...

  6. 『德不孤』Pytest框架 — 13、Pytest中Fixture装饰器(三)

    目录 9.ids参数说明 10.name参数说明 11.scope参数说明 (1)scope="function" (2)scope="class" (3)sc ...

  7. 云e办笔记(删减)

    1JwtTokenUtils工具 2公共返回对象 3Admin实现UserDetails 4AdminLoginParam 5AdminLoginController 6SecurityConfig ...

  8. git常用命令及问题

    Git基本操作 git init 创建新的git仓库 git clone [url] 使用 git clone 拷贝一个 Git 仓库到本地 git status 查看工作区 git stash li ...

  9. PhpStrom 常用的插件

    .env files support 可以在env函数使用是提示.env文件中所有的key值的自动完成功能 Markdown support 在编写.md文件时有预览的功能 PHP composer. ...

  10. VuePress 博客优化之增加 Vssue 评论功能

    前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...