弹性盒子，双飞翼

最新推荐文章于 2024-09-15 21:53:26 发布

男孩12

最新推荐文章于 2024-09-15 21:53:26 发布

阅读量328

点赞数

分类专栏： HTML 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/weixin_51666715/article/details/121863584

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

text-align属性

text-align 这个属性可以设置行内元素横向居中
代码及规范

 <style>
    p{
      width: 300px;
      height: 300px;
      border: 1px solid;
      text-align: center;
    }
  </style>
</head>
<body>
  <p>
  <span>我可以通过text-align这个属性来居中</span>
  </p>

margin: 0 auto;可以使得块级元素横向居中
代码及规范

 <style>
    div{
      width: 300px;
      height: 300px;
      border: 1px solid;
    }
    p{
      width: 200px;
      height: 200px;
      border: 1px solid;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div><p>我是一个块级元素我是通过margin来居中的</p></div>

定位(position)

定位的元素属性有哪些：
1.static:默认值，但它不属于定位
2.relative:相对定位。设置这个属性，是为了方便子元素定位时候，能够将它左上角设置为原点进行定位
3.fixed : 固定定位。他脱离了文档流
4.absolute:绝对定位。他脱离了文档流
固定定位：将元素设置为position:fixed,则这个元素的不属于块级元素和行内元素，而是类似于"行内块元素"

当你的上下左右同时都设有值，则你的这四个属性值中有几个是失效的
（优先级在于：元素设置了宽高，上下同在取上，左右同在取左）

元素设置了固定定位和绝对定位的时候，该元素脱离了文档流，和他在同一个位置上的元素将被覆盖

定位的所有元素都是需要确定你的原点是谁

固定定位元素之争

两个元素同时设置了固定定位，并且重叠在一起，使得z-index来调节
代码即规则，如下:

 <style>
  div{
    width: 200px;
    height: 200px;
    border: 1px solid;
  }
  .div1{
    background-color: red;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    z-index: 99;
  }
 .div2{
    background-color: skyblue;
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
  }
  </style>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>

单行文本的溢出

处理代码如下：

<style>
  div{
    width: 200px;
    height: 200px;
    border: 1px solid;
  }
  .div1{
    background-color: red;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>

多行文本的溢出

处理代码如下

 <style>
  div{
    width: 200px;
    height: 60px;
    border: 1px solid;
  }
  .div1{
    background-color: red;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  </style>
</head>
<body>
  <div class="div1">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sit, accusantium ducimus et deserunt quam enim cum itaque laudantium id expedita repellendus pariatur obcaecati vero, dolorem vitae animi. Ipsa, maxime.
  </div>
</body>

盒子模型（盒模型）

1.什么是盒模型
盒模型包括内容，内边距，边框，外边距
2.盒模型分为哪几种类型？
1.w3c的标准盒模型（默认的）
它的大小计算是内容的大小+内边距的大小+边框的大小+外边距的大小
2.IE盒模型（怪异盒模型）
它的总大小是内容的大小
3.两种盒模型的区别为
1.标准盒模型添加边框和内边距，盒子会随之变大
2.怪异盒模型添加边框和内边距，盒子不会随着变大
4.两种盒子类型如何相互转换呢？
通过box-sizing css属性进行修改，其中的属性值

box-sizing：content-box

表示的是标准盒子

box-sizing：border-box

表示的是怪异盒子

css进阶

弹性布局（弹性盒子）

1.当我们对盒模型设置属性display:flex这个盒子就变成一个弹性的盒子，他有如下的特点盒子的元素可以横向排列（row）也可以纵向排列（coiumn）

justify-content 水平对齐方式

当盒子排列为横向的时候，我们可以使用 justify-content这个属性来对盒子进行横向布局。
其中的属性值为

justify-content：flex-start:一开始进行左对齐（默认值）
justify-content：center 横向居中
justify-content：flex-end 右对齐
justify-content:space-bewtten 空白在元素之间
justify-content:space-around:空白在元素旁边并且还是分开的

代码及规范：

 <style>
  div{
    width: 200px;
    height: 60px;
    border: 20px solid grey;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
  }
  div .item{
    width: 100px;
    height: 20px;
    background: red;
  }
  
  </style>
</head>
<body>
  <div class="div1">
    <div class="item"></div>
  </div>

align-items垂直对齐

它的属性值为:

align-item:flex-start 上对齐
align-item: center 垂直方向的居中
align-item:flex-end:下对齐

代码及规范：

<style>
  div{
    width: 200px;
    height: 60px;
    border: 20px solid grey;
    box-sizing: content-box;
    display: flex;
    align-items: center;
  }
  div .item{
    width: 100px;
    height: 20px;
    background: red;
  }
  
  </style>
</head>
<body>
  <div class="div1">
    <div class="item"></div>
  </div>

如果设置了flex-direction: column;
则justify-content控制的是垂直方向上的，而align-items则控制的是水平方向的，属性方法都不变

align-content

当我们使用弹性布局的时候如果断行的话flex-wrap:wrap,那么你会发现会产生两节元素，并且直接有间距
那么我们应该使用align-content
代码及规范

<style>
	 display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5px;
    align-content:center;
</style>

当父元素进行了弹性布局的话，则子元素可以用其中的方法对子元素中的字体产生影响
代码及规范

 <style>
  div{
    width: 300px;
    height: 400px;
    border: 1px solid;
    /* box-sizing: content-box; */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5px;
    align-content:center;
  }
  div .item{
    width: 50px;
    height: 50px;
    background: red;
    /* display: flexbox; */
    justify-content: center;
    align-content: center;
  }
  
  </style>
</head>
<body>
  <div class="div1">
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
    <div class="item">1</div>
  </div>