Html内外宽度已经清除浮动基础笔记
2024-05-27 15:27:25
宽度剩余法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 300px;height: 50px;border: 1px solid hotpink;}/*不指定子类元素的宽度值*/h3{margin-left: 30px;background-color: purple;}</style></head><body><div><h3>稳住，别浪队友</h3></div></body></html>盒子模型
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 300px;height: 50px;border: 1px solid hotpink;}/*不指定子类元素的宽度值*/h3{margin-left: 30px;background-color: purple;}</style></head><body><div><h3>稳住，别浪队友</h3></div></body></html>盒子阴影
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">h1{font-size: 100px;text-shadow: 10px 3px 3px rgba(99, 100, 33, 0.8); /*水平距离 垂直距离 模糊距离 阴影颜色*/}div{width: 200;height: 200px;border: 1px solid rebeccapurple;/*box-shadow: 5px 5px 3px 4px rgba(200, 195, 99, 0.6);*/ /*水平距离 垂直距离 模糊距离 阴影尺寸 阴影颜色 内外阴影[inset outset]*/box-shadow: 0 15px 30px rgba(0, 0, 0, .4);}</style></head><body><h1>稳住，我们能赢</h1><div></div></body></html>练习：水晶效果图片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 300px;height: 300px;background-color: hotpink;margin: 100px;background: url(shui.jpg) 0 0 no-repeat;font-size: 30px;text-align: center;line-height: 300px;color: rgba(255, 255, 255, 0.7); /*颜色半透明*/border-radius: 50%; /*变为一个圆角*/box-shadow: 5px 5px 10px 16px rgba(255, 255, 0255, .4) inset , 5px 4px 10px rgba(0, 0, 0, 0.3); /*盒子阴影内阴影*/}</style></head><body><div>水晶图片</div></body></html>float 浮动
文字环绕
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 500px;height: 500px;border: 1px solid hotpink;margin: 0 auto; /*盒子居中*/font-size: 20px;overflow: hidden;}img{float: right; /*浮动。实现文字环绕效果*/}</style></head><body><div>1991年1月，发行专辑《一起走过的日子》，专辑同名主打歌获得十大劲歌金曲奖以及十大中文金曲奖[116-117] ；2月，发行粤语专辑《爱不完》[118] ；该专辑发行首日录音带的销量达到16万张，而激光唱片的销量则有7.2万张[119] ；6月，发行国语专辑《我和我追逐的梦》；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[116] 。 1992年，在洛杉矶、旧金山等地举行美加巡回演唱会；9月，发行加入 刘德华 刘德华(3张) 华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张[119] ；同年，在提前录制的央视春晚视频中，刘德华与毛阿敏合唱歌曲《心中常驻芳华》[120]<img src="../第一天/a9.png" height="220" width="171" alt="">；此外，他还发行了专辑《谢谢你的爱》，同名主打歌曲获得第十六届十大中文金曲奖[121] 。 1993年1月至2月，在香港红磡体育馆举行20场“真我的风采演唱会”；4月，推出加入飞碟唱片公司后的首张专辑《真情难收》，其中的主打歌曲《一辈子的错》由刘德华作词；11月，推出专辑粤语专辑《答案就是你》，专辑中的歌曲《永远寂寞》获得第16届十大中文金曲获奖[121] 。 1994年，发行国语专辑《忘情水》，同名主打歌获得第17届十大中文金曲奖最受欢迎国语歌曲金奖以及第1届华语榜中榜Channel [V]中文Top 20榜中榜歌曲奖[122-123] ；8月6日至25日，在香港红磡体育馆举行20场演唱会；11月25日，发行国语专辑《天意》；专辑中表达友情的主打歌曲《友谊历久一样浓》是刘德华个人填词的作品；同年，获得十大劲歌金曲奖最受欢迎男歌手奖[11] 。</div></body></html>浮动效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{width: 200px;height: 200px;background-color: hotpink;/*inline-block 转为行内块元素，就可以放到1行，有宽度和高度，但是元素之间有间隙不方便处理*//*float: left;*/ /*左侧浮动*/}div:nth-child(2){ /*伪元素选择器*/background-color: green;float: left; /*默认值left*/}div:nth-child(3){background-color: deeppink;}</style></head><body><div></div><div>如果盒子不加浮动，就是标准流，块级元素自上而下显示</div><div></div></body></html>浮动特性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.father{width: 500px;height: 300px;background-color: orangered;border: 10px solid green;padding: 10px; /*子盒子浮动不回压倒父盒子的paddng和margin*/}.son{width: 100px;height: 100px;background-color: purple;float: left;}</style></head><body><div class="father"><div class="son"></div></div></body></html>浮动特性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">section{width: 800px;height: 800px;background-color: hotpink;}section div:first-child{ /*后代+伪类选择器*/width: 200px;height: 200px;background-color: purple;/*float: left;*/}/*如果熊大和熊二都有浮动，那么就会在同一行，浮动并且盒子顶部自动对齐，如果熊二有浮动，熊大没有浮动，则熊大是标准流，熊二会自动抵在熊大下方。*/section div:last-child{width: 300px;height: 300px;background-color: skyblue;float: left;}</style></head><body><section><div>熊大</div><div>熊二</div></section></body></html>改变浮动元素的模式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">div{height: 200px;background-color: purple;float: left; /*块级元素添加浮动后具有行内块特性*/border: 2px dashed rebeccapurple;}/*行内块特性：可以一行放多个，有宽度和高度 盒子的大小是有内容决定的*/span{height: 100px;background-color: green;float: left; /*行内元素添加浮动后具有行内块的特性*/}</style></head><body><div>魔幻帮填之熊侠在世</div><div>苏乞儿开启皇帝模式</div><span>我的神呀！ 药神！</span><span>世上最好的人，在哪里？</span></body></html>一系列宽度居中
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}/*相同样式可以使用并集选择器*/.top,.banner,.main,.foot{width: 960px;text-align: center; /*文字居中*/margin: 0 auto; /*盒子水平居中*/margin-bottom: 10px;border: 1px dashed #ccc;}.top{height: 80px;background-color: pink;}.banner{height: 120px;background-color: hotpink;}.main{height: 500px;background-color: green;}.foot{height: 150px;background-color: black;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main">main</div><div class="foot">footer</div></body></html>左窄右宽样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}.top,.banner,.main,.foot{ /*并集选择器*/width: 960px;margin:0 auto ; /*盒子水平居中*/border: 1px solid #ccc;text-align: center; /*文字居中*/margin-bottom: 8px;}.top{height: 80px;}.banner{height: 180px;}.main{height: 500px;}.left{ /*左边*/width: 360px;height: 500px;background-color: hotpink;float: left;}.right{width: 590px; /* 600px*/height: 500px;background-color: deeppink;float: right;}.foot{height: 120px;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main"><div class="left">left</div><div class="right">right</div></div><div class="foot">foot</div></body></html>通栏分布样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none; /* 取消列表的默认样式小点 */}.top {height: 60px;background-color: #000;}.banner {width: 960px;height: 400px;background-color: skyblue;margin: 20px auto;border-radius: 15px;}.main{width: 960px;height: 200px;margin: 0 auto;}.main ul li {width: 190px; /*960/5*/height: 200px;background-color: pink;float: left; /* 浮动的目的让多个块级li 一行显示 而且米有缝隙呦 */}.main ul li:nth-child(even) { /* even 偶数 个 odd 奇数 */background-color: purple;}.tooter{height: 100px;background-color: #000;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="main"><ul><li>语文</li><li>数学</li><li>政治</li><li>历史</li><li>社会</li></ul></div><div class="tooter">footer</div></body></html>为什么要清除浮动 因为浮动是漂浮，底部的标准流会自动上提占用浮动的位置
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1{ /*考虑到孩子高度会变，父类不方便确定高度值*/width: 500px;background-color: deeppink;}.box2{width: 500px;height: 240px;background-color: purple;}/*son1和son2是标准流，会撑开盒子*/.son1 { /* son1 和 son2 是标准流，会撑开盒子 */width: 150px;height: 100px;background-color: skyblue;float: left;}.son2{width: 300px;height: 100px;background-color: red;float: left;}</style></head><body><div class="box1"><div class="son1">son1</div><div class="son2">son2</div></div><div class="box2"></div></body></html>清除盒子浮动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1{background-color: deeppink;}.box2{width: 600px;height: 100px;background-color: purple;}.son1{ /*son1和son2是标准流，会撑开父类盒子*/width: 100px;height: 200px;background-color: pink;float: left;}.son2{width: 300px;height: 250px;background-color: deepskyblue;float: left;}/*son1和son2都添加了浮动，浮动元素不回占有位置，父类就没有高度,此时底下的盒子就会跑上来*/.clear{clear: both; /*清除浮动影响*/}</style></head><body><div class="box1"><div class="son1">son1</div><div class="son2">son2</div><!-- 在浮动盒子后面添加一个空盒子 --><div class="clear"></div></div><div class="box2"></div></body></html>BFC清除浮动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1{width: 600px;background-color: pink;overflow: hidden; /*触发BFC可以清除浮动*/}.son1{width: 100px;height: 150px;background-color: purple;float: left;}.son2{width: 100px;height: 200px;background-color: purple;float: left;}.box2{width: 400px;height: 200px;background-color: deepskyblue;}</style></head><body><div class="box1"><div class="son1">son1</div><div class="son2">son2</div></div><div class="box2"></div></body></html>伪元素after清除浮动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1,.box2{ /*如果父类盒子宽度不够，浮动元素会自动另提一行 所以不用指定确定的宽高*/width: 450px;background-color: deeppink;}.box2{width: 500px;height: 240px;background-color: purple;}.son1 { /* son1 和 son2 是标准流，会撑开盒子 */width: 150px;height: 100px;background-color: skyblue;float: left;}.son2{width: 300px;height: 100px;background-color: red;float: left;}/*伪元素产生是行内元素 在整个父元素后面转成块元素 高度为0 隐藏掉点 清除浮动*/.clearfix:after{content: "."; /*尽量添加文本，否则旧版本可能有空隙*/display: block;height: 0;visibility: hidden; /*隐藏盒子*/clear: both; /*清除浮动*/}.clearfix{ /*ie6 ie7处理模式*/*zoom: 1; /*带*这个属性 只有ie6 ie7才可以执行 清除浮动*/}</style></head><body><div class="box1 clearfix"><div class="son1">son1</div><div class="son2">son2</div></div><div class="box2"></div></body></html>双伪元素清除浮动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">.box1{width: 600px;background-color: pink;}.box2{width: 500px;height: 200px;background-color: deeppink;}.son1{height: 100px;width: 150px;background-color: orange;float: left;}.son2{width: 200px;height: 100px;background-color: skyblue;float: left;}.clearfix:after,clearfix:before{content: "";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;}</style></head><body><div class="box1 clearfix"><div class="son1">son1</div><div class="son2">son2</div></div><div class="box2"></div></body></html>Html内外宽度已经清除浮动基础笔记相关推荐
- 品优购项目案例制作需要注意的内容笔记
个人在做的时候遇到的,自己觉得需要注意的内容 模块化 1.有些样式和结构在很多页面会出现,比如页面的头部和底部,大部分页面都有.此时可以把这些结构和样式单独作为一个模块,然后重复使用 2.这里最典型的 ...
- HTML和CSS的常用基础知识笔记
HTML基础知识 标题标签: <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4& ...
- CSS学习笔记（跟随b站pink老师）
.CSS 一.CSS简介 1.1.CSS语法规范 使用HTML时,需要遵从一定的规范,CSS也是如此.熟练使用CSS对网页进行修饰,首先需要了解CSS样式规则. CSS规则由两个主要的部分构成:选择器 ...
- 入职必备技能（三）HTML、CSS、JAVASCRIPT
浮动 文字环绕图片 浮动副作用的解决 position属性 static特征: relative特征: absolute特征(使得元素脱离常规流) fixed(我跟绝对定位是同根生) Javascri ...
- 14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页 电商-分类列表页 电商-注册页 一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
- 01-HTML+CSS
前端开发 一.HTML常用标签 1.文本格式化表钱 :加粗表钱 :倾斜 :删除线 2.容器标签 :标签用来布局,但是现在一行之呢个放一个.大盒子 :标签用来布局,一行上可以多个.小盒子 3.图像标签 ...
- html/css——注意事项
font系列: font-size font-weight font-family font-style line-height 复合写法:font:italic bolder 24px/40px ' ...
- wxWidgets：wxPen类用法
wxWidgets:wxPen类用法 wxWidgets:wxPen类用法 用法详细说明 wxWidgets:wxPen类用法 用法详细说明 #include <wx/pen.h> wxP ...
- canvas基础简单易懂教程（完结，多图）
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https ...
最新文章
- python简单网页服务器示例
- 1+1大于2 联想借东风破浪HPC市场
- 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
- 谷歌chrome xp_将非Google任务列表添加到Chrome
- 网管型光纤收发器产品功能特性详解
- 获取axios的return值
- android Fragments详解一：概述
- spark学习-scala版写的SparkSQL程序读取Hbase表注册成表SQL查询
- linux分配端口未抢占端口,Linux命令之awk：基础知识（一）
- Android笔记——Windows环境下Android Studio v1.0安装教程
- 【基础】弹出框的处理（五）
- 自己写的demo---equals（）跟==的区别
- s7-200与计算机modbus通讯案例,S7-200实现Modbus通信范例(绝对精华)
- mysql批量执行语句_mysql批量执行sql语句
- mumax3 linux安装教程
- python tkinter控件treeview的数据列表显示的实现_code
- r5 5600x性能 r5 5600x有核显吗
- 人体自身的神奇补肾法 ——你在外面花多少钱都学不到的转
- ProcessingJoy —— 油画笔触【JAVA】
- 【OpenPCDet】稀疏卷积SPConv-v1.2代码解读(5)