跳到主要内容

CSS基础知识

CSS 基本样式​

颜色

color: rgba(255,0,0,0.3) # alpha 透明度
color: #fff000

文字

color: FFFFFF  #颜色 
font-family:   #字体
font-size: 16px;   #字体大小
font-weight: bold    #字体加粗
font-style: # 字体样式
text-decoration: none # 清除文字样式
text-indent: 2em # 缩进
line-height: 30px # 行高
text-align: center # 文字/图片 居中
text-overflow: ellipsis # 溢出用省略号(部分游览器)
overflow-wrap: break-word # 自动换行

列表

  • ul 无需列表、ol 有序列表
list-style-type: none : # 列表样式
list-style-position: inside # 列表在文本框内
list-style-image: url('demo.gif') # 列表图片
list-style: none inside # 简写

链接

1. 链接样式
a:link :visited :hover :active # 链接状态

背景

background-color: linear-gradient(to bottom, red, blue); # 渐变色
background-image: url('demo.gif')
background-repeat: repeat-x | no-repeat # 不重复
background-attachment
background-position: left 

background-size: 60px/100% auto # 大小
background-size: cover 完全覆盖 | contain 完全适应

background: #00ff00 url('demo.gif') no-repeat center # 简写，不区分顺序

排列

text-align: center # 文字/图片 居中
line-height: # line-height=父元素height 标签高度居中
vertical-align: middle # 居中对齐，只对行内元素有效

轮廓

outline-style: none # 无轮廓

阴影

border-shadow: 5px 5px 5px red; # 水平阴影 垂直阴影 模糊阴影 阴影颜色
box-shadow: 0 0 0 10px red; # 水平阴影 垂直阴影 模糊阴影 阴影尺寸(外延尺寸) 阴影颜色 inset;

透明度

opacity: 1 # 不透明
opacity: 0.5 # 半透明

元素分类​

块元素

  • 独占一行
div p h1 h2 ol ul table

行元素

span br a i

行内块元素

img input

更改元素类型

display:inline # 设置为行内元素，与其他元素共享一行，即不独占一行
display:block # 设置为块级元素且独占一行
display:inline-block # 行内块元素

边距​

内边距 padding

  • 外边距会撑大模型
padding-top/left/right/bottom: 15px/10% 
# 简写
padding: 上 右 下 左
padding: 上下 左右
padding: 上 左右 下

外边距 margin

  • 合并问题
margin-top: 15px/10%
margin: 0 auto # 居中

元素溢流

overflow: auto 滚动条 | hidden | visible

边框 border

border-style: none # 无边框
border-left: 2px solid red # 宽度|样式|颜色

border-radius: 50% # 圆角
border-radius: 15px 15px 15px 15px # 左上 右上 左下 右下
border-top-left-radius

选择器​

选择器类型

p {} # 类选择器
#li-id{} # id 选择器
.li-class-type{} # class 选择器
# 通配符选择器
* { 
  margin: 0; /* 定义外边距*/
  padding: 0; /* 定义内边距*/
}

组合选择器

# 交集选择器(多个选择器交集，无空格)
p.one { color: blue; }
# 后代选择器（有空格）直接或间接包含的元素
p one { color: blue; }
# 子代选择器 ( 大于号) 仅子节点
p > one { color: blue;}
# 并集选择器(或, 逗号分隔)
p, #one, .two {color: blue;}

属性选择器

div[lang] # 存在lang
div[lang="en"] # 属性lang等于en
div[lang][title="book"] # 存在lang，且title等于book
div[lang^="zh"] # lang是以zh开头，如 lang=zh-CN zh 等
div[lang$="CN"] # lang是以CN结尾，如 lang=ZH-CN zh-CN 等
div[href*=github] # href属性包含github
div[filetype~=txt] # filetype 包含txt，需以空格分隔，完整单词
div[lang|=en] # |= 表示精确匹配或以连字符 "-" 分隔的属性值

<div lang="en" filetype="txt pdf" title="book" href="https://github.com">Hello</p>

高级选择器​

兄弟元素选择器

<p>1</p>
<p class="test">2</p>
<p>3</p>
<div>4</div>
<p>5</p>

.test ~ p { background: red; } # test 后的兄弟节点，即元素2,3
.test + p {} # 仅选择为test后紧跟的元素3
.test ~ div + p {} # 选择 p 后面的 div，紧临的p节点，即元素5

开头结尾选择器

<a href="#" title="test">A</a>
a[title^='test'] { background: red;} # 选开头

<a href="#" title="testB">B</a> 
a[title$='test$'] { background: red;} # 选结尾

伪类选择器

:root # 根节点

:first-child # 第一个子元素
:last-child # 最后一个子元素
:nth-child(n/2n/2n+1/odd/even) # n行/偶数行/奇数行

