css-布局1-基本属性
<!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-基本属性相关推荐
- css布局中的居中问题
css布局中的居中问题 作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
- 理解 CSS 布局和块级格式上下文
本文的目的是介绍一些概念来帮你增强 CSS 码力.如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context.你可能没听过这个术语但只要你曾经使用 过CSS 布局你 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
- CSS 布局:40个教程、技巧、例子和最佳实践
前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程.文章的出处在htt ...
- php两个按钮左右怎么做,css布局两个button在同父标签中左右两侧分布的方法
本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法,分享给大家,具体如下: 效果图 布局代码 提交 重置 style="float:right;width:50%&quo ...
- 前端笔记(6)css布局机制,浮动,清除浮动,图片格式,ps切片工具及插件
css样式表/层叠样式表(4) css布局的三种机制 浮动 浮动(float)的扩展 清除浮动 额外标签法(隔墙法) 父级添加overflow属性方法 使用after伪元素清除浮动 使用双伪元素清除浮 ...
- html的高度自适应,CSS布局自适应高度解决方法
原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...
- 典型的DIV+CSS布局——左中右版式
[效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
- 3.实战HTML+CSS布局(实例入门篇)
转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...
- bootstrap 垂直居中 布局_给你一份详细的CSS布局指南,请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...
最新文章
- difference between finance and manufacturing from stakeholder‘s perspective
- Hibernate持久化对象的状态:瞬时状态、持久化状态、托管状态
- 自动挡跑高速用S挡还是D挡? 回答
- phoneGap实际开发中的某些雷区
- 系统学习深度学习(三十二)--Double DQN (DDQN)
- Nginx 从入门到放弃(三)
- 洛谷 P2678 [NOIP2015提高组] 跳石头(二分答案)
- asp.net 连接SQL Server 数据库并进行相关操作
- OpenCV图像处理和图像识别常用函数
- C# task await 等待任务完成
- mysql 脏读 不可重复读 幻读_mysql事务隔离级别/脏读/不可重复读/幻读详解
- 微信小程序之二级联动下拉列表
- PHP MySQL 连接数据库
- 【luogu P2071 座位安排】 题解
- 动态内表的俩栗子_SAP刘梦_新浪博客
- 用Java计算圆周率的十亿位_新世界纪录:谷歌将圆周率计算到 31 万亿位
- 阿布扎比欢迎全世界所有已接种疫苗的旅行者,该政策9月5日起生效
- Thinkphp最新打shang观看视频平台网站源码
- 蓝牙4.0--Android BLE(二)BleLib开源库
- uniApp打包以及发布
热门文章
- html中怎么消除排序的前缀,北京web前端培训-解决css3前缀问题的插件-Autoprefixer...
- [linux]远程kill进程
- [机器学习]朴素贝叶斯原理和基于Spark 实例
- 【AtCoder】ARC 081 E - Don't Be a Subsequence
- Java Lock的使用
- YARN REST API
- centos6.6编译安装lnmp系列之nginx
- 活动目录系列之十二:活动目录的修复(下)
- RocketMQ-项目集成
- srpc 高性能通用 RPC 框架