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. app.config 配置多项 配置集合 自定义配置(3)

    再说说利用app.config配置多个自定义的方法.先看这个例子:美国家庭Simpson的家里有父亲母亲和三个儿女,而中国的老王只有独生子女.结构如下: <?xml version=" ...

  2. Centos6上进行Mysql5.6安装和主从复制部署

    系统:centos6 数据库:mysql5.6 服务器:两台,一主一从 一.Mysql5.6二进制版本的安装 Mysql的安装在有三种模式,第一种是yum安装,第二种是二进制模式的安装,第三种是源码编 ...

  3. [转载] MapReduce工作原理讲解

    转载自http://www.aboutyun.com/thread-6723-1-1.html 有时候我们在用,但是却不知道为什么.就像苹果砸到我们头上,这或许已经是很自然的事情了,但是牛顿却发现了地 ...

  4. javascript常用的Math对象的方法

    简介 Math对象是在程序编程中用于执行一些数学任务的.Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数, ...

  5. TFboy养成记 MNIST Classification （主要是如何计算accuracy）

    参考:莫烦. 主要是运用的MLP.另外这里用到的是批训练: 这个代码很简单,跟上次的基本没有什么区别. 这里的lossfunction用到的是是交叉熵cross_entropy.可能网上很多形式跟这里 ...

  6. c语言的内存分析

    1. 进制 1. 什么是进制 ● 是一种计数的方式,数值的表示形式  汉字:十一   十进制:11  二进制:1011  八进制:13 ● 多种进制:十进制.二进制.八进制.十六进制.也就是说,同一个 ...

  7. WebApi接收复杂类型参数

    当接收实体时,该实体类不能添加Serializable属性,否则传来的json数据无法映射成功?

  8. 使用map做数组与链表去重

    #include<iostream> #include<map> using namespace std; class node{ public: node():value() ...

  9. 项目实战7—Mysql实现企业级数据库主从复制架构实战

    Mysql实现企业级数据库主从复制架构实战 环境背景:公司规模已经形成,用户数据已成为公司的核心命脉,一次老王一不小心把数据库文件删除,通过mysqldump备份策略恢复用了两个小时,在这两小时中,公 ...

  10. gitup问题的处理

    在使用本地建立git仓库后,准备使用 因为之前已经登录了,所以没有给登录的命令行 1.git init         命令初始化仓库 2.git add .     命令将所有的文件传输到git仓库 ...