:first-of-type # 某个元素的第一个特定类型的子元素
:last-of-type # 某个元素的最后一个特定类型的子元素
p:last-of-type # p元素的最后一个元素
:nth-of-type(n) # 按类型第 n 个
:nth-last-of-type(n)

:empty # 空元素
:target # id 与 url 匹配
www.abc.com/#p1

p:not(.demo) # 所有p元素不包含class为demo的元素
:enabled & :disabled # 禁用
input[type='checkbox']:checked {
        margin: 100px;
}

元素的伪类

注意要按照 LVHA 顺序

:link :visited :hover :active

伪元素选择器

# 伪元素也是不存在的元素，代表元素的特殊状态
::first-letter # 第一个字母
::first-line # 第一行元素
::selection # 选中的元素
::before # 元素开始在位置前
::after # 元素结束的位置后

布局​

类别​

1.流动模型（默认网页布局）​

2.浮动模型​

  • float: left

  • 脱标

  • 浮动塌陷（浮动清除）

    父容器没有设置高度，浮动不会撑开div，需要清除浮动

    方法一：clear 属性

    .clear{ clear:both; }

    方法二：overflow属性

    .clear { overflow: hidden; *zoom: 1;}

3.层模型​

  • relative: 相对于前一个div位置移动，原位置保留

  • absolute: 相当于PS的图层，独占一层，不挤占原位置

    z-index: -1 决定元素的堆叠顺序

  • fix: 当前可视窗口的相对距离

注意点：

  • 父相子绝：relative + absolute

游览器前缀​

-moz- ：Firefox 等使用 Mozilla 引擎的浏览器。
-webkit- ：Safari 、 Chrome 等使用 Webkit 引擎的浏览器。
-o- ：Opera 浏览器早期。
-ms- ：IE 和 Edge 等 。

过渡​

transition: height 2s ease-in-out 2s;
transition: 2s ease-in-out; # 默认 all

# 速度
linear: 匀速，相当于（cubic-bezier(0,0,1,1)）。
ease: 慢速开始，然后变快，然后慢速结束，相当于（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in: 慢速开始，相当于（cubic-bezier(0.42,0,1,1)）。
ease-out: 慢速结束，相当于（cubic-bezier(0,0,0.58,1)）。
ease-in-out: 慢速开始，慢速结束，相当于（cubic-bezier(0.42,0,0.58,1)）。

高级布局​

Flex 布局​

使用

# 块元素
div { display: flex; }
# 行内元素
span { display: inline-flex ;}
# Webkit 游览器
div { display: -webkit-flex ;}

容器属性

# 主轴线方向
flex-direction: row | row-reverse | column | column-reverse # 左到右|右到左|上到下|下到上

# 弹性盒子换行
flex-wrap: nowrap | wrap # 不换行 | 换行（新行在下方） |换行（新行在上方） 

# 简写（默认为row nowarp）
flex-flow: row-reverse nowrap

子元素属性

# 主轴对齐方式
justify-content: center # 居中
justify-content: flex-start flex-end # 起点/终点对齐
justify-content: space-between # 两端对齐
justify-content: space-around # 间隔对齐

# 交叉轴对齐
align-items: center | flex-end | flex-start
align-items: baseline # 基线对齐,即按文件的底边
align-items: stretch # 撑满

剩余空间分配

flew-grow: 0 # 默认，不分配剩余空间
flew-grow: 1 # 平分剩余空间
flew-grow: >1 # 按比例分配剩余空间

flew-grow 比例为 1:2:1 总宽: 400px A,B,C:100px

A 的实际宽度为 100+(100)*(1/4)=125 B 的实际宽度为 100+(100)*(2/4)=150 C 的实际宽度为 100+(100)*(1/4)=125

超出空间缩减

flex-shrink 与 flex-grow 正好相反
flex-shrink: 0 # 默认，不调整，元素会溢出
flex-shrink: 1 # 等比例缩小
flex-shrink: 2 # 按比例缩小

子元素宽度

flex-basis: auto # 按子元素内容宽度

简写

flex: 默认 # 0 1 auto
flex: auto # 1 1 auto
flex: none # 0 0 auto

特例

align-self # 设定与align-items相同，目的是覆盖align-items形成特例

多行元素

align-content: flex-start # 设定与justify-content相同，约定多行元素的排列

排列

order:3 # 默认0，指定元素排序，-1 可以排最前

图文参考：深入解析 CSS Flexbox

多媒体​

@media 媒体类型and （媒体特性）{你的样式}
# 媒体类型: all/print/screen/speech
@media screen and (max-width: 400px) {
  .box {
    display: none;
  }
}

常用CSS 全局配置​

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
}

img {
  height: 100%;
}

a {
    text-decoration: none;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    line-height: 26px;
    color: #303030;
    font-weight: 400
}

更多教程​