前端基础之CSS(1)
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.垂直居中
- margin:auto的垂直居中,需配合position:absolute一起使用,因为margin:auto不识别上下,只识别左右
- 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
在网页的顶部加上 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.自适应和媒体查询
- 页面中的宽度都用百分比来做
- 页面所有的尺寸用rem单位来设置
实现自适应的其他方法 百分比 rem
@media如何使用
其中2倍那个没有看懂
10.常见的浏览器兼容性问题
常见的浏览器及内核:
- IE浏览器内核:Trident内核,也是俗称的IE内核;
- Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核;
- Firefox浏览器内核:Gecko内核,俗称Firefox内核;
- Safari浏览器内核:Webkit内核;
- Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核;
- 360浏览器、猎豹浏览器内核:IE+Chrome双内核;
- 搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式);
浏览器css前缀:
- -o-transform:rotate(7deg); // Opera
- -ms-transform:rotate(7deg); // IE
- -moz-transform:rotate(7deg); // Firefox
- -webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句
css的兼容性:
js的(常用):
- 标准的addEventListener,而IE使用的是attachEvent
- 获得DOM节点的方法有所差异,其获得子节点方法不一致。IE:parentElementparentElement.children
Firefox:parentNode parentNode.childNodes
childNodes的下标的含义在IE和Firefox中不同,Firefox使用DOM规范,childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。
前端基础之CSS(1)的更多相关文章
- 前端基础:CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 02 前端基础之CSS
目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)
品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...
- 前端基础之css样式(选择器)
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端基础之---css
css 介绍 css 规则有两个主要的部分构成 : 选择器 , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...
- Web前端基础(5):CSS(二)
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
- 前端基础系列——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
随机推荐
- MailKit和MimeKit 收发邮件
新建项目,引用MailKit和MimeKit NuGet包 using CommonTool.MailKit; using System; using System.Collections.Gener ...
- JZ-017-树的子结构
树的子结构 题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 题目链接: 树的子结构 代码 /** * 标题:树的子结构 * 题目描述 * 输入两棵 ...
- VirtualBox 桥接模式
网桥网络配置 以下内容来自:http://www.jianshu.com/p/a4dbdb40b72b 特点 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间可以ping通 3.虚拟机可以ping ...
- Docker - 安装&测试
一.什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中 ...
- cobbler check执行报错
httpd does not appear to be running and proxying cobbler, or SELinux is in the way. 当执行cobbler check ...
- 『德不孤』Pytest框架 — 13、Pytest中Fixture装饰器(三)
目录 9.ids参数说明 10.name参数说明 11.scope参数说明 (1)scope="function" (2)scope="class" (3)sc ...
- 云e办笔记(删减)
1JwtTokenUtils工具 2公共返回对象 3Admin实现UserDetails 4AdminLoginParam 5AdminLoginController 6SecurityConfig ...
- git常用命令及问题
Git基本操作 git init 创建新的git仓库 git clone [url] 使用 git clone 拷贝一个 Git 仓库到本地 git status 查看工作区 git stash li ...
- PhpStrom 常用的插件
.env files support 可以在env函数使用是提示.env文件中所有的key值的自动完成功能 Markdown support 在编写.md文件时有预览的功能 PHP composer. ...
- VuePress 博客优化之增加 Vssue 评论功能
前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...