css-进阶

最新推荐文章于 2024-04-06 05:52:54 发布
最新推荐文章于 2024-04-06 05:52:54 发布
阅读量161 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45838066/article/details/123319989
版权

(1) 弹性布局(弹性盒子)#

  1. flex-direction 盒子排列方向
  2. justify-content 水平对齐方式
  3. align-items 垂直对齐方式
  4. align-self 垂直方式单独设置
  5. flex-grow剩余空间分配
  6. flex-wrap 换行
  7. 盒子纵向排列注意事项

1. flex-direction 盒子排列方向#

当我们对一个元素设置 display: flex 这个盒子就变成了一个弹性盒子, 它就有如下特点:

  • 盒子里面的元素可以横向排列, 也可以纵向排列
    • flex-direction: row; 横向排列(默认)
    • flex-direction:column; 纵向排列
  • 盒子里面的元素可以有更多的排列方式(后面的例子)
<!DOCTYPE html>
<html lang="en"> 
<head>
  <style>
    .box {
      width: 300px;
      height: 300px;
      border: 1px solid;
      display: flex;
      /* 默认row横向 */
      /* flex-direction: row; */
      /* 默认column纵向 */
      flex-direction: column;
    }
    .box span {
      width: 50px;
      height: 50px;
      background-color: gray;
    }
    .box span:nth-child(2) {
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body> 
</html>

2. justify-content 水平对齐方式#

当盒子的排列方向为横向时, 我们可以使用justify-content来对盒子内的元素进行水平方向的对齐方式, 它的取值常用的有5种:

  • flex-start 左对齐(默认)
  • center 居中对齐
  • flex-end 右对齐
  • space-between 两端对齐
  • space-around 分散对齐
<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex; 
         /* justify-content: flex-start; */
         /* justify-content: center; */
         /* justify-content: flex-end; */
         /* justify-content: space-between; */
         justify-content: space-around;
      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }
      .box span:nth-child(2) {
         background-color: green;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

3. align-items 垂直对齐方式#

align-items 取值常用的有三种

  • flex-start 顶部对齐(默认)
  • center 居中对齐
  • flex-end 底部对齐
<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex; 
         /* justify-content: flex-start; */
         /* justify-content: center; */
         /* justify-content: flex-end; */
         /* justify-content: space-between; */
         justify-content: space-around;
         /* align-items: flex-start; */
         /* align-items: center; */
         align-items: flex-end;

      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }
      .box span:nth-child(2) {
         background-color: green;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

4. align-self 垂直方式单独设置#

align-items是对所有子元素进行设置, align-self允许单独对某一个子元素进行设置, 用来和align-items相似, 但是它对子元素进行设置

<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex;  
         justify-content: space-around; 
         align-items: flex-end; 
      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }
      .box span:nth-child(2) {
         background-color: green;
         align-self: flex-start;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

5. flex-grow剩余空间分配#

盒子内如果有剩余的空间, 可以使用flex-grow来进行分配

flex-shink(了解), 空间不足的时候, 子元素会被缩小

<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 100px;
         width: 250px;
         border: 1px solid;
         display: flex;   
         align-items: center;
      }
      .box span {
         width: 50px;
         height: 50px;
         background-color: gray;
      }

      .box span:nth-child(1) { 
         flex-grow: 1;
      }
      .box span:nth-child(2) {
         background-color: green; 
         flex-grow: 2;
      }
      .box span:nth-child(3) { 
         flex-grow: 2;
      }

   </style>
</head>
<body>
   <div class="box">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

6. flex-wrap 换行#

flex-wrap常用两个取值

  • flex-wrap: nowrap; 不换行

  • flex-wrap: wrap; 换行

  • align-content 子元素的排列方式, 在多行的时候使用

<!DOCTYPE html>
<html lang="en"> 
<head>
   <style>
      .box {
         height: 400px;
         width: 250px;
         border: 1px solid;
         display: flex;    
         /* flex-wrap: nowrap; */
         flex-wrap: wrap;
         justify-content: space-around;
         align-content: flex-start;
      }
      .box span {
         width: 50px;
         height: 50px;
         margin: 5px;
         background-color: gray;
      } 

   </style>
</head>
<body>
   <div class="box">
      <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
   </div>
</body>
</html>

7. 盒子纵向排列注意事项#

当盒子纵向排列时, 注意:

justify-content 用来设置纵向排列方式, 取值依然是5个

