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. javaOOP-基础知识

    面向对象基础 一.类的定义 访问修饰符  class 类名{ 类成员列表 } 访问修饰符:public和package(默认) package表示一个包中可以访问,是java默认的访问修饰符,pack ...

  2. java的配置环境简介

    ============================================================================== 学java对很多人来说并不陌生,听的最多的 ...

  3. 实现基于Keepalived主从高可用集群网站架构

    背景 上一期我们实现了基于lvs负载均衡集群的电商网站架构,随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,目前业务已经通过集群LVS架构可做到随时拓展 ...

  4. 用python画一朵玫瑰花

    废话不多说,直接上代码 from turtle import * import time setup(600,800,0,0) speed(0) penup() seth(90) fd(340) se ...

  5. 1）C语言简介（C自考学习）

    C语言历史由来 世界上第一个高级语言是"ALFOL",而C的前身是ALGOL语言.1970年美国贝尔实验室的肯·汤普逊对BCPL(基本复合程序设计语言)进行了进一步的简化,突出了硬 ...

  6. LINQ学习系列-----2.3 迭代器带来的延迟查询

    此篇博文承接上一篇博文: LINQ学习系列-----2.2 迭代器 一.第一次执行                      废话不多说,上源码: 执行结果下图: 为什么会这样?其实原因很简单 fro ...

  7. Function Programming - First Class（一等公民function）

    引用外界一等公民的定义:"在JavaScript世界中函数却是一等公民,它不仅拥有一切传统函数的使用方式(声明和调用),而且可以做到像简单值一样赋值.传参.返回,这样的函数也称之为第一级函数 ...

  8. ExpandableListView使用

    相关博客 ExpandableListView使用 博客内容记录 场景 有时候,使用ListView并不能满足应用程序所需要的功能.有些应用程序需要多组ListView,这时候我们就要使用一种新的控件 ...

  9. Python中的选择排序

    选择排序 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大 ...

  10. Scala入门系列（四）：Map & Tuple

    Map 创建Map // 创建一个不可变的Map scala> val ages = Map("Leo" -> 30, "Sparks" -> ...