文章目录
1. css的三种引入方式
-
行内样式
<span style="color: red;">我变色了</span> -
内嵌样式
<head> <style> /* 我可以写样式 */ </style> </head> -
外联样式
<!-- rel：表示引入的文件类型 stylesheet：层叠样式表 href：链接路径 --> <link rel='stylescheet' href="style.css">
2. 三种注释
<html>
<!-- 我是HTML注释 -->
</html>
<style>
/* 我是css注释 */
</style>
<script>
// 我是javascript注释
</script>
3. css选择器
- 普通选择器
- 标签选择器
- 类名选择器
- id选择器(同一页面，同一id值，只能出现一次，要遵循这个原则)
- 通配符选择器(会影响性能)
- 复合选择器
- 后代选择器，
div span - 子代选择器，
div > span - 兄弟选择器（都是只能选择后面的兄弟），
div + span（相邻的兄弟）、div ~ span（后面的所有兄弟） - 交集选择器(
p.text—只选择class类名为text的标签，或者.box.bo1当前元素类名必须包涵 box bo1) - 并集选择器，
div,span - 伪类选择器
- 链接伪类选择器(爱恨法则：love hate) – 其他标签也可以使用 hover active
- link：未访问(没有被点击过)
- visited：已访问(被点击以后)
- hover：鼠标移入(鼠标移上去)
- active：选定(鼠标按住)
- 链接伪类选择器(爱恨法则：love hate) – 其他标签也可以使用 hover active
- 后代选择器，
- 属性选择器(
css3新增)- [属性]
- [属性=属性值]
- [属性^=‘
abc’] (匹配属性值以abc开头) - [属性$=‘
abc’] (匹配属性值以abc结尾) - [属性*=‘
abc’] (匹配属性值包涵abc三个相邻单词) - [属性~=‘
abc’] (匹配属性值包涵abc三个相邻单词，并且不能和其他相连) - [属性|=‘
abc’] (匹配属性值包涵abc三个相邻单词，并且只能以 - 相连)
4. css样式
4.1 font
-
font-size
可以设置px和em，em是相对单位先根据自己font-size的px，如果没有往父级找，如果还没有一直往上层找
-
font-family
<!-- 设置文字字体 --> <style> @font-face{ font-family:'自定义名称'; src:url(路径); } span{ font-family: 自定义名称/电脑自带字体,多个字体文字字体,更多个字体文字字体; } </style> -
font-weight
字体粗体 属性 100~300 变细 lighter 400~500 默认 normal 600~900 加粗 bold -
font-style
字体是否倾斜：倾斜 italic 默认 normal
-
font-variant
字体大小写，突出效果展示
-
font综合
属性顺序 font-style font-variant font-weight font-size font-family
4.2 color 文本颜色
颜色单词，十六进制，rgb
4.3 text-indent 首行缩进
4.4 text-decoration 文本装饰(a标签默认underline)
5. 标签的显示模式 display
5.1 块级元素 block
- 独占父元素的一行
- 可以随意设置宽高
- 高度默认由内容决定
5.2 行内元素 inline
- 跟其他行内元素在同一行显示
- 不可以随意设置宽高
- 宽高由内容决定
- 设置padding、margin时的特征
- padding可以设置，但是上下padding不会影响其他元素的摆放
- margin可以设置左右，不能设置上下
5.3 行内块元素 inline-block
- 跟其他行内元素在同一行显示
- 可以随意设置宽高
- 高度默认由内容决定
- 行内块之间有间隙的问题，因为行内块具有行盒的特征会带有一个空格
- 给父盒子设置font-size为0
- 不给标签换行
6. background背景
-
background-color
背景颜色
-
background-image
- 背景图片
- 线性渐变：linear-gradient()
-
background-repeat
设置背景图片平铺模式(重复图片平铺满)
-
background-position
设置背景图片的摆放位置( x,y )，可以设置top、center、bottom
-
background-attachment
背景附着，默认：scroll，附着：fixed，local：跟随元素内容附着
-
background-size(
css3)- 单位：长度 | 百分比 | cover | contain
- cover：最短边填充内容(裁剪)
- contain：最长边填充内容(留白)
-
background-origin(
css3)背景起源，border-box(默认)、padding-box、content-box，从这些地方开始
-
background-clip(
css3)背景裁剪，border-box(默认)、padding-box、content-box，从border-box裁剪到对应的box
-
顺序可以随便写，不像font一样
7. css三大特性
-
优先级
!important > 行内样式 > id > 类、伪类，属性 > 标签选择器 > 继承、*
-
继承
以 text、font、line开头的和color都可以继承
-
层叠
优先级相同的情况下，下面的样式会层叠到上面冲突的样式
8. 盒模型
8.1 标准盒模型
- 内容 (content)
- 内边距 (padding) 简写 上右下左
- 边框 (border)
solid实线dashed虚线dotted点线
- 外边距 (margin)
8.2 标准盒模型大小
content+padding+border+margin
width = content
8.3 怪异盒模型
默认为box-sizing: border-box;
width = content+padding+border
9. 行内元素和行内块元素对齐方式
- text-align — 给父元素设置(也可以偷偷的给自己设置)
- left：左对齐
- center：居中
- right：右对齐
- line-height — 给父元素设置(也可以偷偷的给自己设置)
- 单行文本与文本之间的间距，上一个文本的基线到下一个文本的基线
- 当行高大于高度时，文本居下展示
- 当行高等于高度时，文本居中
- 当行高小于高度时，文本居上展示
- 当行高等于0时，中线与高度顶部对齐
- vertical-align — 给行内块元素设置(行内块元素和行内元素排列时会有问题)
- top：顶线对齐
- middle：中线对齐
- baseline：基线对齐
- bottom：底线对齐
10. 文本居中、盒子居中、行内块居中
- 文本居中、行内块：text-align: center;
- 盒子居中：margin: auto;
11. 外边距问题(只有上下才会有问题)
- 外边距合并，取最大的外边距，解决
- 只给一个盒子设置外边距
- 外边距塌陷，盒子套盒子，解决
- 给父盒子加边框
- 在子盒子之前加内容
- 给父元素设置 overflow: hidden;
- 不给子盒子设margin，设padding(padding会增大盒子)
- 给父盒子或子盒子设置浮动
- 给父盒子或子盒子设置定位
12. overflow 溢出
-
visible：默认的
-
hidden：溢出隐藏
-
scroll：允许滚动(设置就会有滚动样式出现，内容超出可以滚动)
-
auto：自适应滚动(内容超出滚动，不超不滚动)
2050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
