CSS2
选择器
交集选择器 选择器1选择器2选择器3…选择器n {} 同时满足才生效
并集选择器 选择器1, 选择器2, 选择器3, … 选择器n {} 有一个满足就生效
-
后代选择器 选择器1 选择器2 选择器3 … 选择器n {}
-
子代选择器 选择器1 > 选择器2 > 选择器3 > … 选择器n {}
-
兄弟选择器紧挨着下一个 (相邻兄弟选择器) 选择器1+选择器2 {}; (通用兄弟选择器) 选择器1~选择器2 {}
-
伪类选择器
动态伪类: (1. :link 超链接未被访问的状态。 2. :visited 超链接访问过的状态。 3. :hover 鼠标悬停在元素上的状态。 4. :active 元素激活的状态。5. :focus 获取焦点的元素) 注意:只有a标签才有link和visited伪类 表单元素才能使用focus元素
结构伪类: 1. :first-child 所有兄弟元素中的第一个。 2. :last-child 所有兄弟元素中的最后一个。 3. :nth-child(n) 所有兄弟元素中的第 n 个。 4. :first-of-type 所有同类型兄弟元素中的第一个。 5. :last-of-type 所有同类型兄弟元素中的最后一个。 6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
否定伪类 :not(选择器) 排除满足括号中条件的元素。
- :checked 被选中的复选框或单选按钮。 2. :enable 可用的表单元素（没有 disabled 属性）。 3. :disabled 不可用的表单元素（有 disabled 属性）。
-
伪元素选择器
::first-letter 选中元素中的第一个文字。 ::first-line 选中元素中的第一行文字。 ::selection 选中被鼠标选中的内容。 ::placeholder 选中输入框的提示文字。 ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。 ::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。
颜色
color:rgba(红,绿,蓝,透明度),rgb(0~255),a(0-1)
字体属性
字体大小 font-size
字体族 font-family
字体风格 font-style
文本属性
字体粗细 font-weight
文本修饰 text-decoration:(none/underline/overline/line-through) (dotted虚线 /wavy波浪线)
文本缩进 text-indent
文本水平对齐 text-align;(right/left/center)
行高 line-height 注意:对于单行文字,height = line-height 文本居中
列表属性
设置列表符号 list-style-type:(decimal)
自定义列表符号 list-style-image:url(图片地址)
设置列表符号的位置 list-style-position:inside/outside
表格属性
边框相关属性border 边框宽度border-width; 边框颜色 border-color; 边框风格 border-style(solid实线,dashed虚线,dotted点线,double双实线)
表格独有属性table 单元格间距border-spacing 合并单元格边框border-collapse(collapse) 设置列宽度table-layout(fixed)
背景属性
设置背景颜色background-color
设置背景图片background-image:url(图片地址)
设置背景重复方式background-repeat:(no-repeat/repeat)
设置背景图位置background-position
设置背景图片大小background-size(cover)
鼠标属性
设置鼠标光标的样式 cursor:(pointer)
常用的长度单位
px
em 当前font-size的px倍数
rem 相当于根元素(html)的font-size的px倍数
% 相当于其父元素的百分比
元素的显示模式
块级元素:可以设置宽高
1. 主体结构标签： <html> 、 <body>
2. 排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
3. 列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
4. 表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、
<caption>
5. <form> 与 <option>
行内元素:无法设置宽高
1. 文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
2. <a> 与 <label>
行内块元素:可以设置宽高
1. 图片： <img>
2. 单元格： <td> 、 <th>
3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button>
4. 框架标签： <iframe>
修改元素的显示模式 display:(none/block/inline/inline-block)
盒子模型
1.盒子的大小 = content(width,height) + 左右 padding + 左右 border ,margin不影响盒子大小,但影响位置
2.margin塌陷问题:第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
解决方法: 方案一： 给父元素设置不为 0 的 padding 。 方案二： 给父元素设置宽度不为 0 的 border 。 方案三：给父元素设置 css 样式 overflow:hidden
3.margin 合并问题: 上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
4.内容溢出:处理方式 overflow:(hidden/auto/scroll)
5.隐藏元素的方式: visibility:(show/hidden),display:none
6.样式的继承 会继承的属性(字体属性,文本属性,文字颜色);不能继承的属性(和盒子模型有关的,包括宽高,边框,内外边距,背景,溢出方式)
7.布局小技巧
1. 行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。
2. 如何让子元素，在父亲中 水平居中：
若子元素为块元素，给父元素加上： margin:0 auto; 。
若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
3. 如何让子元素，在父亲中 垂直居中：
若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子
总高) / 2。
若子元素为行内元素、行内块元素：
让父元素的 height = line-height ，每个子元素都加上： verticalalign:middle; 。
补充：若想绝对垂直居中，父元素 font-size 设置为 0 。
8.元素之间的空白问题
1.行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符:
给父元素设置 font-size:0 ，再给需要显示文字的元素，单独设置字体大小（推荐）。
2.行内块的幽灵空白问题:行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的
方案一： 给行行内块设置 vertical ，值不为 baseline 即可，设置为 middel 、 bottom 、top 均可。
方案二： 若父元素中只有一张图片，设置图片为 display:block 。
方案三： 给父元素设置 font-size: 0 。如果该行内块内部还有文本，则需单独设置 font-size 。
浮动
1.特点:不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。
解决浮动产生的影响（清除浮动） 解决方案：
1. 方案一： 给父元素指定高度。
2. 方案二： 给父元素也设置浮动，带来其他影响。
3. 方案三： 给父元素设置 overflow:hidden 。
4. 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
5. 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。
===> 推荐使用布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
定位
相对定位
相对自己原来的位置, 给元素设置 position:relative 即可实现相对定位。 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
绝对定位
参考它的包含块(子绝父相), 给元素设置 position: absolute 即可实现绝对定位。 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
固定定位
参考它的视口, 给元素设置 position: fixed 即可实现固定定位。 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置
粘性定位
离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先, 给元素设置 position:sticky 即可实现粘性定位。 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。
定位层级
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。可以通过 css 属性 z-index 调整元素的显示层级。z-index 的属性值是数字，没有单位，值越大显示层级越高。
定位的特殊应用
只针对 绝对定位 和 固定定位 的元素,
让定位元素的宽充满包含块:
- 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。 2. 高度想与包含块一致， top 和 bottom 设置为 0 。
让定位元素(该定位的元素必须设置宽高)在包含块中居中:
方案一:left:0; right:0; top:0; bottom:0; margin:auto;
方案二:left: 50%; top: 50%; margin-left: 负的宽度一半; margin-top: 负的高度一半;
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
