今天主要学习了两大标签display和position：中文名字是显示和位置，这两个元素在前端的学习还是很重要的，因为在css的布局里面会经常用到这两种元素。

还有一些其余的标签例：margin，padding，border，line-height，overflow，z-index。

display：

学习一下display中的几个常见的属性,inline，block，inline-block。

inline:使元素变成行内元素，拥有行内元素的特性，可以和其他行内元素在一行，自己不独占一行，不能更改height和width，在padding里能使用所有元素，在margin里只能使用left和right。

block：可以使用块级元素，自己能独占一行，如果没有设定它的width和height，它可以自动填满父元素的宽度，能改变width和height，能在padding和margin里使用任何属性元素。

inline-block：综合了block和inline的一些特性，既有了inline的能在一行内元素在一行，又有了block的能修改width和height，还能使用padding和margin的所有属性元素。

总结：inline在行内显示，block在块元素显示，inline-block在行内块显示。

position：

学习一下常见的position的一些属性：position:absolute，position:relative,position:fixed。

position:absolute:生成绝对定位元素，相对于static元素以外的父元素定位，可以使用任何的上下左右的任何元素属性调整。

position:relative:生成相对定位元素，相对于其他正常的地方进行定位，而且他还会有负像素的移动：例，代码如下

position:fixed：生成固定定位元素，相对于浏览器窗口进行定位，可以通过元素的top,bottom，left，right，元素属性进行规定。

多写一点这个单词是不受块元素和行内元素的影响的。

