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和浮动所遇到的程序开发问题。

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

猜你在找的CSS相关文章

常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而
Y(^o^)Y css动画大乱弹之animation。 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧)。@keyframe算是一个动画模板。在其中,
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条,也不希望超出去的内容被放
用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border
开发场景中用到display:inline-block;然后呢,div间就有间隙,但是ajax加载出来的数据没有间隙,解决办法如下 display:inline-block表示行内块元素,后面自带空格
弹窗是一种常见的交互方式,而蒙层则是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互。但是,我们会发现,当弹出遮罩层后,底层body的内容也是可以滚动,显然这不是我们想要的效果,而这个问
html代码是这样的 &lt;div class=&quot;arrow-up&quot;&gt; &lt;!--向上的三角--&gt; &lt;/div&gt; &lt;div class=&quo
前言 还在用图片制作箭头,三角形,那就太lou了。css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题。 先来看看这段代码: CSS绘制三角形和箭头,不用再用图片了 CSS绘制
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注