html:display属性

magin、padding

padding:内边距

该属性可使用 1 到 4 种值：
如果规定一种值，比如：div {padding: 50px} - 所有四个内边距都是 50px。
如果规定两种值，比如：div {padding: 50px 10px} - 上内边距和下内边距是 50px，左内边距和右内边距是 10px。
如果规定三种值，比如：div {padding: 50px 10px 20px} - 上内边距是 50px，左内边距和右内边距是 10px，下内边距是 20px。
如果规定四种值，比如：div {padding: 50px 10px 20px 30px} - 上内边距是 50px，右内边距是 10px，下内边距是 20px，左内边距是 30px。

border:边框属性

border-width 设置边框宽度
border-style 设置边框样式
border-color 设值边框颜色

margin:外边距

该属性可使用 1 到 4 种值：
如果规定一种值，比如：div {margin: 50px} - 所有四个外边距都是 50px。
如果规定两种值，比如：div {margin: 50px 10px} - 上外边距和下外边距是 50px，左外边距和右外边距是 10px。
如果规定三种值，比如：div {margin: 50px 10px 20px}- 上外边距是 50px，左外边距和右外边距是 10px，下外边距是 20px。
如果规定四种值，比如：div {margin: 50px 10px 20px 30px} - 上外边距是 50px，右外边距是 10px，下外边距是 20px，左外边距是 30px。

例如：

<html><head><meta charset="utf-8"><title>box</title><style>body{/*背景为黑色*/background: #000;                  }.div1{width: 150px;height: 150px;/*div背景为图中蓝色*/background: #388ecb;/*border为图中的卡其色*/border: 20px solid burlywood;/*外边距30px*/margin-top: 50px;/*内边距30px*/padding-top: 50px;*/}</style><body>         <div class="div1">first div</div><div class="div1">second div</div></body>
</html>

容器：div header section footer

容器可以对大的内容块设置样式属性

https://www.jianshu.com/p/0d596da54e66

页面效果：

display

引用链接
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。
块级元素：

  占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；

行内元素：

  自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。

html:display属性相关推荐

java display html_css html布局之display属性_动力节点Java学院整理
1.HTML元素分类 HTML元素大题可分为内联(inline)元素和块(block)元素. 内联元素(inline) ①元素显示方式:"文本方式",1个挨着1个,不独自占有1行: ...
html display布局,Web布局：display属性
经过CSS盒模型和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念.即在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子):都有自己的视觉格式化(不同的盒子).而其中CSS ...
CSS display 属性
定义和用法 display 属性规定元素应该生成的框的类型. 说明这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 ...
浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
浮动元素的display属性
在页面布局的时候,我们经常会将元素设置成浮动效果来解决一些实际问题,无论当前元素是块级元素还是行内元素, 似乎都有需要设置成浮动的时候,但与此同时,我们有没有想过,在元素被设置成浮动之后,他们的blo ...
CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析
说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见. opacity.visibility.display 这三个属性 ...
Jquery判断元素是否隐藏：display属性状态值
很多时候,我们都要判断元素当前是否处于显示或隐藏状态.Jquery通过判断元素display属性状态值来实现"判断当前操作元素是否显示还是隐藏",实现方法主要使用Jquery提供的 ...
php中border属性,css中display属性和border属性常遇问题讲解
本篇文章给大家带来的内容是关于css中display属性和border属性常遇问题讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助.因为HTML很少有太复杂的问题,所以直接写一篇关于 ...
div的visibility和display属性区别
div的visibility和display属性区别 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;&qu ...
tr的display属性出现td的colspan无效问题
http://www.aichengxu.com/other/9262680.htm 今天在做项目的时候发现用javascript控制 tr 的显示隐藏时,当把tr的显示由"display: ...

html:display属性

magin、padding

容器：div header section footer

display

html:display属性相关推荐

最新文章

热门文章