字体属性
font-family（字体系列）
- font-family写多个字体系列
- 有空格的用"",如"Microsoft Yahei"
- 字体相关样式全写到body里
body {
font-family:;
...
}
font-size
- 谷歌浏览器默认文字大小为16px
- 不同浏览器可能默认显示字号不同，尽量指定明确值大小
font-weight（粗细）
- 属性值常用数字
- nomal为400
- bold为700
font-style(文字风格)
- normal
- italic
复合属性
- 不能颠倒顺序，空格隔开
- 必须保留font-size和font-family属性
body {
font:font-style font-weight font-size/line-height font-family;
}
文本属性
文本颜色color
对齐文本text-align
- 对图片不起作用，除非把图片包括在父元素里
装饰文本text-decoration
- 给文本画一条线
缩进text-indent
- 一般用em做单位，em是一个相对单位，就是当前元素1个文字的大小
text-indent: 2em;
缩进2个字的距离
行间距line-height
- 控制文字行与行之间的距离
Emmet语法
快速生成HTML结构语法
- 生成标签 直接输入标签名 按tab
- 生成多个相同标签，加上*，如div*3生成3个div
- 有父子级关系的标签，用>,如ul>li
- 有兄弟关系的标签，用+，如div+span
- 生成带有类名或者id名的，直接写.demo或者#two
- 生成的div 类名时有顺序的，可以用自增符号$
- 想要在生成的标签内部写内容用{}
快速格式化代码
- Vscode 快速格式化代码：shift+alt+f
选择器
基础选择器
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
复合选择器
由多个选择器通过不同的方式组合在一起而成
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
后代选择器
<ol>
<li></li>
...
</ol>
<ul>
<li></li>
...
</ul>
选择ol的li
ol li {
...
}
子选择器
选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
选择第一个a标签
.nav>a {
...
}
…
背景
背景图片位置background-position
参数是方位名词：
- 如果两个值都是方位名词，则两个值前后顺序无关
- 如果只指定一个方位名词，另一个省略，则第二个值默认居中对齐
参数是精确单位：
- 如果两个值都是精确单位，则第一个值是x坐标,第二个值是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
参数是混合单位：
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
背景图像固定background-attachment
- 设置背景图像是否固定或者随着页面的其余部分滚动
- 后期可以制作视差滚动的效果
- scroll/fixed
背景属性复合写法
- 没有顺序规定，但一般习惯定顺序为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚顶 背景图片位置;
背景色半透明
background: rgba(0,0,0,0.3);
等价于
background: rgba(0,0,0,.3);
- 最后一个参数是alpha透明度,取值范围是0（完全透明）-1（完全不透明）
- 习惯把0.3省略成.3
CSS 三大特性
层叠性
继承性
- text-,font-,line-这些元素开头的可以继承以及color属性
行高的继承性：
body {
font: 12px/24px Microsoft YaHei;
font: 12px/1.5 Microsoft YaHei;
}
- 行高可以有单位也可以没有单位
- 如果子元素没有设置行高，就会继承父元素的行高1.5，则子元素的行高是: 当前子元素的文字大小 * 1.5
- body 行高1.5 这样写法最大的优点就是里面子元素可以根据自己文字大小自动调整行高
优先级
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
注意： - 直接定义的样式比继承的样式权重高，无论继承的样式权重多高（继承的权重为0）
<body>
<div>粉红色的回忆</div>
<p>粉红色的回忆</p>
<ul>
<li>粉红色的回忆</li>
</ul>
</body>
body {
color: red !important;
}
li {
color: pink;
}
- 复合选择器会有权重叠加，需要计算权重
盒子模型
边框
简写没有顺序
border: border-width border-style border-color;
border-style
- solid
- dashed
- dotted
…
内边距padding
…
- 盒子本身没有指定width/height属性，padding不会撑开盒子大小。
外边距margin
让块级盒子水平居中，必须满足两个条件：
- 盒子必须指定宽度
- 盒子左右的外边距都设置为auto
margin: 0 auto;
让行内元素或者行内块元素水平居中:
- 给其父亲添加text-align:center;
外边距合并
相邻块元素垂直外边距的合并：
当上下相邻的两个块元素(兄弟关系)相遇时，入股上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直间距取两个值的最大值
解决方法：尽量只给一个盒子margin值
嵌套块元素的垂直外边距的塌陷：
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方法：
- 可以为父元素定义上边框
- 可以为父元素定义上内边框
- 可以为父元素台南佳overflow:hidden;
布局
标准流
浮动
为什么需要浮动
- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
浮动特性
浮动元素会脱离标准流
- 脱离标准普通流的控制（浮），移动到指定位置（动）
- 浮动的盒子不再保留原先的位置
浮动的元素会一行内显示并且元素顶部对齐
- 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下去这些浮动的盒子，多出来的盒子会另起一行对齐。
浮动的元素会具有行内块元素的特性
行内元素有了浮动，则不需要转换成块级/行内块元素就可以给高度和宽度
浮动元素经常和标准流父级搭配使用
- 现有标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
8338
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
