display和position以及其余标签的使用
今天主要学习了两大标签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>
<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以及其余标签的使用的更多相关文章
- CSS布局 ——从display，position， float属性谈起(转)
CSS布局 ——从display,position, float属性谈起 页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...
- CSS学习笔记五：display，position区别
最近常用css,经常在位置方面使用导display与position这两个属性,所以想要弄清楚它们之间的意思. 一.display 作用是规定元素应该生成的框的类型.意思是定义建立布局时元素生成的显示 ...
- 【总结整理】display与position之间的关系【较完整】（转）
display与position之间的关系 以防自己忘记写的 网上找的 positon 与 display 的相互关系 元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的 ...
- 【20】display,float,position的关系
[20]display,float,position的关系 如果display为none,元素不显示. 否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为 ...
- html5的float属性超详解（display，position， float）（文本流）
html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...
- CSS布局 ——从display，position， float属性谈起
页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Master ...
- css中的display以及position属性
我们都知道,元素分为行内元素和块级元素,在页面布局中,我们常常需要让行内元素具有块级元素的特性,或者使块级元素转换成行内元素,这就要使用我们的display属性了. 我们先定义三个div: 以上的三个 ...
- 谈谈CSS的布局，display、position、float
前言 前端一直是我的一个很大的缺憾,这段时间痛顶思痛,决定好好的把前台的东西加强,这不,在学习了一段时间js之后,在做一些小练习,却发现最基本的一些css知识却还不了解,所以便有了这篇博文. 块级元素 ...
- style="display:none"隐藏html的标签
隐藏html的标签 <div class="span11 alignment"> <h1>我的虚拟网络</h1> </div> &l ...
随机推荐
- CodeForces 1152D Neko and Aki's Prank
说明 Catalan(i) 表示卡特兰数的第 i 项. 题目链接:http://codeforces.com/problemset/problem/1152/C 题目大意 有 n 个左括号和 n 个右 ...
- Ulimit 文件配置
cat /etc/security/limits.confsudo vim /etc/security/limits.conf * hard nofile 999999 * soft nofile 9 ...
- 如何用Maven创建web项目（具体步骤）转载
使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 本文转载于(http://blog.csdn.net/chuyuqing/article/detai ...
- 3.4_springboot2.x整合spring Data Elasticsearch
Spring Data Elasticsearch 是spring data对elasticsearch进行的封装. 这里有两种方式操作elasticsearch: 1.使用Elasticsearch ...
- 2008年国外50个最佳CSS设计欣赏
这50个CSS网站是由WebDesignerWall评选出来的,很具参考价值.我们在欣赏的同时,也能从中吸取很多灵感,也能从它们的源代码中学习更高级的CSS技术.今年,越来越多的设计师开始使用超大的背 ...
- Vue——组件上使用v-model
一.最近在工作过程中要实现一个搜索模糊匹配功能,考虑到组件的复用,就单独把搜索框抽出来作为一个子组件.在以往的开发中,我一般会在input框中的值变化时向父组件emit一个事件,并带上一些父组件中需要 ...
- java 3des加密问题记录
3des加密有不同的加密模式和填充模式,这个网上很多不多说了,只要保证加解密的时候加密模式和填充模式保持一致就可以了 首先对于密钥的生成,java中有2种方式: 1.第一种,采用ECB模式和不填充模式 ...
- 字典配合split分裂填充
Sub 配送日报()lastrow = Sheets("运营日报").Range("a1048576").End(xlUp).Rowarr = Sheets(& ...
- hibernate的核心思想
Hibernate的核心思想是ROM对象关系映射机制.它是将表与表之间的操作映射成对象与对象之间的操作.也就是从数据库中提取的信息会自动按照你设置的映射要求封装成特定的对象.所以hibernate就是 ...
- Python_pymysql
pymysql安装:pip3 install pymysql 第一个实例:连接数据库进行用户验证 条件:数据库中已存在一个用户表,包含用户名.密码 import pymysql user = in ...