<!DOCTYPE html>
CSS4-布局1-基本属性

属性:
display
visibility
float
clear

HTML元素类型:行内元素,块级元素

块级元素:最大的区别:换行
行内元素:不换号

<style>
div{background:#f00;width:200px;height:100px;}
span{background:#0f0;width:200px;height:100px;}

/*display*/
div{display:inline;} /*元素转为行内*/
span{display:block;}/*元素转为块级*/
div,span{display:inline-block;}/*元素转为行内块级综合,IE6/7不支持块级元素转化,不常用*/
div{display:none;} /*删除元素,不占位*/

/*visibility*/
div{visibility:hidden;} /*隐藏元素,占位,显示visible,隐藏hidden*/

/*float 浮动*/
h2,h3{float:left;} /*浮动:块级元素横排:left,right,none*/
h4{clear:both;} /*清除浮动*/

</style>
<div>为人民服务ddd</div>
<div>为人民服务ddd</div>
<span>为人民服务sss</span>
<span>为人民服务sss</span>

<h2>h22222222</h2>
<h3>h3333333</h3>
<h4>h44444444</h4>

转载于:https://www.cnblogs.com/lyp123/p/5662912.html

css-布局1-基本属性相关推荐

  1. css布局中的居中问题

    css布局中的居中问题 作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...

  2. 理解 CSS 布局和块级格式上下文

    本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用 过CSS 布局你 ...

  3. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...

  4. CSS 布局:40个教程、技巧、例子和最佳实践

    前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...

  5. php两个按钮左右怎么做,css布局两个button在同父标签中左右两侧分布的方法

    本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法,分享给大家,具体如下: 效果图 布局代码 提交 重置 style="float:right;width:50%&quo ...

  6. 前端笔记(6)css布局机制,浮动,清除浮动,图片格式,ps切片工具及插件

    css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...

  7. html的高度自适应,CSS布局自适应高度解决方法

    原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...

  8. 典型的DIV+CSS布局——左中右版式

    [效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...

  9. 3.实战HTML+CSS布局(实例入门篇)

    转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...

  10. bootstrap 垂直居中 布局_给你一份详细的CSS布局指南,请查收

    作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...

最新文章

  1. difference between finance and manufacturing from stakeholder‘s perspective
  2. Hibernate持久化对象的状态:瞬时状态、持久化状态、托管状态
  3. 自动挡跑高速用S挡还是D挡? 回答
  4. phoneGap实际开发中的某些雷区
  5. 系统学习深度学习(三十二)--Double DQN (DDQN)
  6. Nginx 从入门到放弃(三)
  7. 洛谷 P2678 [NOIP2015提高组] 跳石头(二分答案)
  8. asp.net 连接SQL Server 数据库并进行相关操作
  9. OpenCV图像处理和图像识别常用函数
  10. C# task await 等待任务完成
  11. mysql 脏读 不可重复读 幻读_mysql事务隔离级别/脏读/不可重复读/幻读详解
  12. 微信小程序之二级联动下拉列表
  13. PHP MySQL 连接数据库
  14. 【luogu P2071 座位安排】 题解
  15. 动态内表的俩栗子_SAP刘梦_新浪博客
  16. 用Java计算圆周率的十亿位_新世界纪录:谷歌将圆周率计算到 31 万亿位
  17. 阿布扎比欢迎全世界所有已接种疫苗的旅行者,该政策9月5日起生效
  18. Thinkphp最新打shang观看视频平台网站源码
  19. 蓝牙4.0--Android BLE(二)BleLib开源库
  20. uniApp打包以及发布

热门文章

  1. html中怎么消除排序的前缀,北京web前端培训-解决css3前缀问题的插件-Autoprefixer...
  2. [linux]远程kill进程
  3. [机器学习]朴素贝叶斯原理和基于Spark 实例
  4. 【AtCoder】ARC 081 E - Don't Be a Subsequence
  5. Java Lock的使用
  6. YARN REST API
  7. centos6.6编译安装lnmp系列之nginx
  8. 活动目录系列之十二:活动目录的修复(下)
  9. RocketMQ-项目集成
  10. srpc 高性能通用 RPC 框架