css

  }

    .div_1{

        position: relative;

        left: 20px;

    }

    .div_2{

        position: relative;

        left: -20px;

html

  <div class="div_1">2033333333333</div>

  <div class="div_2">卧室555555555555</div>

其余代码建个项目可以实现它的效果。

margin：

用我自己的语言去理解吧，官方的语言太难懂，这个单词的意是它是设置外边距的，然后外边距还有四个属性分别是：

margin-top：上外边距

margin-right：右外边距

margin-bottom：下外边距

margin-left：左外边距

它可以浏览器计算外边距，可以像素，厘米，百分比，父元素继承，这个元素也是不受行内元素和块元素的影响的。

padding：

这个是设置内边距的，它也有四个属性，它有下面四个属性来调整内边距的距离，它不允许负内边距值，同时他也不支持块元素和行内元素的使用。

padding-top：上内边距

padding-right：右内边距

padding-bottom：下内边距

padding-left：左内边距

line-height：

主要是设置行间的距离的（行高），使用时是以百分比计算行高的，直接上实例吧：

css

  .small{

            line-height: 90%;

        }

        .big{

            line-height: 900%

        }

HTML

<p>

            这是拥有标准行高的段落。

            在大多数浏览器中默认行高大约是 110% 到 120%。

    </p>

    <p class="small">

            这是拥有标准行高的段落。

            在大多数浏览器中默认行高大约是 110% 到 120%。

    </p>

    <p class="big">

            这是拥有标准行高的段落。

            在大多数浏览器中默认行高大约是 110% 到 120%。

    </p>

效果图

可能效果不是那么直观，多多谅解下。

boder:

是设置边框的边线的宽度，颜色，虚线和实线，等css样式，它和padding，margin一样有着规定的属性元素，left，top，right，button，与他们不同的是它有颜色，和边线的虚实的情况还有宽度的大小，这个元素是属于块内元素，基本上div都能使用块元素。

boder主要的属性有：boder-width（宽度），boder-color（颜色），boder-style（样式）

overflow：

规定内容溢出元素框时发生的事情，以及其它的属性，下面例：

visible：内容不会被修剪，会呈现在元素框之外。

hidden：内容会被修剪，并且其余内容是不可见的。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit:规定应该从父元素继承 overflow 属性的值。

代码：

css

<style>

.flow{

            background-color: aqua;

            width: 150px;

            height: 150px;

            overflow: scroll;

        }

</style>

html

<div class="flow">

            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。

    </div>

根据上面的单词会显示不同的样式。

z-index:

属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,简单的就是在图片上效果特别明显图片可以在字的后面。元素：

auto：堆叠顺序与父元素相等。

number：设置元素的堆叠顺序。

inherit：规定应该从父元素继承z-index的属性值。

代码：

css

img

{

position:absolute;

left:0px;

top:0px;

z-index:-1;

}

html

<h1>This is a heading</h1>

<img src="/i/eg_smile.gif" />

<p>sssds登记数据库数据后即可</p>
vertical-align :
这个元素是水平垂直对齐，它的属性有很多，但是常用的有text-top和text-bottom
用个代码实例吧：
html:
 <body>

     <div class="verticval">

         <p>44654654654<img class="top" src="D:/下载.jpg" >4654656465466</p>

         <p>45646546546<img class="bottom" src="D:/下载.jpg" >46545646546</p>

     </div>

 </body>

css:

 *{

             margin:;

             padding:;

             box-sizing: border-box;}  //设置整体的css属性

         .verticval{

             width: 500px;

             height: 400px;

             border: 1px solid red;　　//设置div的边框的大小

         }

         .verticval img{

             width: 100px;

             height: 50px;　　　　　　　//设置img图片的大小

         }

         .top{

             vertical-align: text-top;　　　//使用vertical-align标签水平垂直对齐

         }

         .bottom{

             vertical-align: text-bottom;　　//使用vertical-align标签水平垂直对齐

         }

float：

把一个图片或者一个文本标签浮动到一个固定的方向，这个标签只有左右浮动。

html代码：

  <p>

         <img class="img_1" src="D:/14972465_204035308167_2.jpg" alt="">

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

         This is some text. This is some text. This is some text.

     </p>

css代码：

 <style>

         *{

             margin:;

             padding:;

             box-sizing: border-box;

         }

         .img_1{

             width: 50px;

             height: 30px;

             float: left ;

         }

     </style>
//使用vertical-align标签水平垂直对齐

display和position以及其余标签的使用的更多相关文章

  1. CSS布局 ——从display，position， float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  2. CSS学习笔记五：display，position区别

    最近常用css,经常在位置方面使用导display与position这两个属性,所以想要弄清楚它们之间的意思. 一.display 作用是规定元素应该生成的框的类型.意思是定义建立布局时元素生成的显示 ...

  3. 【总结整理】display与position之间的关系【较完整】（转）

    display与position之间的关系   以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的 ...

  4. 【20】display,float,position的关系

    [20]display,float,position的关系 如果display为none,元素不显示. 否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为 ...

  5. html5的float属性超详解（display，position， float）（文本流）

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  6. CSS布局 ——从display，position， float属性谈起

    页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...

  7. css中的display以及position属性

    我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个 ...

  8. 谈谈CSS的布局，display、position、float

    前言 前端一直是我的一个很大的缺憾,这段时间痛顶思痛,决定好好的把前台的东西加强,这不,在学习了一段时间js之后,在做一些小练习,却发现最基本的一些css知识却还不了解,所以便有了这篇博文. 块级元素 ...

  9. style="display:none"隐藏html的标签

    隐藏html的标签 <div class="span11 alignment"> <h1>我的虚拟网络</h1> </div> &l ...

随机推荐

  1. PAT_A1099#Build A Binary Search Tree

    Source: PAT A1099 Build A Binary Search Tree (30 分) Description: A Binary Search Tree (BST) is recur ...

  2. [02]APUE：POSIX 正则库（#include <regex.h>）

    正则匹配流程: 声明一个 regex_t 类型的变量(结构体) regcomp 函数会将“正则匹配条件”写入此结构体,并编译成特定的二进制格式(加快匹配速度) 声明一个 regmatch_t 类型的变 ...

  3. Git的故事

    目录 Git Git的概念 Git的安装 Git的配置 Git的指令 Git Git的概念 首先我们要知道git是什么,最根本的概念是版本控制,顾名思义,就是git可以帮助我们控制自己写的代码或者文档 ...

  4. DIV+CSS网页布局常用的一些基础知识

    CSS命名规范 一．文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二．常用类/I ...

  5. Win32SDK应用程序

    转自:https://blog.csdn.net/jxf_ioriyagami/article/details/1486626 1 说在前面    由于VC6及MFC的特点,我们许多人从标准C++学习 ...

  6. python读文件判断是否已到EOF

    python读文件判断是否已到EOF,也即结尾,一般其它语言都是以EOF直接来判断的,比如 if ( fp.read(chunk_size) == EOF), 但python到结尾后是返回空字符串的, ...

  7. node---处理get请求

    const http=require('http') const querystring=require('querystring') const server = http.createServer ...

  8. JavaScript 数据值校验工具类

    /** * 数据值校验工具类 */ var checkService = { // 不校验 none: function () { return true; }, //非空校验 isEmpty: fu ...

  9. thinkphp 调试模式

    ThinkPHP有专门为开发过程而设置的调试模式,开启调试模式后,会牺牲一定的执行效率,但带来的方便和除错功能非常值得. 直线电机哪家好直线电机生产厂家 我们强烈建议ThinkPHP开发人员在开发阶段 ...

  10. SpringCloud及其五大常用组件之Eureka和Zuul

    1.springcloud简介 SpringCloud是Spring旗下的项目之一,它是微服务架构的一种实现方式. 官网地址:http://projects.spring.io/spring-clou ...