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. javaweb学习方案1

    一.JAVA环境变量的配置1.首先下载JDK JDK可以在Oracle(甲骨文)公司的官方网站http://www.oracle.com下载2.安装完成后查看JDK安装路径一般是C:\Program ...

  2. Socket网络编程之概述理解

    今天主要讲讲什么是socket网络编程 socketde 英文原义是"孔"或者"插座".是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机 ...

  3. 微信小程序开发《三》：微信小程序请求不能使用session的原因及解决办法

    本人在前面的微信小程序开发<二>中提到要想在服务端保持状态需要在客户端第一次请求服务器的时候给客户端返回一个sessionid,由客户端在本地保存,下次请求的时候在header里面带上这个 ...

  4. Not found org.springframework.http.converter.json.MappingJacksonHttpMessageConverter

    原因spring3跟spring4的jackson不一样. 解决方案: 1)spring3.x是org.springframework.http.converter.json.MappingJacks ...

  5. Drools文档（八） 规则语言参考

    规则语言参考 概述 Drools有一个"本地"的规则语言.这种格式在标点符号上非常轻,并且通过"扩展器"支持自然语言和领域特定的语言,使语言能够变形到您的问题领 ...

  6. 解决ubuntu无法远程连接

    在装Ubantu的时候可能有的小伙伴忽略了一点,忘记了在一个地方打一下空格,导致后面无法远程连接. 如果能在这里打上对勾就可以不用后面的操作了. 首先要切换到root账号 sudo passwd ro ...

  7. C# tostring

    GUID: 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifier) . GUID是一个通过特定算法产生 ...

  8. 理解defineProperty以及getter、setter

    我们常听说vue是用getter与setter实现数据监控的,那么getter与setter到底是什么东西,它与defineProperty是什么关系,平时有哪些用处呢?本文将为大家一一道来. 对象的 ...

  9. Thinkphp导入外部类的方法

    相信很多人在使用TP时候都苦恼使用外部类各种不成功 下面为大家详细介绍下引用方法和注意细节 手动加载第三方类库 由于第三发类库没有具体的命名空间,所以需要使用以下几种方法手动导入 1.import方法 ...

  10. 已有模板与tp框架结合

    具体实现步骤: ①复制模板文件到view指定文件目录: ②复制css.js.img到view指定文件目录: ③把静态资源(css.js.img)文件的路径设置为“常量”信息(在index.php入口文 ...