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_网络编程之上传文件案例
初期成果: 客户端: package FileUpload; import java.io.*; import java.net.Socket; import java.util.Scanner; p ...
【默默努力】fishingGame
这个捕鱼游戏挺有意思的,通过发射子弹,打鱼.打鱼的子弹会消耗金币,但是打鱼如果打到了鱼,就会奖励金币的数量. 我如果写这个的话,应该会画一个背景海底,然后生成很多鱼的图片,还要有一个大炮,金币.大炮 ...
【daydayup】weTalk
先看一下项目效果这个是我运行的作者的项目的wetalk-server项目,他还有wetalk-client 项目先放下作者的github项目地址:https://github.com/mangyu ...
Android开发内存泄露检测框架LeakCanary
前言挖坑后续填坑中文网站:https://www.liaohuqiu.net/cn/posts/leak-canary-read-me/ gitbub:https://github.com/squ ...
shell脚本使用需要注意的地方
shell脚本中,函数内部定义变量可以为局部变量和全局变量,局部变量使用local定义,全局变量不带local,全局变量可以在函数外部可见,如下: #!/bin/bash function calle ...
[转]Java多线程
一.线程的生命周期及五种基本状态关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程各重要知识点.掌握了上图中的各知识点,Java中的多线程也就基本上掌 ...
【Uva 1220】Party at Hali-Bula
[Link]:https://cn.vjudge.net/contest/170078#problem/M [Description] 求一个树的最大独立子集; (即树的一个点集,这个点集中任意两个点 ...
容斥原理——poj1091
将m质因子分解,然后枚举选取的质因子个数i进行容斥,每种情况进行一次dfs即可 dfs结束标记:当质因子个数达到i时退出递归,同时累加该解对应的方案数 /* 给定n,m 共有n个数的数组a,不超过m ...
phpstorm中完成一键快速注释函数头
先保存函数,再在函数头写/**+enter就行了 /** * @param $num1 * @param $num2 * @param $opt * @return float|int */ func ...
tiger-complier 问题记录类型检查
1 注意区分 Ty_xxx 和 a_ 的区别 A 开头是对应的是原程序中的一个实体 Ty _ 开头则是类型检查中的一个抽象类代表了一类实体比如 A_recordTy 是原程序中的 type per ...

CSS实例 display display 边距

CSS实例 display display 边距的更多相关文章

随机推荐

热门专题