css点滴yan

研究下position:relative的实用的地方

换行

多行文本溢出显示省略号

https://www.html.cn/archives/5206/

// 当行文本
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// 多行文本
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

幽灵空白节点

https://blog.csdn.net/azxqwe123/article/details/103319652

原因: 因为 img 标签的基线就是图片的底部，那么一行文字包括当前行内的图片都是基于基线对齐的.。浏览器渲染的空白节点,占据了下边的高度，想办法把空白节点的高度去掉就可以了。
可以line-height,font-size,vertical-algin(图片的)

垂直，水平

1.center,middle,单行文本line-height.
2.margin
3.table-cell
4.position + transform (包含定宽的postion abosolute margin-)
5.flex

css 的垂直居中

(1) margin:auto法
<div> <img src="mm.jpg"> </div>
div{
      
    width: 400px; height: 400px; 
    position: relative; 
    border: 1px solid #465468; 
} 
img{
      
    position: absolute; 
    margin: auto; 
    top: 0; left: 0; right: 0; bottom: 0; 
}
(2) 定高的margin负值法
.container{
      width: 500px; height: 400px; border: 2px solid #379; position: relative; } 
.inner{
      width: 480px; height: 380px; background-color: #746; position: absolute; top: 50%; left: 50%; margin-top: -190px; /*height的一半*/ margin-left: -240px; /*width的一半*/ }
(3) table-cell（未脱离文档流的） 设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中
div{
      width: 300px; height: 300px; border: 3px solid #555; display: table-cell; vertical-align: middle; text-align: center; } 
img{
      vertical-align: middle; }
(4) 利用flex
将父元素设置为display:flex，并且设置align-items:center;justify-content:center;
.container{
      
    width: 300px; height: 200px; border: 3px solid #546461; 
    display: -webkit-flex; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.inner{
      border: 3px solid #458761; padding: 20px; }

css 的水平居中

=============
1、行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 text-align：center；来实现的。如果子元素设置子元素设置inline-block也符合这条。   
=============
2 定宽块状元素(dispaly: block)水平居中（块状元素的width是一个固定值），满足块状和定宽两个条件时，即可通过给自己设置“左右margin为auto”来实现。
> <div style="width: 200px; text-align: center; margin: 0 auto;">定宽块状元素水平居中</div>
=============
3 不定宽块状元素水平居中
> 方法一: text-align: center
<div style="text-align: center;">
     <div style="display: inline;">不定宽块状元素水平居中</div>        
</div>
> 方法二: 利用绝对定位，让元素向右偏移50%，然后再向左偏移自身的50%
<div style="position: absolute; left: 50%; transform: translateX(-50%);">不定宽块状元素水平居中</div>
> 方法三利用flex 父级设置display：flex，+子justify-content：center；
> flex+flex-direction:column;+子align-self:center;
        <div style="display:flex;flex-direction:column;">
            <div style="align-self:center;">asdfaf</div>
        </div>
        
=====  不常用的方法
> 利用flex实现水平居中 flex + margin: 20px auto;
<div style="display: flex;">
   <div style="margin: 20px auto;">不定宽块状元素水平居中</div>
</div>

>  利用flex实现水平居中 CSS3的fit-content配合左右margin为auto实现水平居中方法
<div style="width: fit-content; margin-left: auto; margin-right: auto;">不定宽块状元素水平居中</div>

水平垂直对齐

方法一: text-align + line-height实现单行文本水平垂直居中
.father0 {
      
    width: 500px; height: 200px; background-color: black; 
    line-height: 200px; 
    text-align: center; 
} 
.son0 {
      
    width: 100px; height: 50px; vertical-align: middle; background: forestgreen;
    display: inline-block; 
}
方法二: table-cell+vertical-align: middle;
.parent {
     
   width: 500px;height: 200px;background-color: black;
   display: table-cell;
   vertical-align: middle;
}
.parent .son {
     
   width: 100px;height: 50px;background-color: firebrick;
   margin: 0 auto;
}
 // ps 若子元素是图像，不可使用table-cell，而是其父元素用行高替代高度，且字体大小设为0,子元素本身设置vertical-align:middle
.parent{
      text-align: center; line-height: 100px; /*消除幽灵空白节点的bug*/ font-size: 0; } 
.img{
      vertical-align: middle; }

方法三: 绝对定位
#parent{
      position: relative; } 
#son{
     
     position: absolute; top: 50%; left: 50%; 
    /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/  // 必须知道宽高的时候
    transform: translate(-50%,-50%); // transform兼容性不好(ie9+)
}
// 已知宽高的时候,还可以用margin: auto;
// 已知高度和宽度的元素,设置 top: 0; right: 0; bottom: 0; left: 0; 设置margin： auto的话会无限延伸占满空间并且平分
#parent{
     
    position: relative;
}
#son{
     
    position: absolute;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
 
方法四: flex布局
#parent{
     
    display: flex;
    justify-content: center;
    align-items: center;
}

几种常见的CSS布局 https://juejin.im/post/5bbcd7ff5188255c80668028#heading-4

两列自适应布局方案整理

考虑左边到底是定宽还是不定宽
https://juejin.im/post/5ab991dd5188255585078f7a#heading-4
https://juejin.im/post/5c88838fe51d4572a74287ee#heading-2

两列布局

// 方法1 左float右overflow:hidden; 左float + 右BFC
<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
<style>
.left{
     
	float: left;
	width: 100px;
	margin-right: 20px;    //形成20px的间隔
}
.right{
     
	overflow: hidden; //通过设置overflow: hidden来触发BFC特性
}
</style>
// 方法2  左右都是absolute
<div class="parent">
	<div class="left">
		<p>left</p>
	</div>
	<div class="right">
		<p>right</p>
		<p>right</p>
	</div>
</div>
===
.parent{
     
	position: relative;
}
.left{
     
	position: absolute;
	left: 0;
	width: 100px;
}
.right{
     
	position: absolute;
	left: 120px;    //比.left的left多出20px，相当于间隔
	right: 0;
}
// 方法3 自适应最好的
.left{
     
    float: left;     
    /* // 向左浮动 */
    width: 100px;    
    /* //固定宽度 */
    position: relative;
    /* //由于.left与.right-fix重合，且.right-fix在DOM树上的位置比.left要后，因此.right-fix会遮挡住.left，设置.left为relative可以让其冒出来。 */
}
.right-fix{
     
    float: right;     
    /* //向右浮动 */
    width: 100%;    
    /* //为了自适应设为100% */
    margin-left: -100px;
    /* //由于宽度设为100%，.right-fix遭到浏览器换行处理；因此通过设置负的margin值，在左侧制造出100px的空白，使.right-fix与.left重合（即处于同一行） */
}
.right{
     
    margin-left: 120px;    
    /* //由于.left和.right-fix重合了，因此给.right设置一个margin-left，避免内容区（.right）与.left重合。另外，120px - 100px = 多出来的20px实际上就相当于.left和.right之间的间隔了。 */
}
// flex (第二种用法)
.parent{
     
	display: flex;
}
.left{
     
	margin-right: 20px;
}
.right{
     
	flex: 1;
}
.left p{
     width: 200px;}
//table 基本不用
.parent{
     
	display: table; width: 100%;
}
.left,.right{
     
	display: table-cell;
}
.left{
     
	width: 100px;
	padding-right: 20px;
}

// grid方式

3列布局

首先看看双飞翼布局和圣杯布局的区别 https://blog.csdn.net/smlljet/article/details/93379411
其他的3列布局方式 https://segmentfault.com/a/1190000015231007#item-2

圣杯布局 float + position relative + margin100%;

双飞翼布局 float + margin0200 

css清除浮动的方式的几种方式

https://www.cnblogs.com/wush-1215/p/10623243.html

这样子的代码在正常的页面没问题，但是在react中就行了，react的modal框还是有点特别的。、

  
  
  



  

    adadsaaadasasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfasdfaadadaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfasdfaadadaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasassasdfasdfaadadsaaadasasdfasdfaadadasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfaadadsaaadasasdfasdfa
  
  

    

      
test3test3test3test3test3test3test3test3test3test3test3test3test3test3test3
      

        test4test4test4test4test4test4test4test4test4test4test4test4test4test4test4test4