Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二

简介: Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二

Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一:https://developer.aliyun.com/article/1531002

overflow清除浮动

如果有父级塌陷,并且同级元素也收到了影响,可以使用overflow清除浮动。

这种情况下,父布局不能设置高度。

<head>
<style>
  .container{
    border:1px solid red;
    width:350px;
    overflow:hidden;
    clear:both;
  }
  .box{
    width:100px;
    height:100px;
    background-color:#fff176;
    float:left;
    margin:5px;
  }
  .nav{
    width:100px;
    height:100px;
    background-color:red;
  }
</style>
</head>
 
<body>
  <div class="container">
      <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="nav"></div>
</body>

伪对象方式

如果有父级塌陷,并且同级元素也收到了影响,还可以使用伪对象方式处理,为父标签添加伪类after,设置空的内容,并使用clear:both;这种情况下,父布局也不能设置高度。

<head>
<style>
  .container{
    border:1px solid red;
    width:350px;
  }
  .container::after{
    content:"";
    display:block;
    clear:both;
  }
  .box{
    width:100px;
    height:100px;
    background-color:#fff176;
    float:left;
    margin:5px;
  }
  .nav{
    width:100px;
    height:100px;
    background-color:red;
  }
</style>
</head>
 
<body>
  <div class="container">
      <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="nav"></div>
</body>

定位

定义

position属性指定了元素的定位类型。

描述
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 黏性定位

其中,绝对定位、固定定位和黏性定位会脱离文档流。

设置定位之后,可以使用四个方向值进行调整位置:left、top、right、bottom。

相对定位

相对于默认位置进行偏移,即定位基点是元素的默认位置。

<head>
<style>
  .box{
    width:200px;
    height:200px;
    background-color:red;
    position:relative;
    left:100px;
  }
</style>
</head>
 
<body>
  <div class="box"></div>
</body>

绝对定位

absolute相对于上级元素(一般是父元素)进行偏移,有一个很重要的限制条件:定位基点不能是static定位(static是position属性的默认值,每个块元素占据自己的区块,元素之间互不重叠),否则定位基点就会变成整个网页的根元素html。

换句话说,absolute要在父元素设置了relative(除了static)的情况下才能使用(“子绝父相”)。

<head>
<style>
  .box1{
    width:200px;
    height:200px;
    background-color:red;
    position:absolute;
    left:50px;
  }
  .box2{
    width:300px;
    height:300px;
    background-color:green;
  }
  .box{
    width:500px;
    height:500px;
    background-color:#F0F;
    position:relative;
    left:100px;
  }
</style>
</head>
 
<body>
  <div class="box">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
</body>

固定定位

相对于视口(浏览器窗口)进行偏移,基点是浏览器窗口,且不会随着窗口滚动而变化。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
  .box1{
    width:200px;
    height:200px;
    background-color:red;
    position:fixed;
    left:50px;
  }
  .box2{
    width:300px;
    height:300px;
    background-color:green;
  }
  h3{
    line-height:500px;
  }
</style>
</head>
 
<body>
      <div class="box1"></div>
      <div class="box2"></div>
        <h3>6</h3>
        <h3>6</h3>
        <h3>6</h3>
        <h3>6</h3>
        <h3>6</h3>
</body>

不随滚动而移动,固定在浏览器窗口中。

注意:设置定位之后,相对定位和绝对定位是相对于具有定位的父级元素进行位置调整,如果父级元素不存在定位,则继续向上逐级寻找,直到顶层文档。这就是前面为什么说absolute的定位基点不能是static定位。


黏性定位

相对于视口进行黏性固定,当属性到黏性定位所在位置时就会黏住固定。(此时相当于固定定位的效果)与固定定位不同的是,黏性定位要先到指定的位置再固定,而固定定位一开始就固定。

Z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(比较权重的大小,权重大的在顶层。)

<head>
<style>
  .box1{
    width:200px;
    height:200px;
    background-color:red;
    position:absolute;
    z-index:2;
  }
  .box2{
    width:300px;
    height:300px;
    background-color:green;
    position:absolute;
    z-index:1;
  }
</style>
</head>
 
<body>
      <div class="box1"></div>
      <div class="box2"></div>
</body>

CSS3新特性

圆角

使用CSS3border-radius属性,你可以给任何元素制作“圆角”。

border-radius属性,可以使用以下规则:

  1. 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角
  2. 三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角
  3. 两个值:第一个值为左上角和右下角,第二个值为右上角与左下角
  4. 一个值:四个圆角值相同
<head>
<style>
  div{
    margin:10px;
  }
  .box1{
    width:200px;
    height:150px;
    background-color:#8AC007;
    padding:20px;
    border-radius:15px 50px 30px 5px;
  }
  .box2{
    width:200px;
    height:150px;
    background-color:#8AC007;
    padding:20px;
    border-radius:15px 50px 30px;
  }
  .box3{
    /*50%与100%的效果一致*/
    border-radius:50%; 
    background:#8AC007;
    padding:20px;
    width:200px;
    height:150px;
  }
</style>
</head>
 
<body>
      <div class="box1"></div>
      <div class="box2"></div>
        <div class="box3"></div>
</body>

阴影

box-shadow向框添加一个或多个阴影。

box-shadow:h-shadow v-shadow blur color;
描述
h-shadow 必选,水平阴影的位置
v-shadow 必选,垂直阴影的位置
blur 可选,模糊距离
color 可选,阴影的颜色
<head>
<style>
  .box{
    width:200px;
    height:200px;
    background-color:#8ac007;
    margin:50px;
    box-shadow:10px 10px green;
  }
</style>
</head>
 
<body>
      <div class="box"></div>
</body>

给阴影加模糊效果

<head>
<style>
  .box{
    width:200px;
    height:200px;
    background-color:#8ac007;
    margin:50px;
    box-shadow:10px 10px 5px green;
  }
</style>
</head>
 
<body>
      <div class="box"></div>
</body>

三个方向的阴影效果

<head>
<style>
  .box{
    width:200px;
    height:200px;
    background-color:#8ac007;
    margin:50px;
    box-shadow:0 10px 30px rgb(0,0,0,.5);
  }
</style>
</head>
 
<body>
      <div class="box"></div>
</body>

目录
相关文章
|
14天前
|
前端开发 容器
CSS Flexbox(弹性布局)
CSS Flexbox(弹性布局)
|
7天前
|
前端开发 容器
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
CSS【详解】定位 position (静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky)
8 0
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
43 3
|
1月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
32 2
|
1月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
38 2
|
24天前
|
前端开发
【Web开发】CSS教学(超详细,满满的干货)
【Web开发】CSS教学(超详细,满满的干货)
12 0
|
1月前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
33 0
|
前端开发
CSS属性: 阴影 轮廓 渐变
注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN 阴影 使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-shadow blur spread color i...
2268 0
|
7天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
48 0
|
11天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法