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. python_如何让字典保持有序?

    案例: 某编程竞赛系统,对参赛选手编程解题进行计时,选手完成题目后,把该选手解题用时记录到字典中,以便赛后按选手名查询成绩(答题时间越短,成绩越优秀) {'lili':(1,43),'yuyu':(2 ...

  2. HTML学习(一)

    文本输出/超链接 <!--/* * @<h1></h1>到<h6></h6>六个h标签,分别表示不同大小的字体.h1最大,h6最小 * @< ...

  3. JS与ajax遍历list

    示例: <script> <c:forEach var="yanan" items="${yananList}">            ...

  4. Linux修改主机名脚本-不重启-支持RedHat、SUSE

    需要用脚本修改主机名,涉及RedHat.SUSE系统,并且要求修改立即生效且不重启,下面就是我的脚本. 使用脚本的方法如下: 1 首先创建一个脚本文件,假如命名为ModifyHostname.sh: ...

  5. 关于支付时rsa加密解密的函数

    <?php //加密 function _checkPadding($padding, $type) { if ($type == 'en') { switch ($padding) { cas ...

  6. JAVA中正则表达式常用的四个方法

    JAVA中正则表达式处理字符串的四个常用方法:匹配.分割.替换.截取.其跟字符串的常用函数相似,但是使用正则表达式会更简单.更加简洁.下面是具体的例子: public class TestRegex ...

  7. 02_HTML5+CSS详解第二天

    html5大纲分析工具:https://gsnedders.html5.org/outliner/ <section> <h1>HTML部分</h1> <se ...

  8. C语言的格式符

    转至:http://blog.csdn.net/zhanzheng520/article/details/10434791   一.格式符含义 1.d格式符:按十进制格式输出. %d          ...

  9. CSS :befor :after 伪元素的妙用

    本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...

  10. pip相关工具使用小结

    最近写taffy的时候用到了两个pip相关的小工具. 一个是pip-review批量更新lib库,一个是pipreqs生成基于项目的requirements.txt. 1. pip相关命令 #更新单个 ...