CSS实例 display display 边距
CSS学习大纲
在标签上设置style属性：
background-color:#2459a2 ;
height:48px ;
编写CSS样式：
1.标签的style属性
2.写在head里面，style标签中写样式
ID选择器
#i1{
background-color:2459a2 ;
height:48px ;
}
class选择器 *****
.c1{
background - color: 2459a2 ;
height: 48px ;
}
<标签 class='名字'> </标签>
标签选择器
div{
background - color: 2459a2;
height: 48px ;
}
所有的div都使用这个样式
层级选择器（空格） *****
.c1 .c2 div{
background - color: 2459a2;
height: 48px;
}
组合选择器（逗号） *****
#i1,.c1,div{
}
属性选择器 *****
对选择到到标签再通过属性再进行一次筛选
.c1[n='alex']{width:100px ;height:200px;}
PS:
优先级，标签上style优先，编写顺序，就近原则
2.5 css样式也可以写再单独的文件中
<link rel="stylesheet" href="commons.css"/> 3、多行注释
/*
...内容...
*/ 4、边框
宽度，样式，颜色 （border: 4px dotted red）
border-left
5、
height, 高度 百分比
width, 宽度 像素，百分比
text-align:ceter, 水平方向居中
line_height, 垂直方向根据标签高度
color 字体颜色
font-size 字体大小
font-weight 字体加粗 6、float 飘
让标签浪起来，块级标签也可以堆叠
老子管不住DIV最后加：
<div style="clear: both;"></div> 7、display 块级标签和行内标签属性转换
display:none;让标签消失
display: inline转换成行内标签
display: block转换成块级标签
display:inline-block 具有inline，默认自己有多少占多少，也可以block设置高度，宽度 <span>行内标签：无法设置高度，宽度，padding , margin
<div>块级标签：可以设置高度，宽度，padding , margin 8、padding , margin(0,aito)
边距
margin 外边距
padding 内边距
CSS学习大纲3
<!DOCTYPE html>
<!--CSS实例1-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:38px;
background-color: #dddddd;
line-height: 38px;
}
</style> </head>
<body style="margin: 0 auto;">
<div class="pg-header">
<div style="float: left;">
收藏本站
</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="clear: both;"></div>
</div>
</div> </body>
</html>
CSS实例1
<!DOCTYPE html>
<!--CSS实例2-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height:38px;
background-color: #dddddd;
line-height: 38px;
}
</style> </head>
<body style="margin: 0 ;">
<div class="pg-header">
<div style="width: 980px;margin: 0 auto;">
<div style="float: left;">
收藏本站
</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div>
<div style="width: 980px;margin: 0 auto;">
<div style="float: left">
logo
</div>
<div style="float: right">
<div style="height: 50px;width: 100px;background-color: #dddddd"> </div>
</div>
<div style="clear: both;"></div>
</div>
</div> <div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
<div style="clear: both;"></div>
</div>
</div> </body>
</html>
CSS实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 30%;background-color:red;float: left;">
style="width: 30%;background-color:red;float: left
</div>
<div style="width: 50%;background-color:green;float: left;">
style="width: 50%;background-color:red;float: left;"
</div>
</body>
</html>
display
<!DOCTYPE html>
<!--CSS中display的应用-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red;display: inline;">display: inline转换成行内标签</div>
<span style="background-color: red;display: none">display:none 让标签消失</span>
<span style="background-color: red;display: block">display: block转换成块级标签</span>
<br/>
<br/>
<br/>
<span style="background-color: red;height: 100px;width: 90px">行内标签测试</span>
<span style="display: inline-block;background-color: red;height: 100px;width: 90px">行内标签双属性测试</span>
<br/>
<br/>
<br/>
<div style="background-color: red;height: 100px;width: 90px">块级标签测试</div>
<br/>
<br/>
<br/>
<a style="background-color: red;">A标签测试</a>
</body>
</html>
CSS中display的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<br/>
<br/>
<br/>
<div style="border: 5px solid red;height: 100px;">
<div style="background-color: green;height: 50px;margin-top: 10px;"> margin外边距 </div>
</div>
<br/>
<br/>
<br/>
<div style="border: 5px solid red;height: 100px;">
<div style="background-color: green;height: 50px;padding-top: 10px;"> padding内边距 </div>
</div>
</body>
</html>
CSS边距
CSS实例 display display 边距的更多相关文章
- CSS布局 ——从display，position， float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- 前端--CSS之使用display:inline-block来布局（转）
CSS之使用display:inline-block来布局 css之display:inline-block布局 1.解释一下display的几个常用的属性值,inline , block, in ...
- CSS布局之display: tables布局
首先来看看display: table的兼容性: 可以看到,除非你还要跟IE6/7较劲,否则display: table不需考虑兼容性. 接下来看看关于table的display可选值: table: ...
- CSS中的display属性
CSS中的display属性 display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的,几个span元素是在同一行内的,如果给sp ...
- CSS深入研究:display的恐怖故事解密(2) - table-cell
上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
- CSS深入研究:display的恐怖故事解密(2) - table-cell(转)
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 上集<CSS深入研究:display的恐怖故事解密(1) - ...
- CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- 细说CSS中的display属性
相信大部分奋战在前端的,尤其在前端攻城的过程中,有一种越陷越深的感觉,不错,一如前端深似海,从此妹子是浮云啊,前端上手容易,深入难啊!下面我就CSS中的display属性讲下我自己所积累的,与大家共享 ...
随机推荐
- java笔试之参数解析（正则匹配）
在命令行输入如下命令: xcopy /s c:\ d:\, 各个参数如下: 参数1:命令字xcopy 参数2:字符串/s 参数3:字符串c:\ 参数4: 字符串d:\ 请编写一个参数解析程序,实现将命 ...
- linux系统使用小记
1.解决Ubuntu不能正常使用vi的问题.sudo apt-get remove vim-common sudo apt-get install vim 2.备份linux系统,注意,有的优盘单 ...
- error in ./src/pages/login.vue?vue&type=style&index=0&lang=less&
vue-cli3创建less工程,npm run serve 无法运行 bug解决方法: rm -rf node-modules 修改package.json为 "less": & ...
- No packages marked for update
问题:用yum安装docker,更新yum存储时,报以下错误,导致yum坏了 [root@localhost yum.repos.d]# vi docker.repo [root@localhost ...
- ActiveMQ 基础
Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件:由于ActiveMQ是一个纯Java程序,因此只需要操作系统支持Java虚拟机,ActiveMQ便可执行.它能很好地 ...
- #、%和$符号在OGNL表达式中的作用
#.%和$符号在OGNL表达式中经常出现,而这三种符号也是开发者不容易掌握和理解的部分.在这里笔者简单介绍它们的相应用途. 1．#符号的用途一般有三种. 1)访问非根对象属性,例如示例中的#ses ...
- php析构函数小结
l 基本语法 class 类名{ public function __destruct(){ //函数体 //析构函数的最重要的作用,就是释放对象创建的资源 //比如 数据库连接, 文件句柄, ...
- Mybatis Plus 入坑(含最新3.X配置)
简介 Mybatis-Plus(简称MP)是一个 Mybatis 的增强工具,在 Mybatis 的基础上只做增强不做改变,为简化开发.提高效率而生. 使用它可以简化单表的操作, 节省开发时间, 国人 ...
- mybatis第二篇—参数绑定
不管我们在做数据库作业或者任务还是当时的仅靠jdbc来写一个管理系统的时候,sql语句需要一些参数,从而来实现模糊查询,精确查询,插入数据,更新数据和删除数据.这些参数,在mybatis里面,又该如何 ...
- 在scrapy中将数据保存到mongodb中
利用item pipeline可以实现将数据存入数据库的操作,可以创建一个关于数据库的item pipeline 需要在类属性中定义两个常量 DB_URL:数据库的URL地址 DB_NAME:数据库的 ...