CSS(10)display和浮动

编程之家收集整理的这篇文章主要介绍了CSS(10)display和浮动编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

浮动

标准文档流

块级元素 : 独占一行

h1~h6 p div 列表...

行内元素 : 不独占一行

span a img strong...

行内元素 可以被包含在 块级元素中,反之,则不可以

display

也是一种实现行内元素排列的方式,但是我们很多情况通用float

 block          块元素
 inline         行内元素
 inline-block   是块元素,但是可以内联,在一行
 none

代码

html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <Meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../display/style.css">
 ​
 </head>
 <body>
 ​
 <div>
  块元素div
 </div>
 ​
 <span>
  行内元素span
 </span>
 ​
 </body>
 </html>

css:

 /*
  block         块元素
  inline         行内元素
  inline-block   是块元素,但是可以内联,在一行
  none
 */
 ​
 div{
   width: 100px;
   height: 300px;
   border: 2px solid #779dbd;
   display: none;
 }
 ​
 span{
   width: 100px;
   height: 300px;
   border: 2px solid #779dbd;
   display: block;
 }

浮动

html:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <Meta charset="UTF-8">
   <title>index</title>
 ​
   <link rel="stylesheet" href="../浮动/style.css">
 ​
 </head>
 <body>
 ​
 <div>
   <img src="../浮动/resources/qqyzml.png" alt="">
 </div>
 ​
 <div>
   <img src="../浮动/resources/王一博.jpg" alt="" width="200" height="500">
 </div>
 ​
 <div>
   <img src="../浮动/resources/表情包.jpg" alt="">
 </div>
 ​
 </body>
 </html>

css:

 div{
   width: 200px;
   height: 500px;
   border: 2px solid red;
 }
 ​
 div:nth-of-type(1){
   display: inline-block;
   float: left;
 }
 ​
 div:nth-of-type(2){
   display: inline-block;
   float: right;
 }
 ​
 div:nth-of-type(3){
   display: inline-block;
   float: left;
 }

 

总结

以上是编程之家为你收集整理的CSS(10)display和浮动全部内容,希望文章能够帮你解决CSS(10)display和浮动所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的CSS相关文章

Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下。 CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition。 概述 看一段比
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模拟单
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
效果图如下: 在盒子模型中我们通常会给盒子设置边框属性,使之完成某些功能和样式我们会使用css中的border属性来设置边框一般会通过连写来设置border,他下面还有width,style,colo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
最近在使用MarkDown写公众号文章,并使用MarkDown Here进行排版。发现效果还不错,这边分享一个 MarkDown Here的CSS样式。 /*markdown here 的全局配置*/
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注