css回顾

一、包含选择器

1、父子选择器（通过父元素选择子元素，只能往下选择器一层，只能是父子，不能隔层）

父元素>子元素

2、后代选择器（只要满足包裹关系都能选中）

祖先 后代

二、伪类选择器

a:link 访问前的样式

a:visited 访问后的样式

a:hover 鼠标移入的样式（所有标签都能设置）

a:active 鼠标激活后的样式（所有标签都能设置）

如果想要伪类选择器都生效，一定要按照以上顺序，LVHA

三、字体属性

1、浏览器默认的字体中文是宋体或是新宋体，英文是Arial，大小为16px，默认粗细为500

2、font-size：pt一般用于印刷领域，网页不用。pt ：px = 3 ：4。em 相对的单位（相对于父元素的font-size），首行缩进用em。

3、font-family：字体样式。

4、color：字体颜色。rgba可以设置透明度，透明度（0-1），可以设置小数。

 5、font-weight：加粗，blod和bloder效果差不多，normal取消加粗，还可以用数值，900最粗

6、font-style：倾斜:italic;更倾斜:oblique；normal:取消倾斜

7、font-variant：小型大写字母，normal:默认值；small-caps:小型大写字母（把小写字母强制转换为大写字母，但是比大写字母小一号）

8、简写：font:倾斜 加粗 小型大写字母 font-size font-family （最后两个属性必须都存在且必须是这个顺序）

四、文本属性

1、文本的对齐方式：text-aligin

justify：两端对齐

left：左对齐

right：右对齐

center：水平居中

2、块元素和内联元素

块元素

（1）上下排列，独占一行，可以自动换行

（2）可以设置宽高属性

（3）块元素嵌套可以包裹块元素和内联元素，但是又个别标签比较特殊（p，h1~h6，dt）尽量只包裹内联元素

内联元素

（1）左右显示，一行显示多个，不会自动换行

（2）内联元素无法设置宽高，大小由内容撑开

（3）内联元素只能嵌套内联元素

3、行高line-height

（1）设置行间距

（2）可以内容清除自带的行高（12px一下的可以不清除行高）

（3）可以使单行文本垂直居中（行高值等于高度值）

4、设置内容大小写转换：text-transform

none：默认值，没效果

uppercase：大写字母

lowercase：小写字母

 capitalize：首字母大写

5、线条修饰：text-decoration

none：取消线条

underline：下线条

overline：上划线

line-through：删除线

6、首行缩进：text-indent

text-indent:2em

7、字间距 ：letter-spacing，px，字与字之间的间距

8、词间距：word-spacing，px，英文单词的内容（主要设置的就是空格）

五、列表属性，列表自带间距

1、list-style-type：

disc：默认值，实心圆

circle：空心圆

square：实心方块

none：取消

简写：list-style：none

六、浮动

1、浮动可以让块元素水平排列

float：left/right/none

浮动元素会脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠

2、清除浮动：

（1）clear：left/right/both

清除浮动只能往上清除，给受影响的盒子清除浮动

会受浮动影响的是兄弟关系，所以也可以利用这个清除浮动

（2）不是同一层的元素不受浮动影响

七、背景图片

1、背景图片的位置

background-position

（1）水平位置：left/right/center

（2）垂直位置：top/center/bottom

2、背景图片是否固定：

background-accachment：

fixed：固定

scroll：滚动，默认值

3、背景大小

background-size:400px 400px;

4、背景简写

background：背景颜色 路径 平铺方式 位置/大小（位置/大小这两个顺序严格要求）

八、盒子模型

1、添加padding内边距，盒子会变形，会将盒子撑大，想要盒子不变形，需要将盒子的宽或者高减去内边距相应的像素值；padding不可以设置负值

2、两个盒子都设置外边距的话，上下会重叠，左右不会重叠，左右外边距相加

3、margin-top的传递问题，父元素下的第一个子元素设置margin-top，这个margin-top值会传递给父元素

解决：（1）给父元素加边框

（2）给父元素添加overflow:hidden，但是触发了BFC，会隐藏超出的内容；用这个方式用的比较多

（3）给父元素添加内边距

（4）给父元素加浮动，不推荐

（5）给子元素加浮动，不推荐

4、设置块元素水平居中，但是如果设置内容浮动了，auto就不起作用了

margin：0 auto

5、input，type：submit时，盒子高度包含边框线

6、内联元素不识别上下的外边距、内边距，只识别左右的外边距、内边距。

7、浮动会改变内联元素的特性，宽高可以设置，四个方向的内外边距也能设置，具备块元素的某些特性。

8、块元素没有宽度，一般块元素的宽度是100%，但是设置float后，块元素的宽的和内联元素一样由内容撑开。

九、属性番外篇

1、vertical-align: middle;（top/bottom/middle）

内容垂直居中，但是有局限性。

（1）元素类型需要转换成表格类型，display:table-cell，但是针对图片不太好用；内容和内容盒子都需要设置vertical-align: middle

