CSS 的使用
内联(inline style attribute) 完全不应该这样做
<head> 标签内的 <style> 标签 偶尔可以用
<link> 标签中的外联 推荐的方式

三种主要的选择器
元素选择器
class 选择器
id 选择器

样式优先级(从高到低)
!important
内联样式
按顺序执行

选择器优先级(从高到低)
!important
内联样式
id 选择器
class 选择器
元素选择器

display 属性
none
block
inline
inline-block

none 不显示

block 占一行
默认 block 的标签有
div p ul ol li h1 h2 h3 h4 h5 h6

inline 只占 content 的尺寸

inline-block 是 inline 布局 block 模式
inline-block 对外表现为 inline，所以可以和别的 inline 放在一行
对内表现为 block，所以可以设置自身的宽高

盒模型
内容
padding
border
margin

position 属性用于元素定位
static 默认定位
relative 相对定位, 相对于自己本来应该在的位置
absolute 绝对定位, 行为有点奇怪
fixed 固定定位, 相对位置是整个窗口

非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次
relative 是相对定位
absolute 完全绝对定位, 忽略其他所有东西
往上浮动到 非 static 的元素
fixed 基于 window 的绝对定位
不随页面滚动改变

overflow属性
visible 默认
auto 需要的时候加滚动条
hidden 隐藏多余元素
scroll 就算用不着也会强制加滚动条

盒模型相关的 CSS

border
border-width
border-style 默认是 none, 表示不显示 border
border-color
简写如下, 顺序不要紧
border: 10px blue solid;

border-top
border-top-width
border-top-style
border-top-color

border-right
border-right-width
border-right-style
border-right-color

border-bottom
border-bottom-width
border-bottom-style
border-bottom-color

border-left
border-left-width
border-left-style
border-left-color

margin
margin-top
margin-right
margin-bottom
margin-left

padding
padding-top
padding-right
padding-bottom
padding-left

三种缩写, 分别对应有 4 2 3 个值的时候的解释
padding 同理
margin: top right bottom left
margin: (top/bottom) (right/left)
margin: top (right/left) bottom

border-radius 左上角为 top, 右下角为 bottom

background 相关属性和缩写
background-color: #233;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed; /* 背景图片随滚动轴的移动方式 */
缩写如下
background: #233 url(bg.png) no-repeat;

居中写法
block 元素居中, 两步走
1, 设置自己的宽度
2, 设置自己的 margin: 0 auto;

inline inline-block 元素居中
设置父元素的 text-align 属性
text-align: center;

很重要的 float 属性
用 clear float 的方法 撑起父元素
假设要被撑起来的父元素是 .gua-float
.gua-float::after {
content: "";
display: block;
clear: both;
}

伪类
:hover
伪元素
::after
::before

"""

CSS小全的更多相关文章

  1. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(*￣▽￣*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  2. css小随笔（二）与通用样式

    51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...

  3. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

  4. HTML+CSS小实战案例

    HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...

  5. CSS小tip整理

    CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...

  6. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  7. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  8. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  9. ICANN认证注册商小全 英、德、法

    转载 在ICANN认证注册商小全(一)和ICANN认证注册商小全(二)中,QQPCC介绍了美洲的各ICANN认证注册商.今天我们移师欧洲,介绍欧洲的ICANN认证注册商,欧洲的注册商也很多,不可能在一 ...

随机推荐

  1. 《天书夜读：从汇编语言到windows内核编程》八 文件操作与注册表操作

    1)Windows运用程序的文件与注册表操作进入R0层之后,都有对应的内核函数实现.在windows内核中,无论打开的是文件.注册表或者设备,都需要使用InitializeObjectAttribut ...

  2. Linux系列教程（二十）——Linux的shell概述以及如何执行脚本

    从这篇博客开始,我们将进入Linux的shell脚本的学习,这对于Linux学习爱好者而言是特别重要的一节,也是特别有意思的一节,shell 脚本就像我们知道的Java,php类似的编程语言一样,通过 ...

  3. [转载] Thrift-server与spring集成

    转载自http://shift-alt-ctrl.iteye.com/blog/1990026 Thrift服务server端,其实就是一个ServerSocket线程 + 处理器,当Thrift-c ...

  4. Scratch——教小孩子学编码

    教小孩子学编码 http://scratch.mit.edu/ http://v.163.com/movie/2013/3/H/I/M92389L06_M9238GTHI.html

  5. 使用MongoVUE

    mongoDB版本号为3.4.10 在终端操作一顿后想看看它在可视化工具里面什么样子,于是就找了一个可视化工具,MongoVUE这个看起来还不错,因为我是windows系统所以就没有太多的挑选选择.在 ...

  6. javaweb-番外篇-Commons-FileUpload组件上传文件

    一.Commons-FileUpload简介 Commons-FileUpload组件 Commons是Apache开放源代码组织的一个Java子项目,其中的FileUpload是用来处理HTTP文件 ...

  7. Orchard Core一分钟搭建ASP.NET Core CMS

    Orchard Core 是Orchard CMS的ASP.NET Core版本. Orchard Core是全新一代的ASP.NET Core CMS. 官方文档介绍:http://orchardc ...

  8. webpack 3.X学习之图片处理

    CSS中图片处理 在src目录下新建一个images目录,把图片放入images文件夹中:在index.html文件中增加一个div标签: /src/index.html: <div id=&q ...

  9. android studio 目录结构讲解

    android studio 目录结构讲解 src 毫无疑问,src目录是放置我们所有 Java代码的地方,它在这里的含义和普通 Java 项目下的 src目录是完全一样的,展开之后你将看到我们刚才创 ...

  10. Java中的回调

    又忙了一周,事情差不多解决了,终于有可以继续写我的博客了(各位看官久等了). 这次我们来谈一谈Java里的一个很有意思的东西--回调. 什么叫回调,一本正经的来讲,在计算机程序设计中,回调函数是指通过 ...