css学习

文字超出就用……表示

p {

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

行高

        line-height，表示的就是文字的上面和下面加上文字本身的高度就等于line-height的高度，文字本身的高度用font-size来设置的，font-size会比line-height设置的大小往下靠，所以font-size的大小不要和line-height的大小一样。line-height会继承父类的line-height如果行高为0的话，那么背景色会消失。height高度配合line-height使用，且height大于line-height。

        line-height的应用场景：1.用于调整多行文字之间的间距（line-height：1.5）；2.用于调整单行文字的垂直居中（line-height == height）

vertical-align

        指定行内、行内块元素垂直对齐的方式，默认的基线对齐的

列表

        list-style-type：none表示去除列表中前面的黑点；list-style-position：inside表示前面的列表符号是和文字在一个div中还是分开的。ul有一个默认的左边padding，所以要去掉padding-left：0

背景颜色

        background-color：transparent表示背景是透明色。小图片背景不够就是变多，大图片放不下就会呈现部分；background-position：left表示用于控制图片的位置。

修改元素的显示模式

        display：inline-block表示转化为行内块样式；display：none表示不显示内容

处理溢出

        overflow：auto表示出现溢出就出现滚动条；overflow：hidden表示溢出就隐藏

margin塌陷

        当我们在第一个子盒子中使用margin-top：xxpx的时候，意思是让子盒子相对于在父盒子中往下移动xxpx，但是这个时候却不是，而是整个父盒子往下移动了xxpx。解决办法就是找到父盒子使用overflow：hidden。

布局小技巧

        1.行内元素、行内块元素可以被父元素当作文本处理。

        2.如何让子元素在父类中水平居中

                若子元素为块，给子元素加上：margin：0 auto

                若子元素为行内、行内块元素，给父元素加上：text-align：center

        3.如何让子元素在父类中垂直居中

                若子元素为块，给子元素加上：margin-top：（父高-子高）/ 2，给父加上overflow：               hidden

                若子元素为行内、行内块，让父类height = line-height，并给每个子元素加上vertical-                align：middle，给父类加上font-size：0

解决元素之间的空白问题

        给父元素设置font-size：0，然后再到子元素中单独设置字体大小。

解决文字下面的空白问题

        给行内、行内块元素加上vertical-align：top等

浮动

        浮动有左浮动和右浮动，不管是块、行元素，只要浮动之后会脱离文档流，并且宽高是被内容撑开的，但是也能设置宽高、magin元素；不会独占一行；不会像行内块一样被当作文本处理。

        浮动之后下面的元素会替代浮动元素的位置，而浮动的元素在该元素的上面，但是不会遮住文字，因为浮动原来的设计就是用来实现文字的环绕。

        设置浮动之后，父元素没有高度了；因为浮动了所以对于后面的元素产生影响。

        解决浮动产生的影响：.clearfix::after{content:"";display:block;clear:both;}

定位

        relative：相对定位-->top等属性相对于自己原来的位置动多少，但是原先的位置不能让其他的元素占领，并没有脱离文档流，适合使用在微调的地方。

        absolute：绝对定位-->一旦开启绝对定位，那么就会脱离文档流，并且绝对定位的下面的元素往上走的时候，文字也会跟着走。这里的top等属性参考的是relative父元素，如果父元素都没有relative，则参考的是网页窗口。

        fixed：固定定位-->top等属性只根据窗口的大小来固定位置，固定定位的大小由内容撑开，但是也能重新设置宽高。

        sticky：粘性定位-->

        以上left和right不能同时写。

        z-index：有定位才能有这个属性，表示各个元素的层级，越大层级越高。

        定位不会受到padding和margin的影响。定位之后使用left：0；right：0表示和父类一样的宽度，top：0；bottom：0表示和父类一样的高度。所有全为0，再使用margin：auto表示子元素在父元素中居中对齐。

布局

        body不给宽，里面的子盒子给宽度为960-1200这个盒子为版心。一般一个区域一个版心。

 垂直方向实现划分对齐

        {

        display: flex;

        flex-direction: column;

        align-items: center;

        }

水平方向实现划分

    {

    display: flex;

    justify-content: space-around;

    align-items: center;

     }

div中的文字水平垂直居中

div{

display: flex;

  // 垂直居中

  align-items: center;

  // 水平居中

  justify-content: center;

}