这篇博客详细介绍了CSS的基础知识，包括概念、语法、创建方式、常用属性和选择器，以及链接伪类、盒子模型、定位和隐藏元素的方法。内容涵盖了背景、文本、字体、列表、表格、边框等属性，还探讨了浮动和定位机制，以及两种隐藏元素的技巧。文章适合初学者和需要巩固CSS知识的开发者阅读。
一、概念
CSS 指层叠样式表 (Cascading Style Sheets)，html负责网页的内容，CSS则负责网页的表现
二、CSS语法
选择器1 {
属性1：值；
属性2：值；
}
三、CSS创建方式（3种）
1、外部样式
在head内插入link标签：
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2、内部样式
在head内插入style标签：
<head>
<style>
hr {
color:sienna;
}
.footer {
margin-left:20px;
}
</style>
</head>
3、内联样式
使用style属性：<p style="color:pink; margin-left:20px">这是一个段落。</p>
四、一些常用的CSS属性:background、text、font、列表、table、border、outline、margin、padding、overflow
1、背景属性（6个）background:color、image、repeat、attachment、position
1、背景颜色：background-color三种颜色书写方式
#fff、rbg(0,0,0)、red;
2、背景图像：background-imgae
url("./xx.jpg"); 背景图片覆盖背景颜色，如红色的桌面上盖上一个台布
3、背景平铺：background-repeat
repeat-x、repeat-y、no-repeat
4、背景图像定位：background-position，通常搭配no-repeat属性值使用
10px 10px;
left、center、right top、center、bottom
5、背景图像固定：background-attachment
默认值为scroll，常用fiex固定
6、背景简写顺序：color、image、repeat、attachment、position
2、文本属性text：color、text-align、text-transform、text-indent、line-height、vertical-align、white-space、word-spacing
1、文字颜色：color
2、文本对齐方式：text-align
left、right、center、justify（根据浏览器宽度调整文本左右间距）
3、文本修饰：text-decoration
none 主要去除下划线
4、文本转换：text-transform
uppercase、lowercase、capitalize 大小写，首字母大写
5、文本缩进：text-indent
1px、2em
6、行高：line-hight
1px
7、竖直对齐：vertical-align
baseline、top、bottom，通常在img使用
8、处理标签内部空白：white-space
normal忽略、pre类似pre标签、nowrap不换行
9、设置文字间距：word-spacing
10px
3、字体属性font：font-family、font-style、font-size、font-weight
1、字体font-family
"宋体",“微软雅黑” 用逗号隔开，浏览器会采用最左边且浏览器能够识别的字体
2、字体样式font-style
normal、italic 正直、斜体
3、字体大小font-size
1px or 1em or 100% 1em代表继承父标签内设的文字大小
4、字体粗细font-weight
100-900 or nomal400、bold700
4、列表属性：ul、ol
list-style
通常设置list-style = "none"，其中列表项标记有多种应用类型（圆点、小正方体黑块等等）和自定义图片
5、表格属性：table：宽高、border-collapse、padding、cell-spacing
默认没有边框，table需要自己设置边框
1、width height高宽设置
2、border-collapse：collapse 内边框合并
3、padding设置表格单元内边距
4、cell-spacing设置单元格外边距
6、边框属性：border：border-width、border-style、border-color
1、border-style：dotted、dashed、solid——点、虚线、实线边框，还有更多样式……
2、border-width：1px——设置边框的宽度
3、border-color：3种书写颜色的方式
4、每个边框的设置：border-left、right、top、bottom
5、边框简写：border：5px solid red——宽度、样式、颜色
6、用边框画一个三角形：创建一个盒子不设宽高，分别用四种颜色设置四条边框，如：
border-left： 100px solid red
7、外边框属性：outline
与border类似，简写为outline = 1px solid red
8、外边距属性：margin
1、1px or 1em or 100%、auto为居中
2、简写——100px上下 200px左右；上 右 下 左；上 左右 下；
3、分别设置单侧外边距margin-left、……
9、内边距属性：padding
与margin属性书写相似
10、内容溢出属性：overflow
visible默认、hidden隐藏、scroll加滚轮、auto自动溢出则加滚轮
六、标签a链接伪类：link、visited、hover、active（LVHA)
1、未被访问的过时的样式：a:link{}
2、已访问过的样式：a:visited{}
3、鼠标放在链接上的样式：a:hover{}
4、链接被点击的样式：a:active{}
注意书写顺序：link、visited、hover、active，即先设置访问状态再到鼠标放上去到点击时候的状态
七、 盒子模型：盒子大小=content+padding+border
盒子大小包括content内容、padding内边距、border边框宽度。如果设置了一个固定大小的盒子，再设置内边距和边框宽度，盒子大小将发生变化，因为content大小是不变的。
八、选择器符号：分组(,)、后代(空格)、子元素(>)、相邻兄弟(+)、后兄弟（~）、属性选择器([~=])
1、分组选择符：h1,#box1,.box{}——用逗号隔开
2、后代选择符：div p{}——div所有p子元素
3、子元素选择符：div>p——div的儿子p元素
4、相邻兄弟选择符：div+p——div下一个兄弟p元素
5、后续兄弟选择符：div~p——在div下面同辈的所有p元素
6、属性选择符：[name]——选择所有包含name属性的元素；[name="ss"]——选择所有name属性值为ss的元素，且该属性只有ss一个值；[name~="ss"]——选择name多个属性值中有ss的元素。通常配合配合input标签使用：input[type="text|]
九、伪类选择器
1、一些表单元素伪类选择器
1、:checked——选择被选中的表单元素
2、:disabled——选择所有被禁用的表单元素
3、:enabled——选择被启用的表单元素
2、一些伪类元素选择器
1、p:empty——选择p元素内没有后代的元素
2、p:first-chlid——满足两个条件：1.必须是第一个元素 2.必须是p元素
3、p:last-child——满足两个条件：1.必须是最后一个元素 2.必须是p元素
4、p:nth-child(n)——满足两个条件：1.必须是第n个元素 2.必须是p元素；
以上三个都需要同时满足两个条件，有点鸡肋
5、p:first-of-type——选择第一个p元素
6、p:last-of-type——选择最后一个p元素
7、p:nth-of-type(2)——第二个p元素
十、两种隐藏元素的方式
1、display
none——会隐藏元素，隐藏后不占据位置
其他设值：block、inline、inline-block——将该元素设置为块元素、行元素、行内块元素
2、visibility
hidden——会隐藏元素，隐藏后该元素依然会占据位置
十一、浮动
浮动效果：浮动的元素只能左右移动，浮动元素只有遇到另一个元素的边框才会停止。
1、设置浮动的元素将变成块级元素
2、float：left、right
3、清除浮动——clear：both、left、right——设置清除浮动的元素，该元素左右一边or两边不允许出现浮动元素
十二、定位（5种）：position
1、static——默认值，没有定位，正常文档流
2、fixed——固定定位，滚动窗口不移动
3、relative——相对定位，根据原来位置进行移动，元素原来位置会保留
4、absolute——绝对定位，根据其最近已经定位的父元素移动，如果父元素没有定位则根据整个网页进行移动，通常是设置父元素相对定位，子元素绝对定位（）
5、sticky——粘性定位（概念看不懂，以后补充）
十二、零散知识点
盒子想要水平居中对齐，必须要设置宽度之后使用margin：auto才会生效
需要加强的知识点：
1、粘性定位sticky
注：该文章内容参考MDN文档和菜鸟教程官方网站菜鸟教程 - 学的不仅是技术，更是梦想！并且结合自己的理解所作出，主要为了提升自学效果和方便以后复习，内容仅供参考。如有不当之处，望指正！么么哒！
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
