HTML5+CSS-4

简介: 21、float浮动文档流:文档流是文档中可显示对象在排列时所占用的位置float特性:加浮动的元素会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列

21、float浮动

文档流:文档流是文档中可显示对象在排列时所占用的位置

float特性:加浮动的元素会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列

float取值:left、right、none(默认)

浮动元素不会撑开父容器的大小,只有同属于文档流才可以撑开

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    body{
      border: 1px black solid;
    }
    #box1{
      width: 100px;
      height: 100px;
      background-color: yellow;
      float: left;
    }
    #box2{
      width: 200px;
      height: 200px;
      background-color: red;
      float: left;
    }
    </style>
  </head>
  <body>
        <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

202205190056290.png

由于浮动,此时body高度为0

如果将box2的浮动去掉,则body的高度会被box2撑开到200px

float注意点

1.只会影响后面的元素
如果只给box2设置浮动,则如下


202205190056175.png2.内容默认提升半层


 202205190056123.png

  1. 蓝色块为1层,蓝色块上的文字为1.5层,红色为2层,所以实现文字环绕浮动效果

3.默认宽根据内容决定
如果没设置宽时,本身div容器会和父容器宽相同,然而设置浮动之后宽会由内容决定

4.换行排列

202205190056199.png202205190056978.png202205190056044.png



202205190056562.png

202205190057441.png

5.主要给块元素添加,但也可以给内联元素添加

块元素原本按照上下排列,添加浮动后可以实现左右排列而方便布局

清除浮动

上下排列:clear

left、right、both

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <title></title>
    <style>
    #box1{width: 100px; height: 100px; background-color: red; float: left;}
    #box2{width: 200px; height: 200px; background-color: #4CC9FF; /* clear: left; */}
    </style>
  </head>
  <body>
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>


202205190057848.png

加上clear: left;–>

202205190057426.png

嵌套排列:


1,固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果


2.父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素


3.overflow:hidden(BFC规范),如果有子元素想溢出,那么会受到影响


4.display:inline-block,不推荐,父容器会影响到后面的元素

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /* #box1{width: 100px; height: 100px; background-color: red; float: left;}
    #box2{width: 200px;   height: 200px; background-color: #4CC9FF; clear: left;} */
    #box1{width: 200px; border: 1px black solid; /* overflow: hidden */ display: inline-block}
    #box2{width: 100px; height: 200px; background-color: red; float: left} 
    </style>
  </head>
  <body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <div id="box1">
      <div id="box2">
      </div>
    </div>
    aaa
  </body>
</html>

5.设置空标签:不推荐,会多添加一个标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #box1{width: 200px; border: 1px black solid;}
    #box2{width: 100px; height: 200px; background-color: red; float: left} 
    #clearfloat{clear: both}
    /*使得clearfloat不受box2的浮动影响,即这两个div上下排列
      又因为clearfloat与box1都属于文档流,可以撑开box1*/
    </style>
  </head>
  <body>
    <div id="box1">
      <div id="box2"></div>
      <div id="clearfloat"></div>
    </div>
    aaa
  </body>
</html>
  1. 6.after伪类:推荐,是空标签的加强版,目前各大公司的做法
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
  #box1{width: 200px; border: 1px black solid;}
  #box2{width: 100px; height: 200px; background-color: red; float: left} 
  .clear::after{content:""; clear: both; display: block;}
     /* clear标签只会对块起作用,而content内容是内敛,所以需要先display换为块*/
  </style>
  <body>
    <div id="box1" class="clear">
      <div id="box2">
      </div>
    </div>
    aaa
  </body>
</html>

22、position定位

css中position属性用于指定一个元素在文档中的定位方式,top、right、bottom、left属性则决定了该元素的最终位置

取值

1.static(默认)

2.relative

3.absolute

4.fixed

5.sticky

relative相对定位

1.如果没有定位偏移量,对元素本身没有任何影响

2.不使元素脱离文档流

3.不影响其他元素布局

