目录
- 1. 语法
-
- 1.1 样式定义方式——行表/内表/外表
- 1.2 选择器——ID/类/伪类/伪元素
- 1.3 颜色——文字/背景
- 1.4 文本——对齐/行高/字间距/缩进/文本修饰和阴影
- 1.5 字体——大小/风格/粗细
- 1.6 背景——颜色/图片
- 1.7 边框——border与排布顺序
-
- 注意事项
- 1.8 元素展示格式——行级/块级/空白处理/溢出处理
- 1.9 内边距与外边距——margin/padding
- 1.10 盒子模型——content-box/border-box
- 1.11 位置——static/relative/absolute/fixed/sticky
-
- 注意事项
- 1.12 浮动——float/clear
- 1.13 flex布局——flex-flow/justify-content/align-items
-
- （1）排列方式
- （2）对齐方式
- （3）元素大小
- 1.14 响应式布局——@media
- 注意事项
- 参考文献
1. 语法
本文介绍css的主要语法1。
1.1 样式定义方式——行表/内表/外表
行内样式表（行表）：style="xx" <img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">
内部样式表（内表）：<style>
<style>
img{}
</style>
外部样式表（外表）：<link> <link rel="stylesheet" type="text/css"/>
1.2 选择器——ID/类/伪类/伪元素
标签选择器：xx{} ID选择器：#xx{} 类选择器：.xx{}
伪类选择器（状态选择器）：定义元素的特殊状态
- 链接选择器：:link，:visited，:hover，:active，focus
- 位置选择器：:nth-child(n)
- 目标选择器：:target
这样理解比较抽象，我们举一个具体的例子来理解。如下所示，这表示找到class为effect的元素，当其状态为hover时进行修改。具体而言，当鼠标悬停在这一类标签中放大1.1倍。
.effect:hover{
transform：scale(1.1);
}
复合选择器
- a,b：同时选择a和b元素
- a.class：包含某类的a元素
- a+b：前一个兄弟节点为a的b元素
- a b：所有祖先节点为a的b元素
- a>b：所有父节点为a的b元素
通配符选择器
- *：所有标签
- [required]：所有具有required属性的标签
- [id="big"]：所有id值为big的标签
伪元素选择器（结构选择器）：将特定内容当做一个元素。例如：::first-letter，::first-line，::selection，::after，::before 比如说：::first-letter可以看作是如下的形式。
<p><span>这</span>是一行文字</p>
这样理解比较抽象，我们举一个具体的例子来理解。如下所示，其表示将p的父元素中的奇数/偶数/a的倍数+b块进行变化，其中n取所有的非负整数
p:nth-child(odd/even/an+b){}
h1::before{content:"《"}
h1::after{content:"》"}
举个例子：
<div class="container">
<h1>我是标题</h1>
<p>我是第二个孩子（虽然我是第一个 p）</p>
</div>
p:nth-child(1) {
color: red;
font-weight: bold;
}
此时css中的p:nth-child(1) 将不会选中任何元素，因为浏览器查看容器的第1个孩子是<h1>
样式渲染优先级
- 权重原则：!important>style="">id="">class=""与:xx>xx{}>*{}
- 先来后到原则：后面的样式会覆盖前面的样式
- 父权重低原则：继承的父元素权重最低
注意事项
- 习惯上id是唯一，但是class不是唯一的；类选择器是最常用到的
- 多个class或外表/内标定义，优先级按照css中的执行顺序
- 样式具有继承性：父节点的样式会继承给子节点
1.3 颜色——文字/背景
只需要记住color是文字颜色，background-color是背景颜色。
1.4 文本——对齐/行高/字间距/缩进/文本修饰和阴影
text-align：表示对齐方式，有center，left，right，justify
line-height：表示行高。本身的字体大小（而非行高）是16px
行高的目的：让字体竖直居中
- 长度单位 px：绝对大小（像素点） %：相对父元素的百分比 em：相对当前元素的字体大小（默认是16px） rem：相对根元素（<html>）的字体大小 vw：相对屏幕宽度的百分比 vh：相对屏幕高度的百分比
<html>←根元素(rem)
<body>←父元素(%)
<div>←当前元素(em)
</div>
</body>
</html>
一般来说，em用的比较少，因为其受到父元素的影响较大（样式的继承性）；rem用的比较多，兼容屏幕一般采用rem
letter-spacing：字间距 text-indent：缩进 text-decoration：设置下划线为text-decoration：underline；去掉超链接的下划线为text-decoration:none
1.5 字体——大小/风格/粗细
font-size，font-style，font-weight，font-family sans-serif：不带衬线字体；serif：带衬线字体；monospace：等宽字体
1.6 背景——颜色/图片
background-color，background-image，background-size，background-repeat，background-position，background-attachment
常用的键值对： background-size：cover：保证背景图片完整 background-repeat：no-repeat：保证背景图片不重复 background-image：url(xxx.jpg)：指定图片 background-position：先指定水平方向，再指定垂直方向；例如left top或150px 0 background-attachment：背景相对于视口内固定为fixed
1.7 边框——border与排布顺序
border-style，border-width，border-color，border-radius，border-collapse 默认需要四个参数，如果省略的话，默认取对边
border-style：solid solid solid solid（上/右/下/左）
border-style：solid solid solid（上/左右/下）
border-style：solid solid（上下/左右）
例1：网页的头像变形圆形的写法
img{
border-radius:50%
}
例2：将表格进行边框合并
table{
border-collapse:collapse
}
注意事项
以下情况，样式会失效，需要写全border-top:1px solid;
border-top: 1px; /* 这里的样式（style）缺失，默认为 none */
1.8 元素展示格式——行级/块级/空白处理/溢出处理
display：有block，inline，inline-block三类属性
block（块级，如<div>）
- 独占一行
- width、height、margin、padding均可控制
- width默认100%
inline（行级，如<span>）
- 可以共占一行
- width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效（水平MD有效）
- width默认为本身内容宽度
inline-block（行块级，如<img>）
- 可以共占一行
- width、height、margin、padding均可控制
- width默认为本身内容宽度
white-space：设置如何处理空白，比如说pre属性表示不忽略回车和空格，用来写代码
pre {
display: block;
font-family: monospace;
unicode-bidi: isolate;
white-space: pre;
margin: 1em 0px;
}
overflow和text-overflow：用于溢出处理 没有滚动+省略号(一般用法)：
overflow:hidden;
text-overflow:ellipsis;
有滚动+省略号(sb用法)：
overflow:auto;
text-overflow:ellipsis;
1.9 内边距与外边距——margin/padding
margin：设置外边距，其定义为距离某个方向的最小距离
margin：10px，10px，10px，10px（上/右/下/左）
border-style：10px，10px，10px（上/左右/下）
border-style：10px，10px（上下/左右）
取值可以是固定值如10px，百分比如10%或者auto 10px是相对当前元素；10%是相对父元素（包含块）的宽度；auto是让浏览器自动选择，margin：0，auto表明水平居中
- 问题1：父子塌陷/折叠问题
①父元素没有border或padding的时候，子元素会出现塌陷问题，其相对的margin不是相对父元素的，而是相对祖先元素的。 ②父元素和子元素同时指定margin-top值时，取max(margin-top)
例如，对于问题1，我们给予如下例子：
<body style="margin:0">
<div class="div-outer">
<div class="div-inner">
</div>
</div>
</body>
.div-outer{
width: 300px;
height: 300px;
background-color: aqua;
margin-top: 10px;
}
.div-inner{
width: 100px;
height: 100px;
background-color: red;
margin-top: 20px;
}
其结果如下图所示，红快是相对于祖先元素的偏移，而非父元素，因此出现塌陷问题；并且，父元素与子元素的共同的margin=max(10px,20px)=20px 
- 解决方案：
①父元素添加border或padding属性：border-top:1px solid;或padding-top:1px; ②父元素添加overflow属性：overflow: hidden; ③父元素添加伪类选择器：
.div-outer::before{
content:"";
display: table;
}
方法①改变了盒子的大小，不推荐；方法②不适用于其他溢出的情况，也不推荐；方法③推荐，不会影响其他的情况
- 问题2：上下块（兄弟块）塌陷/折叠问题
上下块的垂直margin只会取max(margin)；水平margin不会产生折叠问题 例如，对于问题2，我们给予如下例子：
<body style="margin:0">
<div class="div-outer">
<div class="div-inner">
</div>
<div class="div-inner-1">
</div>
</div>
</body>
.div-outer{
width: 300px;
height: 300px;
background-color: aqua;
}
.div-inner{
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 10px;
}
.div-inner-1{
width: 100px;
height: 100px;
background-color: red;
margin-top: 20px;
}
其结果如下图所示，两个块之间的距离变成margin=max(10px,20px)=20px 
- 解决方案
对于上下块只设置margin-bottom属性，不设置margin-top属性
padding：内边距
取值可以是固定值如10px，百分比如10% 10px是相对当前元素；10%是相对父元素（包含块）的宽度
1.10 盒子模型——content-box/border-box
box-sizing：定义了如何计算一个元素的总宽度和总高度
- content-box：是默认值，设置border和padding均会增加元素的宽高。定义W为元素的宽度，width为在css定义的宽度，则有W=width+padding+border
- border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。定义W为元素的宽度，width为在css定义的宽度，则有W=width
1.11 位置——static/relative/absolute/fixed/sticky
position用于指定一个元素在文档中的定位方式。属性包含relative，absolute，fixed，sticky
- static：流式布局。此时top，right，bottom，left和z-index属性无效
- relative：相对布局。left:10px表明从上面推10px。其原来的位置还会保留，不会被占据；这个相对是相对于自己的相对。
- absolute：相对于最近的非static类型的块（而不一定是父元素）的偏移
- fixed：相对于浏览器屏幕的偏移
- sticky：正常模式是流式模式，不占别人的位置；吸附模式是当距离下边界例如10px的时粘在那个位置不动了，直到它的父元素也滚出视野
注意事项
- z-index：表明覆盖顺序，对static定位无效，其他的定位有效
- 只有relative会把自己原来的空位保留；其他的如absolute和fixed不会把自己原来的空位保留
1.12 浮动——float/clear
float：元素向容器左/右侧放置。属性为left和right display:inline-block与float相似，但是前者块与块之间有间距。如果希望没有间距，可以采用float:left
由于float会产生大块覆盖小块的情况（如下图），我们希望清楚float属性可以采用clear 
clear：强制元素移至任何浮动元素下方。属性为left，right和both。使用方式为clear:left
1.13 flex布局——flex-flow/justify-content/align-items
flex布局（一维布局）：定义块间的排放方式和对齐方式。
- 先往主轴上排列，再往交叉轴上排列（见下图）
- 如果总长超过宽度（高度），就会把它压缩
（1）排列方式
flex-direction：定义主轴的方向
- 取值：row是从左往右；row-reverse是从右往左；column是从上到下；column-reverse是从下到上
flex-wrap：指定 flex 元素单行显示还是多行显示 取值：
- nowrap：默认值。不换行
- wrap：换行，第一行在上方
- wrap-reverse：换行，第一行在下方
flex-flow：flex-direction 和 flex-wrap 的简写。默认值为：row nowrap
（2）对齐方式
justify-content：定义主轴/水平对齐的方式 取值：
- flex-start：默认值。左对齐
- flex-end：右对齐
- space-between：左右两段对齐（紧贴左右两边进行对齐）
- space-around：左右两边的距离=相邻元素之间距离的一半（不紧贴左右两边进行对齐）
- space-evenly：左右两边的距离=相邻元素之间距离（不紧贴左右两边进行对齐）
align-items：定义交叉轴/垂直对齐的方式（作用于每一行） 取值：
- flex-start：元素向主轴起点对齐
- flex-end：元素向主轴终点对齐
- center：元素在侧轴居中
- stretch：弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度
align-content：定义交叉轴/垂直对齐的方式（作用于多行整体） 取值：flex-start，flex-end，center，stretch
align-items 与 align-content的区别：
- align-items 会将所有的盒子按照均匀排布 align-content会挤在一起
- 当在flex-wrap:nowrap模式的时候，align-items 仍然会居中，而algn-content 居中效果会消失
order：定义flex项目的顺序，值越小越靠前
（3）元素大小
flex-grow：flex 增长系数；负值无效，默认为 0 flex-shrink：flex 元素的收缩规则；负值无效，默认为1
flex-basis： flex 元素在主轴方向上的初始大小 取值： width 值可以是 <length>; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的百分数 。负值是不被允许的。默认为 auto
flex是flex-grow、flex-shrink、flex-basis的缩写 取值：
- auto：flex: 1 1 auto
- none：flex: 0 0 auto
1.14 响应式布局——@media
media查询：当屏幕宽度满足特定条件时应用css（例子见如下代码），其目的是针对网站可能会跑在很多设备上的情况进行多端设计
@media(min-width: 768px) {
.container {
width: 960px;
background-color: lightblue;
}
}
这表明只要屏幕的宽度不小于768px，即按照该样式进行渲染
测试响应式布局是否成功的手段：F12+
Bootstrap的布局：
- 定义多个方式：xs（超小），sm（小），md（中等），lg（大），xl（超大）；目的是为了进行响应式布局，同时可以设置每种情况的大小，如xs-6（一行是12个单位）
- boostrap框架是别人已经帮我们实现好的css包和js包，可以直接调用
注意事项
垂直居中：height=16px;line-height=16px 水平居中：margin:0,auto
参考文献
Web应用课 ↩︎