align-items 用来设置横向排列方式, 取值只有三个

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .box {
         height: 400px;
         width: 250px;
         border: 1px solid;
         display: flex;
         /* 纵向排列 */
         flex-direction: column;
         /* 纵向排列方式 */
         justify-content: flex-start;
         justify-content: flex-end;
         justify-content: space-between;
         justify-content: space-around;
         /* align-items横向对齐方式 */
         align-items: flex-start;
         align-items: center;
         align-items: flex-end;

      }

      .box span {
         width: 50px;
         height: 50px;
         margin: 5px;
         background-color: gray;
      }
   </style>
</head>

<body>
   <div class="box">
      <span>1</span><span>2</span><span>3</span>
   </div>
</body> 
</html>

(2) 浮动#

  1. 浮动
  2. 清除浮动
  3. 通用清除浮动样式

1. 浮动#

浮动会脱离文档流, 跟随其后的元素会塌陷.

  • float: left; // 左浮动
  • float: right; // 右浮动
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    div:nth-child(1) {
      height: 80px;
      background-color: gray;
      float: left;
      width: 50%;
    }
    div:nth-child(2) {
      height: 100px;
      background-color: green;
      float: right;
      width: 50%;
      /* 在w3c标准模式下,加边框和padding会撑大元素,所以放不下会换行 */
      border: 1px solid;
    }
  </style>

</head>
<body>
    <div class="box1"> box1 </div>
    <div class="box2"> box2 </div>
</body>
</html>

2. 清除浮动#

  • clear: left; // 清除左边浮动
  • clear: right; // 清除右边浮动
  • clear: both; // 清除全部浮动
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .box1 {
      width: 50%;
      height: 100px;
      background-color: green;
      float: left;
    }

    .box2 {
      height: 120px;
      background-color: gray;
      clear: left;
      clear: right;
      clear: both;
    }
  </style>

</head>

<body>
  <div class="box1"> box1 </div>
  <div class="box2"> box2 </div>
</body>
</html>

3. 通用清除浮动样式#

父元素如果不设置高度, 那么父元素的高度会自动根据子元素的高度来获得高度, 但如果子元素设置了浮动, 父元素的高度就为0

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .aa {
      border: 2px solid red;
    }

    .bb {
      width: 100px;
      height: 50px;
      background-color: gray;
      float: left;
    }
  </style>

</head>
<body>
  <div class="aa">
    <div class="bb">
      子元素
    </div>
  </div>
</html>

  1. 清除浮动方法1: 添加一个空div，利用css的clear:both清除浮动，让父级div能自动获取到高度

    <!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .aa {
      border: 2px solid red;
    }

    .bb {
      width: 100px;
      height: 50px;
      background-color: gray;
      float: left;
    }

    .empty {clear: both;}
  </style>

</head>
<body>
  <div class="aa">
    <div class="bb">
      子元素
    </div>
    <div class="empty"></div>
  </div>
</html>

  2. 清除浮动方法2: 使用伪类元素

    <!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .aa {
      border: 2px solid red;
    }

    .aa .bb {
      width: 100px;
      height: 50px;
      background-color: gray;
      float: left;
    }

    .aa:after {
      /* 把....去掉就实现我们想要的效果 */
      content: '....';
      display: block;
      clear: both;
    }
  </style>

</head>
<body>
  <div class="aa">
    <div class="bb">
      子元素
    </div> 
  </div>
</html>

  3. 其他方式

(3) css布局#

  1. 流式布局
  2. 浮动布局
  3. 决定对位布局
  4. 弹性布局
  5. 双飞翼布局
  6. 圣杯布局

(4) 盒子阴影#

使用box-shadow设置盒子阴影, 常用5个选项

  • X轴偏移量
  • Y轴偏移量
  • [阴影模糊半径]
  • [阴影扩展]
  • [阴影颜色]
  • [投影方式] inset:内凹(可选)
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .aa {
      width: 100px;
      height: 100px;
      box-shadow: 5px 5px 15px 10px green;
      box-shadow: 5px 5px 15px 10px green inset;
    } 
  </style>

</head>
<body>
  <div class="aa">
     
  </div>
</html>

(5) 2D变换#

transform

  1. translate() 定义 2D 转换, 就是平移(横向的,纵向的)
    • translate-x: 横向移动
    • translate-y: 纵向移动
    • translate: 两个选项: 第一个选项横向移动, 第二个选项纵向移动
  2. rotate() 旋转
  3. scale() 缩放
  4. skew() 倾斜
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      display: flex;
    }
    p{
      width: 200px;
      height: 50px;
      border: 1px solid;
    }
    p:nth-child(1) {
      transform: translate(20px, 20px);
    }
    p:nth-child(2) {
      margin-left: 50px;
      transform: rotate(30deg);
    }
    p:nth-child(3) {
      transform: scale(.5);
    }
    p:nth-child(4) {
      transform: skew(10deg,10deg);
    }
  </style>