4.left、top、right、bottom是相对于当前元素自身进行偏移的

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #box1{width: 100px; height: 100px; background-color: red;}
    #box2{width: 100px; height: 100px; background-color: yellow; position: relative;
    left: 100px; top: 100px;}
    #box3{width: 100px; height: 100px; background-color: blue;}
    </style>
  </head>
  <body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
  </body>
</html>

2fd1814d5e86b775b549da822bf106b8.png

absolute绝对定位

1.使元素完全脱离文档流

2.使内联元素支持宽高(让内联具备块特性)

3.使块元素默认的宽根据内容决定(让块具备内联的特性)

4.如果有定位祖先元素相对于定位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      #box1{width: 300px; height: 300px; border: 1px black solid; margin: 50px;}
      #box2{width: 100px; height: 100px; background-color: red;}
    </style>
  </head>
  <body>
    <div id="box1">
      <div id="box2"></div>
    </div>
  </body>
</html>

效果为:

d2b6d1d3cf58106c0385f040701165a6.png

如果给box2加上绝对定位position: absolute; left: 10px; top: 10px

则变为:

cdf66bc94323e7478bdb22918526a5c5.png

如果给box1加上定位position: relative

则变为:

c7963588382f45df6fe4682c7178427f.png

即定位是相对于最近一个有定位的元素,如果没有则相对于整个文档

fixed固定定位

1,使元素完全脱离文档流

2.使内联元素支持宽高(让内联具备块特性)

3.使块元素默认的宽根据内容决定(让块具备内联的特性)

4.相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响,即无论怎么滚动都在那个位置,且与祖先元素无关

可以用于做返回顶部功能

sticky黏性定位

在指定的位置,进行黏性操作

div{background:red;position:sticky; top: 0

拖动前(无区别):

177178701c0a68e8b47d60952ed6e8b1.png

拖动滚动条后:

8443e594765bb941827ca0547efdda04.png


z-index定位层级

  • 默认层级为0
    如果没有设置层级时,两个容器重叠时,默认后设置的图层会在上面,此时可以通过设置容器的层级来更改。
  • 嵌套时候的层级问题
  • 比较层级时通过外层比较,一个嵌套结构如果外层的层级低,里层的再高也不起作用,只有当外层没有设置层级时,里层的层级才会起作用

导航栏的实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    *{margin: 0; padding: 0;}
    ul{list-style: none;}
    #menu{width: 100px; height: 24px; border: 1px black solid; margin: 20px auto; text-align: center; position: relative;}
    #menu ul{width: 100px; border: 1px black solid; position: absolute; left: -1px; top: 24px; display: none; background-color: white;}
    #menu:hover ul{display: block;}
    #menu li:hover{background-color: antiquewhite;}
    p{text-align: center;}
    </style>
  </head>
  <body>
    <div id="menu">
      卖家中心
      <ul>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
      </ul>
    </div>
    <p>测试段落</p>
  </body>
</html>


23、CSS添加省略号

  • width 必须有一个固定的宽
  • whit-space:nowrap 不让内容折行
  • overflow:hidden 隐藏溢出的内容
  • text-overflow:ellipsis 添加省略号
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    #content{width: 100px; height: 20px; border: 1px black solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    </style>
  </head>
  <body>
    <div id="content">
      再没更卑微oh no,即使唉声叹气还要当趣味
    </div>
  </body>
</html>

该操作只能实现单行的省略

24、CSS Sprite

特性:CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载


好处:可以减少图片的质量,网业的图片加载速度快


减少图片的请求次数,加快网页的打开

25、CSS圆角设计

border-radius:20px

border-radius:20px


取值实际表示的是相切圆的半径


当取值等于块的宽和高的一半时(或50%),则得到一个圆


写两个值时,前一个代表左上和右下,后一个代表左下和右上


写四个值时,表示从左上开始顺时针到左下


取值为20px/40px时,代表相切的是一个宽为20px,高为40px的椭圆


height:100px;width:50px;border-radius:100px 100px 0 0则得到半圆


相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
70 34
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
62 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
39 2
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
149 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
101 33
|
3月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
123 24
|
4月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
100 5
|
4月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
147 7
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6