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. C#中??和？分别是什么意思？

    在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; 是正确的,int i=null ...

  2. 如何在C#中使用存储过程(SQL Server 2000)

    要在C#中使用存储过程,首先看看test表的创建sql语句:   create table test55 ( uid int identity(1,1), class1 varchar(20), cl ...

  3. linq中group by

    本文导读:LINQ定义了大约40个查询操作符,如select.from.in.where.group 以及order by,借助于LINQ技术,我们可以使用一种类似SQL的语法来查询任何形式的数据.L ...

  4. 用C#生成不重复的随机数

    我们在做能自动生成试卷的考试系统时,常常需要随机生成一组不重复的题目,在.net Framework中提供了一个专门用来产生随机数的类System.Random. 对于随机数,大家都知道,计算机不 可 ...

  5. openpose模型在AI challenge人体骨骼关键点检测的表现

    因为之前正好看了CMU在CVPR2017上的论文<Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields>, ...

  6. node使用buffer生成图片

    buffer是node里的一个模块,这个模块的出现是因为js没有阅读和操作二进制数据流而出现的 buffer是什么及作用? Buffer顾名思义叫缓冲区,用于存储速度不同步的设备或优先级不同的设备之间 ...

  7. 其他信息: ORA-01400: 无法将 NULL 插入

    这个错误其实就是oracle数据库的某列约束为 not null,但在插入值的时候插入了控制,无论是null和"",它都识别为空 有两种方法: 1.修改数据库字段约束为允许为空 2 ...

  8. vim操作命令

    一,命令模式下 文件顶部: gg 文件底部: G 删除当前行:dd 删除当前行,并进入INSERT模式: cc 取消删除:u

  9. spring学习笔记(一) Spring概述

    博主Spring学习笔记整理大部分内容来自Spring实战(第四版)这本书.  强烈建议新手购入或者需要电子书的留言. 在学习Spring之前,我们要了解这么几个问题:什么是Spring?Spring ...

  10. androidStudio 中 gradle 常用功能

    1. gradle 使用 svn 当前版本信息. def getSvnRevision() { new ByteArrayOutputStream().withStream { os -> de ...