CSS常用布局技巧

逃跑计划
1,716 阅读5分钟

1.布局

1.1 流动模型（Flow）

流动（Flow）是默认的网页布局模式。

1.2 浮动模型（Float）

浮动被用于将盒子置于左侧或右侧，同时让内容环绕其展示。

.item {
    float: left
}

1.3 层模型（Layer）

position有5个属性：

  • absolute
  • relative
  • fixed
  • static
  • sticky

absolute(绝对定位)： 通过left、right、top、bottom属性确定元素位置，设置上右边距， absolute是相对父元素进行绝对定位的，且该父元素必须定义有position的值(relative、absolute、fixed)

.child{
    height: 50px;
    width: 50px;
    position: absolute;
    top: 100px;
    left: 100px;
    border: 2px solid tan;
}

image.png relative(相对定位)：

通过left、right、top、bottom属性确定元素位置，设置相对原先位置的偏移

.child{
    height: 50px;
    width: 50px;
    position: relative;
    top: 100px;
    left: 100px;
    border: 2px solid tan;
}

image.png fixed：

盒子固定的窗口的左下角

.child{
    height: 50px;
    width: 50px;
    position: fixed;
    top: 100px;
    left: 100px;
    border: 2px solid tan;
}

image.png

1.4 flex 布局

技术点的解释：

  1. 设置display: flex属性可以把块级元素在一排显示。
  2. flex需要添加在父元素上，改变子元素的排列顺序。
  3. 默认为从左往右依次排列,且和父元素左边没有间隙。
.boxParent {
    height: 300px;
    width: 500px;
    margin: 200px;
    border: 2px solid red;
    position: relative;
    display: flex;
}
.child{
    height: 50px;
    width: 50px;
    border: 2px solid tan;
}

image.png

横轴操作(沿着浮动方向):

justify-content: center | flex-start | flex-end | center | space-bwtween | apace-around

space-bwtween:

image.png

竖轴操作：

align-items: center | flex-start | flex-end | baseline

浮动方向为垂直，这时横轴竖轴操作相反

flex-direction: column;

display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;

image.png

flex的伸缩

     display: flex;
    
    .div2 {
    // flex 第一个属性是伸展剩余空间，值越大平分比例越大
      flex: 3 1 50px;
      height: 20px;
      background-color: green;
      margin: 10px;
    }
    .div3 {
      flex: 1 1 50px;
      height: 20px;
      background-color: green;
      margin: 10px;
    }
    .div4 {
      width: 50px;
      height: 20px;
      background-color: green;
      margin: 10px;
    }

依次是 2 3 4 4 image.png

多行 flex 布局

flex-wrap: wrap

{
  width: 600px;
  height: 150px;
  display: flex;
  flex-wrap: wrap;
}
.div4 {
  width: 90px;
  height: 20px;
  background-color: green;
  }

image.png

1.5 常用选择器：

image.png 子选择器：

符号针对的元素是特定元素的直接子元素。而对其孙子代不受影响

2.层叠与继承

层叠：

Stylesheets cascade（样式表层叠） — 简单的说，css规则的顺序很重要；当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

优先级：

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度：

一个元素选择器不是很具体---会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。

一个类选择器稍微具体点---它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。

一个选择器的优先级可以说是由四个部分相加 (分量)，可以认为是个十百千 — 四位数的四个位数：

千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。

百位： 选择器中包含ID选择器则该位得一分。

十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。

个位：选择器中包含元素、伪元素选择器则该位得一分。

3.背景与边框

3.1 被禁颜色

黑底白字

h2 {
    background-color: black;
    color: white
}

image.png

3.2 背景图片：

黑底平铺的星星

.b{
    background-image: url(star.png);
    background-color: black 
}

image.png

no-repeat --- 不重复。
repeat-x --- 水平重复。
repeat-y --- 垂直重复。
repeat --- 在两个方向重复。

3.3 调整背景图像的大小

我们有一个很大的图像，由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

你也可以使用关键字:

cover --- 浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外；

contain --- 浏览器将使图像的大小适合盒子内。在这种情况下，如果图像的长宽比与盒子的长宽比不同，则可能在图像的任何一边或顶部和底部出现间隙。

3.4 背景图像定位

image.png

调整定位：

.b{
    background-image: url(star.png);
    background-repeat: black;
    background-position: 10px 40%
}

3.5 边框

.boxParent {
    height: 300px;
    width: 500px;
    margin: 200px;
    border: 2px solid red; // 2px 实线 红色
    border-radius: 12px; // 12px 圆角
    border-bottom: hidden // 隐藏下边框
}

image.png

4.overflow

overflow: auto;

image.png

5.块级元素、行内元素和行内块元素互转

  • 块转行内：display:inline; （DIV 等）
  • 行内转块：display:block; （span 等）
  • 块、行内元素转换为行内块：display: inline-block; 在行内元素中有几个特殊的标签 <img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。
  • 和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙，一行可以显示多个。
  • 默认宽度就是它本身内容的宽度。
  • 高度，行高、外边距以及内边距都可以控制。
avatar
文章
阅读
粉丝