margin | 易学教程

阿里巴巴面试题

阅读更多关于阿里巴巴面试题

前端面试题目 1. div和span的区别？ div是块级标签，span是行级标签 2. 在html中，position取值有哪几种，默认值是什么？取值：static、relative、fixed、absolute 默认值：static 3. 前端页面由哪三层构成，分别是什么？作用是什么？前端页面构成：结构层、表示层、行为层结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。” 表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。 4. 如何居中一个浮动元素？方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。 <!DOCTYPEHTML> <html> <head> <styletype="text/css"> div{ width: 500px; height: 300px; margin:

div+css网页粗略布局

阅读更多关于 div+css网页粗略布局

我们打开浏览器看到各大网站的导航首页如图，是怎么做出来的呢？比如就拿素描来说吧，看到一个参照物首先不是一开始就画，而是先确定几何构物线，确定物体大致范围比例框架。网页也是的，这就是div+css布局。这时打开ide或是notepad++之类的编辑工具，开始编写代码以及截图测量工具faststone capture，用于取色，测量等我们先别急着编码，我们画个大致的框架，更好方便我们布局有了设计图之后，便开始按比例尺寸编写div+css布局打开测量工具，取出标尺，以及编辑工具编写html代码，做个类似草稿的效果，再创建一个.css，过会编写 <html> <head> <link rel="stylesheet" type="text/css" href="home.css"/>  <meta http-equiv="content-type"type="text/html charset=utf-8"/>  <title>home</title>  </head> <body> <div id="spe">火狐主页</div>  <div id=

定时器的暂停，继续，刷新

阅读更多关于定时器的暂停，继续，刷新

页面挂载的时候定时器搞起 <el-row> <div class="ui-toolbar" style="height: 32px; line-height: 32px;"> <div style="margin-left:10px;" :class="isExecuteTiming ? 'green': 'red'">AUTO Refresh</div> <div style="margin-left:10px; margin-right:10px;"> <el-input v-model="autoRefreshInterval" style="width:50px;padding:0;text-align:center" @change="RefreshIntervalChange($event)"></el-input> </div> <div style="color: gray;">秒</div> <div style="margin-left:20px;cursor: pointer" @click="stopAutoRefreshTimer()" v-if="autoRefreshTimer !== null"> <img style="margin-top:10px;" src="@/assets/img/icon/ico_btn_stop.png" title=

Bootstrap panel unwanted right and left margins on smaller sizes

阅读更多关于 Bootstrap panel unwanted right and left margins on smaller sizes

I created a panel using Bootstrap and the codes below: <section class="container-fluid" id="stats"> <div class="panel panel-default col-md-6"> <div class="panel-heading"> <i class="fa fa-bar-chart fa-lg"></i> <strong>Statistics</strong> </div> <div class="panel-body"> Something ... </div> </div> </section> But the output have a gap from left and right in panel heading. If I remove col-md-6 , the problem became solved. But I need to have it with 6 cols. Please help me ... Edit: You can take a look at this sample http://codepen.io/mbsmt/pen/eNXmoY Hynes You have padding on the left and right

何时在CSS中使用margin和padding [关闭]

阅读更多关于何时在CSS中使用margin和padding [关闭]

在编写CSS时，是否有一个特定的规则或指南应该用于决定何时使用 margin 以及何时使用 padding ？ #1楼 MARGIN vs PADDING ：边距用于在元素中创建该元素与页面的其他元素之间的距离。其中padding用于创建元素的内容和边框之间的距离。边距不是元素的一部分，其中填充是元素的一部分。请参阅下面从 Margin Vs Padding - CSS Properties中提取的图像 #2楼对于您的问题有更多的技术解释，但如果您正在寻找一种方法来考虑边距和填充，这将有助于您选择何时以及如何使用它们，这可能会有所帮助。将块元素与挂在墙上的图片进行比较：浏览器窗口就像墙一样。内容就像一张照片。边距就像框架图片之间的墙壁空间。填充就像照片周围的垫子一样。边框就像一个框架上的边框。在边距和填充之间进行选择时，当你将一个元素与墙上的其他东西间隔开时，使用边距是一个很好的经验法则，当你调整元素本身的外观时，使用填充。边距不会改变元素的大小，但填充通常会使元素变大 1 。 1 可以使用 box-sizing 属性更改此默认框模型。 #3楼边距位于块元素的外侧，而填充位于内部。使用margin将块与其外部的东西分开使用填充将内容移离块的边缘。 #4楼有一点需要注意的是，当自动折叠边距会让你烦恼

博客园主题美化

阅读更多关于博客园主题美化

主题作者的博客：https://www.cnblogs.com/Dy1an/，感谢作者！本博客就是使用当前主题，具体效果如下：页面定制 CSS 代码 * { margin: 0; padding: 0 } a { text-decoration: none; color: #1c2b36 } body { background-color: #fff; font-size: 13px; letter-spacing: 1px } #header { background-image: url(https://img2018.cnblogs.com/blog/979767/201911/979767-20191115092708101-1793403956.jpg); background-size: cover; min-height: 600px; } #header::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: .8; background: #1C1D21; height: 600px; } #header a, h1, img { z-index: 1; color: white; position: relative; } #header

CSS核心内容整理

阅读更多关于 CSS核心内容整理

本文是CSS核心内容整理的第二篇,承接上一篇的内容继续对CSS的一些重要内容进行整理,推荐先看完这个系列的上一篇. 四. 页面布局布局可以说是我认为CSS中最重要的东西,CSS本身是个奇怪的东西一直以来有点游离于Coder和非Coder之间的感觉.本身没有严谨的逻辑,而且有很多奇怪的"习惯",这些在布局中都有所体现. 1. 基本布局概念在布局上高度的用处在于细节和内容,整体是由宽度决定的. 首先从多栏布局开始划分,基本上有3种实现方案:固定宽度、流动、弹性. 固定宽度: 固定宽度的含义我就不解释了,我记得我几年前上大学的时候就有很流行的960Grid布局框架,通常固定布局的大小事900到1100,常用的是960因为基本上所有显示器都满足,同时960可以被16,12,10,8,6,5,4整除,易于分栏. 流动布局: 大小会随用户调整浏览器窗口大小而变化.当页面宽度变化的时候,文本和元素间的位置都可能变化.强调一下,有些童鞋以为流动布局就是响应式设计,这是不一样的.通过CSS媒体查询,适应各种宽度的可变固定布局才叫响应式设计,这和流动布局是不一样的. 弹性布局: 估计见过的人不多,效果比较类似于浏览器的放大和缩放功能,比如当浏览器窗口变宽了,那么里面的所有元素都按照一定比例大小变化.这个由于过于复杂,所以实际应用的例子不多. 2. 宽高是完全不一样的

CSS code highlighter - margin in pre code tag

阅读更多关于 CSS code highlighter - margin in pre code tag

Please look at this fiddle: Here What I am looking for is a way to remove that extra space at top (the one between black circular 1 and top edge of pre tag) in first example and make it look like second one The first example has some extra space above it (except the margin from strong elements), and I know that its because of the extra new-line after <pre><code> I didn't wanted to remove that extra newline as removing it makes the code look really unreadable, so I added this pre > code > strong:first-of-type { margin-top: 10px; } I thought it'll work but I forgot that I might have multiple

CSS Margin Negative without Moving Parent Container

阅读更多关于 CSS Margin Negative without Moving Parent Container

问题 I am trying to get on this page (http://musicaladvocacy.org/) the area where it says "Home" (The White Container in the grey gradient) to go ~60 px up, but as you can see it does that as well as moves the parent container up. I just want the white box to move up NOT the whole thing. So it should look like this: http://musicaladvocacy.org/index-margin.jpg Thanks for any ideas! 回答1: You can apply position:relative; top:-60px; on the element you need to shift up. #el { position:relative; top:

如何理解盒模型

阅读更多关于如何理解盒模型

盒模型有两种，W3C 和 IE 盒子模型 1、W3C定义的盒模型包括 margin、border、padding、content ，元素的宽度 width = content 的宽度； 2、IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的 width = border+padding+content；对盒模型的理解 IE定义的盒模型较为合理，所以在css3中新增了 box-sizing ，包含两个属性 content-box 和 border-box ； 1）content-box 元素的 width = content； 2）border-box 元素的 width = border + padding + content；更多理解对于行内元素 margin-top/margin-bottom 对于上下元素无效，margin-left/margin-righ有效；对于相邻的块级元素 margin-top 和 margin-bottom 两者叠加按照一定的规则； 1）都是整数 margin 值取两者的最大值； 2）都是负数 margin 值取最小值； 3）两者正负相反，margin 值取两者之和；　　　　来源： https://www.cnblogs.com/wangqian888/p/11973458.html

订阅 margin