css,全称Cascading Style Sheets,层叠样式表。

css选择器是从右往左解析的,解析速度会比较快。

选择器

选择器权重

!important 优先级最高

元素属性 优先级高

相同权重 后写的生效

行高

留坑

背景

背景颜色

渐变色背景

多背景叠加

背景图片和属性(雪碧图)

background:red url(image.png);这里不需要逗号

background:no-repeat;还可以选择repeat-x,repeat-y。

background-position:center center;当然也可以用px来确定位置。

background-size:100px 50px;

多分辨率适配:大图缩小(background-size

base64 和 性能优化:background: url(base64)

使用base64减少了http请求,但是文件的体积会变大,浏览器也多了一个解读base64的任务,所以不能一味地认为base64就是优于直接放图片地址。小图片,比如loading图就比较适合base64。而且一般转base64会放在构建的时候做。

边框

边框的属性: 线型 大小 颜色

背景图

边框衔接的原理:斜切的(三角形

.box2{
height:0px;
border-bottom: 10px solid red;
border-right:10px solid transparent;
border-left:10px solid transparent;
width:0px;
}
.box3{
height:0px;
border-bottom: 10px solid transparent;
border-right:10px solid red;
border-top:10px solid transparent;
width:0px;
}

overflow

visible:内容会超出容器,无滚动条

hidden:超出内容被隐藏,无滚动条

scroll:有滚动条

auto:溢出时有滚动条

换行

overflow-wrap:normal;
word-break:normal;
white-space:nowrap;//这个可以使长内容不换行

一些装饰性属性

字重(粗体) font-weight

斜体 font-style:italic

下划线 text-decoration

指针 cursor

hack

checkbox的美化

  1. label id
  2. 隐藏input
  3. :checked + label
input+label{}
input:checked + label{}

布局

display:block/inline/inline-block

block有独立宽高,默认情况下占据一行

inline默认不会占据一行

inline-block对内表示为block,可以设置宽高,对外表示为inline,可以与其他元素排在一行。

position:static/relative/absolute/fixed

static静态布局,最基本的定位方式,也就是没有定位。

relative相对定位,相对于其原来的位置进行定位。

absolute生成绝对定位的元素,相对于static以外的第一个父元素进行定位,脱离文档流。

fixed生成绝对定位的元素,相对浏览器窗口进行定位。

z-index:只在定位元素上生效(除了static),相当于一条z轴,值越高则再屏幕的越上面。下拉单和遮罩使其应用。

表格布局 table

flexbox

  1. 一种现代的布局语法
  2. 弹性盒子
  3. 盒子是并列的
  4. 需要指定宽度
  5. 兼容问题

flex-direction控制flex项目沿着主轴的排列方向,row || column || row-reverse || column-reverse。

flex-wrap可以控制flex容器内是否换行:nowarp不换行,wrap换行,wrap-reverse换行但是是反向的。

flex-flow是以上两个属性的速记属性,类似于border。

justify-content类比text-align,flex项目在主轴上的对齐方式,flex-start,flex-end,center,space-between,space-around

flex的属性很多,未完待续。

float

  1. 元素会浮动
  2. 元素脱离文档流
  3. 元素不脱离文本流

可以联想到文本环绕图片的效果,当然这就是float本来的用途,只不过我们用float来布局而已

清除浮动的方法

.clearfix::after{
content:'aaa';
clear:both;
display:block;
height:0px;
visibility: hidden;
}
//注意一步一步的变化过程
//content可以是任意内容,可以是空格,这里设置文字是为了观察变化的过程
//为了触发ie的hasLayout可以再添加一行
.clearfix { *zoom:1; }

inline-block布局

inline-block布局也是一种很不错的布局方式,可以像文本一样排block元素,不用清除浮动,但是存在间隙,可以通过设置父元素的字体大小为0解决这个问题。

响应式布局

折行:把横向的变成纵向的,如原来inline-block实现的一行东西,可以改成block加上居中实现纵向排列。

隐藏:在移动端隐藏一些不是很重要的内容,如广告和个人信息。

具体方法:rem/viewport/media query

css的一些复习的更多相关文章

  1. css重点章节复习—布局-边框-边距-浮动 (部分)

    css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...

  2. css部分的复习

    常见的块元素有<h1><h6>.<p><div><ul><li><ol>等,其中<div>标记是最典型的 ...

  3. HTML、CSS、JS 复习——序

    HTML在MVC中担任着M的角色.由HTML组成的节点称之为HTML DOM.要想成为一流的大神,就必须能分分钟建立起一个强大的HTML DOM.而要做到这点,就必须了解甚至精通HTML. CSS在M ...

  4. CSS的简单复习总结

    如果说网页是人的话那么CSS就是化妆品了哈哈哈,所以网页离不开CSS的装饰.id选择器和Class选择器    二者都是用来选择元素进行装饰的,我个人理解是类选择器包含了id选择器,class选择器不 ...

  5. CSS基础知识复习

    1. CSS优先级 标签内部属性 style定义的CSS > 文档内定义的css > 引用外部CSS文件 2. CSS选择器类型 . 标签选择器 . 类选择器(使用.做标识) . ID选择 ...

  6. HTML5+CSS3整体回顾

    http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...

  7. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  8. 《CSS权威指南》基础复习+查漏补缺

    前几天被朋友问到几个CSS问题,讲道理么,接触CSS是从大一开始的,也算有3年半了,总是觉得自己对css算是熟悉的了.然而还是被几个问题弄的"一脸懵逼"... 然后又是刚入职新公司 ...

  9. HTML和CSS的复习总结

    HTML(Hypertext Markup Language)超文本标记语言:其核心就是各种标记!<html> HTML页面中的所有内容,都在该标签之内:它主要含<head>和 ...

随机推荐

  1. 在 Tomcat 上配置虚拟主机

    .Tomcat 服务器的server.xml文件   (1)Tomcat 组件 Tomcat服务器是由一系列可配置的组件构成,其中核心组件是 Catalina Servlet 容器,它是所有其他 To ...

  2. Win2003 设置远程连接限制数

    在开发过程中,很多同事需要连接到一台Win2003服务器,但是连接人数超过了10个,就连接不上了.想设置一下连接限制数,可以如下操作: 1:在运行里面输入gpedit.msc后,弹出"本地计 ...

  3. Activity的setContentView的流程

    最简单的Activity中的内容大致是这样的: public class MainActivity extends Activity { @Override public void onCreate( ...

  4. JQuery 纵向二级菜单与对齐方式

    1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...

  5. JAVA关键字Volatile的特性

    一.简述: 关键字Volatile是JAVA虚拟机提供的最轻量级的同步机制,但是它并不容易完全被正确.完整的理解,以致于许多程序员在遇到需要处理多线程数据竞争的时候一律使用synchronized来进 ...

  6. ABP官方文档翻译 6.4 导航

    导航 创建菜单 注册导航提供者 显示菜单 每一个网络应用都会有一些菜单用来在pages/screens之间导航.ABP提供了通用的基础设施来创建并显示菜单. 创建菜单 应用可以由不同的模块组成,每一个 ...

  7. 下载vlc遭遇网络劫持

    一次偶然的机遇,在公司下载"vlc播放器",下载之后安装完就变成了"搜狗手机助手".而且连续几次下载都是这样,我以为是我安装了搜狗输入法的缘故.        ...

  8. vue中如何获取后台数据

    原文链接:http://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://gith ...

  9. Cookie、session和localStorage、以及sessionStorage之间的区别

    一.Cookie.session和localStorage的区别 cookie的内容主要包括:名字.值.过期时间.路径和域.路径与域一起构成cookie的作用范围.若不设置时间,则表示这个cookie ...

  10. BZOJ 2809: [Apio2012]dispatching [斜堆]

    题意:主席树做法见上一题 我曾发过誓再也不写左偏树(期末考试前一天下午5个小时没写出棘手的操作) 于是我来写斜堆啦 从叶子往根合并,维护斜堆就行了 题目连拓扑序都给你了... 说一下斜堆的操作: 合并 ...