（2）给图片添加高度为100%的参照物，<span></span>，span高为100%，类型转换为行内块元素；内容必须是行内块元素；

2、文字超出用省略号

（1）设置宽度

（2）white-space：pre；强制内容不换行

pre：强制内容不换行，多个空格可以识别。

nowrap：强制内容不换行，只能识别一个空格。

normal：默认值，浏览器默认效果（自动换行，空格只能识别一个）。

pre-wrap：自动换行，多个空格可以识别。

pre-line：跟normal一样（自动换行，空格只能识别一个，但是可以识别换行）

（3）overflow：hidden；超出内容隐藏；

（4）把隐藏的内容设置为省略号

text-overflow:ellipsis;

 3、元素溢出内容设置：overflow

visible：默认值

hidden：溢出隐藏

auto：溢出内容转换滚动条

scrool：溢出内容转换滚动条（内容没有超出也会显示滚动条的边框）

overflow-x和overflow-y属性值和上面的一样，单独设置x轴或是y轴值为hidden，另一个值会出现滚动条。

4、设置隐藏的内容：text-overflow

clip：裁剪隐藏的内容，默认值

ellipsis：设置隐藏的内容为省略号

5、多行文本溢出隐藏（兼容性不好，使用不灵活，一般使用js设置），移动端可能会使用，因为移动端的浏览器一般都是最新版本

（1）转换属性

display：-webkit-box；转换为弹性盒（旧属性值），必用属性

-webkit-box-orient：verticle；必用属性，设置盒子的排列方式，垂直排列方式。

-webkit-line-ciamp：3；显示的行数

overflow：hidden；

 6、设置内容垂直居中

vertical-aligin：设置内容垂直居中

top：顶部对齐

bottom：底部对齐

middle：垂直居中

设置方法有两种

第一种：对图片不管用，且设置的元素的宽高是会失效，子元素的宽高默认父元素的宽高，所以不推荐使用。

父元素：display：table（父元素转换成表格形式，但是也是块元素）

子元素：display:table-cell；vertical-align：middle

第二种

子元素：display：inline-block；vertical-aligin：middle；

有参照物span：display：inline-block；vertical-aligin：middle；height：100%；

优势：不管是盒子还是图片都很好用。

 十、定位

1、position有5种定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

sticky：粘性定位

static：取消定位

inherit：继承定位（继承父元素的position值，不常用）

2、定位元素可以出发5个属性

4个方向：left、right、top、bottom

1个层级关系 ：z-index

z-index设置内容层级关系，值越大，层级越高；z-index只能设置整数；定位默认层级数，设置的盒子定位越靠后，层级越高（按先后顺序依次递增）

3、相对定位：

position：relative

（1）相对定位可以使用出发的5个属性

（2）相对定位是在自己的原位置上移动

（3）相对定位的元素是占位的，没有脱离文档流

4、绝对定位

position：absolute

绝对定位的元素脱离文档流（绝对定位的元素不占位）

绝对定位位置移动，首先先找有定位的父元素（定位的父元素当做参照物），

如果有就根据父元素的范围位置移动，如果没有就以浏览器窗口当做位置移动的参照物。

以父元素为参照物，给父元素添加相对定位。

5、固定定位

position:fixed；

（1）固定定位可以使用出发的5个属性

（2）固定定位始终以浏览器窗口为位置移动的参照物

（3）固定定位脱离文档流（固定定位的元素不占位）

 锚点：网页的内部跳转（只能用id设置）

<a href="#box1"></a>

<div id="box1"></div>

（4）设置内容固定在网页水平垂直居中

第一种方式：

position：fixed

left：50%；

top：50%；

margin-left：-（盒子的宽度%2）

margin-top：-（盒子的高度%2）

第二种方式：

position：fixed

left：0；

right：0；

top：0；

bottom：0；

margin：auto；

（5）中心放大

左边移动的距离=-（放大后的宽度-放大前的宽度）/2

上边移动的距离=-（放大后的高度-放大前的高度）/2

6、粘性定位(IE兼容性不好)

position：sticky；

可以看做相对定位和固定定位的结合体。

（一般情况下有滚动条滑动内容，内容时占位的，如果滚动条滑动内容，黏性定位的元素就会有固定定位的效果，方向top才管用）

注意点：

（1）使用的时候需要设置left、top、bottom、right值，才有固定定位的效果

（2）避免父元素使用overflower属性

（3）兼容性不好，pc端做ie兼容不考虑用这个

7、取消定位

position：static；

取消定位不可使用方向

十一、伪类选择器扩展

nth-child

nth-last-child

first-child

last-child

only-child（不常用，同级只有一个元素）

first-of-type

last-of-type

nth-of-ype

nth-last-of-type

only-of-type不常用，同级只有一个元素）

target：必须和锚一起使用才有效果

 

<a href="#box1">111</a>
    <a href="#box2">222</a>
    <a href="#box3">333</a>
    <p id="box1">box11111</p>
    <p id="box2">box22222</p>
    <p id="box3">box33333</p>

p:target {
            background-color: darkkhaki;
        }