css笔记梳理

最新推荐文章于 2023-04-10 17:25:53 发布

笨钟

最新推荐文章于 2023-04-10 17:25:53 发布

阅读量289

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/A_bet_of_three_years/article/details/114482278

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.如何实现垂直居中

HTML内容

  <body>
    <div class="big">
      <div class="center"></div>
    </div>
  </body>

CSS:方法一

 .big {
        width: 100vw;
        height: 100vh;
      
      }
      .center {
        width: 200px;
        height: 200px;
        background-color: #f00;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }

CSS:方法二

 .big {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .center {
        width: 200px;
        height: 200px;
        background-color: #f00;
      }

CSS方法三

     .big {
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      .center {
        width: 200px;
        height: 200px;
        background-color: #f00;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

二、如何实现0.5的div？

在这里插入图片描述
css

 .big {
        width: 100vw;
        height: 100vh;
        display: table;
    vertical-align: middle;
      }
      .center1 {
        width: 200px;
        height: 1px;
        background-color: #f00;
        transform: scaleY(0.5);
     
      }
      .center2 {
        width: 200px;
        height: 1px;
        background-color: #f00;
     
      }

html

  <body>
    <div class="big">
    <h2>0.5</h2>
      <div class="center1"></div>
      <h2>1</h2>
      <div class="center2"></div>
    </div>
  </body>

三、盒模型

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing的使用

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默认属性是content-box

四、如何实现三角形
css

    .a{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            border-color: transparent #0099CC transparent transparent;
            /* transform: rotate(90deg); //顺时针旋转90° */
 }

html

    <div class="a"></div>

五、BFC的概念

块状格式上下文,内部元素的样式不影响外部元素的样式布局
用于的场景：
1.标签中的margin重叠问题；
2.清除浮动；
3.float浮动问题；
4.两端自适应问题；
5.标签高度塌陷问题，高度成为0

都是添加overflow:hidden进行解决；

六、如何实现文字过长显示省略号？



/*单行文本溢出省略号*/
.one-t {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: all linear 0.2s;
}
/*多行文本溢出省略号*/
.more-t {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: all linear 0.2s;
}

七、flex布局
flex弹性布局领悟
视频教程：https://www.bilibili.com/video/BV1aJ411H77T?p=3

flex：弹性布局
使用场景：1.兼容性不高，适合移动端和pc端（浏览器版本比较高）
在这里插入图片描述