</head>
<body>
  <p>translate</p>
  <p>rotate</p>
  <p>scale</p>
  <p>skew</p> 
</html>

(6) 过渡和动画#

  1. transition过渡
  2. Keyframes动画

1. transition过渡#

  • transition-property 选项1(必须): 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 选项2(必须): 规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function 选项3(可选): 规定速度效果的速度曲线。
  • transition-delay 选项4(可选): 定义过渡效果何时开始。
<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background: blue;
      transition: width 2s;
      -moz-transition: width 2s;
      /* Firefox 4 浏览器*/
      -webkit-transition: width 2s;
      /* Safari 和 Chrome 浏览器*/
      -o-transition: width 2s;
      /* Opera 浏览器*/
    }

    div:hover {
      width: 300px;
    }
  </style>
</head>

<body>
  <div></div>
</body>
</html>


<!-- 距离应用 -->

2. Keyframes动画#

  • @keyframes 定义动画名称和动作
  • animation-name 使用的动画名称
  • animation-duration:5s 动画时长
  • animation-iteration-count 动画次数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画</title>
<style> 
div{
	width:100px;
	height:100px;
	background:red;
	position:fixed;
	animation-name:move;
	animation-duration:5s;
  animation-iteration-count:infinite;
}

@keyframes move{
	0%   {background:red; left:0px; top:0px;}
	25%  {background:yellow; left:200px; top:0px;}
	50%  {background:blue; left:200px; top:200px;}
	75%  {background:green; left:0px; top:200px;}
	100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body> 
<div></div>
</body>
</html>

(7) 块级格式化上下文bfc#

  1. 什么是BFC
  2. BFC的布局规则(盒子变成BFC后有什么特殊的地方)
  3. 如何创建一个BFC(一个盒子在什么条件下会变成bfc)
  4. BFC的应用

1. 什么是BFC#

BFC全称Block Formatting Context，翻译过来就是块级格式化上下文, 也就是常说的BFC, 如同弹性盒子一样, 当一个元素变成了BFC, 它就具备了一些特殊的功能.

2. 如何创建一个BFC(一个盒子在什么条件下会变成bfc)#

  1. 浮动元素，float 除 none 以外的值；
  2. 绝对定位元素，position（absolute，fixed）；
  3. overflow 除了 visible 以外的值（hidden，auto，scroll）；
  4. display 为以下其中之一的值 inline-block，table-cell，table-captio1, flex；
  5. body 根元素

3. BFC的布局规则(盒子变成BFC后有什么特殊的地方)#

  1. 内部的Box会在垂直方向上一个接一个的放置。
  2. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
  3. bfc的区域不会与float的元素区域重叠。
  4. 垂直方向上的距离由margin决定
  5. 计算bfc的高度时，浮动元素也参与计算

4. BFC的应用#

  1. 解决margin-top塌陷问题(利用了第2条规则)

    bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

    <!DOCTYPE html>
<html lang="en">
<head>
   <style>
      * {margin: 0;}
      .aa {
         width: 200px;
         height: 200px;
         background-color: gray;
         overflow: auto;
      }
      .aa .bb {
         margin-top: 30px;
         width: 50px;
         height: 50px;
         background-color: green;
      }
   </style>
</head>

<body>
   <div class="aa">
      <div class="bb"></div>
   </div>
</body>
</html>

  2. 清除浮动(利用第5点)

    计算bfc的高度时，浮动元素也参与计算

    <!DOCTYPE html>
<html lang="en">
<head>
   <style>
      * {margin: 0;}
      .aa {
         border: 1px solid;
         width: 200px;
         overflow: auto;
      }
      .aa .bb {
         height: 50px;
         background-color: green;
         float: left;
      }
      .cc {
         height: 100px;
         width: 200px;
         background-color: gray;
      }
   </style>
</head>

<body>
   <div class="aa">
      <div class="bb">
         这是aa的子元素bb
      </div>
   </div>

   <div class="cc">cc元素</div>
</body>
</html>

  3. 使用bfc进行布局(利用了第3点)

    bfc的区域不会与float的元素区域重叠。

    <!DOCTYPE html>
<html lang="en">
<head>
   <style>
      * {margin: 0;}
      .left {
         height: 300px;
         background-color: gray;
         float: left;
         width: 300px;
         margin-right: 10px;
      }
      .right {
         background-color: green;
         height: 350px;
         overflow: auto;
      }
   </style>
</head>

<body>
   <div class="left">
      左边
   </div>
   <div class="right">
      右边
   </div>
</body>
</html>

其他详细信息1

其他详细信息2

(8) 水平垂直居中#

  1. 弹性盒子
  2. 决定定位

(9) css兼容性写法#

比如弹性盒子的兼容写法:

<!DOCTYPE html>
<html lang="en">

<head>
   <style>
      .box {
         display: -webkit-box;
         /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
         display: -moz-box;
         /* 老版本语法: Firefox (buggy) */
         display: -ms-flexbox;
         /* 混合版本语法: IE 10 */
         display: -webkit-flex;
         /* 新版本语法: Chrome 21+ */
         display: flex;
         /* 新版本语法: Opera 12.1, Firefox 22+ */
      }
   </style>
</head>

<body>
   <div class="box">

   </div>
</body>
</html>
牛马小先锋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS基础到进阶要点总结
weixin_45062076的博客
05-22 406
css基础到进阶知识梳理
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 506
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
CSS 进阶
A626796235的博客
01-07 390
CSS 进阶
前端学习第五站——CSS学习进阶篇
qq_59212867的博客
01-31 736
CSS进阶学习篇
CSS进阶
qq_69401634的博客
07-26 297
内容包括一下CSS的进阶知识,包括但不限于盒子模型,溢出,透明度和手势,最大最小宽高,默认样式及重置,浮动...
Trillo-css-进阶
02-18
Trillo-css-进阶
CSS进阶指引
09-25
主要介绍了CSS入门指引,其中包括BEM和OOCSS等的代码示例,强烈推荐!需要的朋友可以参考下
css background-attachment属性进阶
09-24
CSS中的`background-attachment`属性是用来控制背景图像随滚动条移动的方式。在深入理解这个属性之前，我们需要确保已经设置了`background-image`属性，因为它定义了背景图像。`background-attachment`接着决定背景...
gtk学习代码-进阶版
02-11
这个“gtk学习代码-进阶版”压缩包很可能是为那些已经对GTK基础有一定了解，想要深入研究和提升GTK编程技能的开发者准备的资源集合。 GTK采用C语言编写，但提供了多种语言的绑定，如Python（PyGTK或PyGObject）、...
前端开源库-postcss-variables
08-29
**进阶应用** 除了基本的变量功能，PostCSS 还可以通过其他插件提供更高级的功能，如颜色函数、自动前缀、变量安全检查等。结合这些插件，开发者可以构建出一套完整的 CSS 预处理流程，满足各种复杂的需求。 总的...
一起来掌握CSS的进阶知识吧！
m0_57465286的博客
01-16 839
小白通过自学前端知识记录的笔记，希望对大家入门前端有所帮助。让我们一起畅游前端之路吧!
【CSS】CSS进阶
qq_44314839的博客
03-28 255
一、CSS盒模型： 盒模型即把html元素看作一个个小盒子，盒子里面还可以嵌套其他的盒子。盒模型分为两种：W3C盒模型和IE盒模型。 W3C盒模型：属性width、height只包括内容content，不包括padding、border。 width = 内容的宽度 height = 内容的高度 IE盒模型：属性width、height包括content、padding和border，是content+padding+border。 width = border + padding + 内容的宽度 hei
css进阶
巨星不易，努力前行
08-23 484
css选择器 1.盒子模型 1.1边框（border） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css进阶</title> <style> .box{ ...
CSS3知识点精学
STATICHIT静砸的博客
12-28 872
CSS知识点精学1，之前学习html+css+JavaScript时比较仓促，基本是过了一遍基础之后，用到什么学什么，难免会漏掉很多细碎的知识点，写界面的时候也不太流畅，然后准备花费几天时间细致的重新学一遍，学了一半就感觉写样式顺畅了很多
阿里内部核心Web前端进阶手册，详解CSS（一，大厂面试必问
最新发布
2401_83621426的博客
04-06 513
伪类选择器是用来给超级链接的不同状态来设置样式。超级链接的四种不同状态：正常状态、访问过后状态、鼠标放上状态、激活状态。具体如下：| 选择器 | 含义 || — | — || :link | 向未被访问的链接添加样式 || :visited | 向已被访问的链接添加样式 || :hover | 当鼠标悬浮在元素上方时，向元素添加样式 || :active | 鼠标放在元素上面时，点击的一瞬间 |a:link{/* 正常状态 *//* 红 */
css3进阶动画的使用
03-29
CSS3进阶动画是CSS3中最强大的功能之一，它可以实现各种各样的动画效果，包括旋转、缩放、淡入淡出、移动、变形等等。以下是使用CSS3进阶动画的步骤： 1. 定义动画关键帧：使用@keyframes规则来定义动画的关键帧。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛马小先锋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值