margin | 易学教程

盒子模型

阅读更多关于盒子模型

在css中，每个元素都可以当作一个矩形的盒子。之所以这样是为了更方便布局。把这些元素作为盒子后，我们的布局就相当于在页面中摆放盒子了。 Content内容区内容区相当于盒子存放东西的空间，位于盒子的最里层。元素的所有子元素都是放在父元素的内容区。值得注意的是，当我们指定一个元素的width和height时，其实只是设置了内容区的宽和高。 padding内边距盒子在内容区周围可能有一层内边距，会影响盒子的大小。内边距是透明的，没有颜色也没有装饰。盒子一共有四个方向的内边距，分别为padding-top、padding-right、padding-bottom、padding-left。可以利用上述属性设置单侧内边距，也可以同时设置四个方向的内边距。例如：padding：10px 20px 30px 40px; 表示的是设置上右下左的内边距分别为10px，20px, 30px, 40px。也可以 padding: 10px 20px 30px; 表示的是上左右下的内边距也可以 padding:10px 20px; 表示的是上下左右的内边距还可以 padding：10px; 表示的是上下左右内边距都为10px. Border边框边框位于盒子的边缘，设置边框需要同时设置border-width、border-color、border

Python学习 Day 041 - css 盒模型

阅读更多关于 Python学习 Day 041 - css 盒模型

主要内容 1.盒模型 2.浮动 1.盒模型 (1)盒模型的属性 width : 内容的宽度 height : 内容的宽度 padding : 内边距,边框到内容的距离 border : 边框,就是指的盒子的宽度 margin : 外边距,盒子边框到附近最近盒子的距离 <title>Title</title> <style> .box{ width: 200px; height:200px; padding:50px; background-color:red; border: 1px solid yellow; margin: 30px; } </style> </head> <body> <div class="box">倚天屠龙记</div> </body> 盒模型代码 (2)盒模型的计算如果保证盒模型不变,当加padding,就要对盒模型的宽或者高减,保证盒模型的不变通过padding能调整子内容的位置,对于padding来说,通常描述的是父子之间的距离 (3)padding(内边距) padding：就是内边距的意思，它是边框到内容之间的距离另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域 padding的设置 <title>Title</title>

检验你的前端基础——Sit the test

阅读更多关于检验你的前端基础——Sit the test

　　最近有时间，想把酝酿的几篇博客都写出来，今天前端小学生带着10个问题，跟大家分享一下学习CSS的一些体会，我觉得想学好CSS，必须保持一颗好奇心和刨根问底的劲头，而不是复制粘贴，得过且过。本人能力有限，这篇文章从构思加完成用了四五天，如果你和我一样是前端小白，不妨仔细斟酌体会，以期领悟到一些东西；如果你是业界大牛，也请你驻足随意瞄上两眼，把言辞内容不妥的地方指出来，我们共同讨论。时刻保持好奇心　　第一问：当margin的值为百分比形式时，为什么浏览器会根据父容器宽度得出计算值？　　在我之前一篇博客检验你的前端基础——Sit the test 中，聊到了margin值为<percentage>时的计算方法。假如有一个父容器宽度400px，高度600px，其子元素设置margin:20% 20%后的计算值应该为“margin:120px 80px”还是“margin:80px 80px”呢？按照那篇博客中的理论，第二个是正确答案。但是在今天这篇文章中，我给出的答案是第一个肯定错，第二个也不一定对。一个符合W3C标准的浏览器会根据父容器的宽度进行计算，但是这个仅限于书写模式为横向的时候。因为在横向排版时，宽度“有迹可循”，可以把浏览器宽度作为参考，但是高度是不固定的，所以margin百分比值在计算时会参考父容器的宽度。当书写模式改为纵向，其计算参考便会变为父容器的高度了。

HTML 之 CSS

阅读更多关于 HTML 之 CSS

CSS 　　　　　　CSS：CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。一、CSS 的四种引用方式　　1.1 行内式　　　行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 1 <p style="color: slateblue;background-color: black">hello p</p> 　　1.2 嵌入式　　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中，不推荐使用。格式如下： 1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 5 <style> 6 div{ 7 color: red; 8 background-color: gray; 9 } 10 </style> 11 </head> 　　 1.3 链接式　　　将一个.css文件引入到HTML文件中，强烈推荐使用。 1 <link type="text/css" rel="stylesheet" href="css.css"> 　　　css.css 是一个 CSS 文件，封装了 CSS 代码。　　1.4 导入式　　　将一个独立的

CSS基础知识

阅读更多关于 CSS基础知识

一、基础知识 1.定义 CSS：层叠样式表，定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 2.CSS语法每个CSS样式有两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 3.CSS注释 /*这是注释*/ 4.CSS的几种引入方式（1）行内样式行内式是在标记的style属性中设定CSS样式。 <p style="color: red">Hello world.</p> （2）内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> （3）外部样式外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入即可。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 二、CSS选择器 1.基本选择器（1）标签选择器 p {color: "red";} （2）ID选择器 #i1 { background-color: red; } （3）类别选择器

CSS知识速递

阅读更多关于 CSS知识速递

CSS的四种引入方式 1.行内式行内式是在标记的style属性中设定CSS样式，这种方式没有体现出CSS的优势，不推荐使用。 <p style="background-color:red">CONTENT</p> 2.嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3 链接式（推荐使用）将一个.css文件引入到HTML文件中，<link>标记写在<head>标记中，体现出css的优势。 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 4.导入式（一般不用）　　将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记写在<head>标记中，使用的语法如下： <style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>　　　导入式存在加载问题（在整个网页装载完后再装载CSS文件

路飞学城Python-Day48

阅读更多关于路飞学城Python-Day48

49-清除浮动1：给父盒子设置高度给父盒子设置高度，这种方式不灵活，公司的产品修改的时候，要求父盒子高度变大，不可能去手动修改尽量不要给父元素去修改高度，不建议这样的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动1：设置盒子高度</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 400px; } ul{ list-style-type: none; } div ul li{ float: left; width: 100px; height: 40px; } .box{ width: 200px; height: 100px; } </style> </head> <body> <div> <ul> <li> Python </li> <li> web </li> <li> linux </li> </ul> </div> <div class="box"> </div> </body> </html> 50-清除浮动2-clear：both 给浮动元素最后面加一个空的div，并且该元素不浮动，这样的方式称为内墙法，然后设置clear:both->清除所有的浮动影响

web前端基础——CSS

阅读更多关于 web前端基础——CSS

web前端基础——CSS CSS 语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 selector { property: value; property: value; ... property: value } 例如 h1 {color:red; font-size:14px;} css的四种引入方式行内式行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。 <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 链接式将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/> 导入式将一个独立的

Why doesn't “margin: auto” center an element vertically?

阅读更多关于 Why doesn't “margin: auto” center an element vertically?

问题 As you can see in the demo below, margin: auto; centers the blue div horizontally, but not vertically. Why not? .box { border: 1px solid red; width: 100px; height: 100px; } .center { background: blue; width: 50px; height: 50px; margin: auto; } <div class="box"> <div class="center"></div> </div> My question is not asking for workarounds. 回答1: As mentioned, this behavior is specified in section 10.6.2 of CSS2.1, and has remained unchanged from CSS2. Block boxes are stacked vertically from top

自用CSS基础笔记-①入门知识

阅读更多关于自用CSS基础笔记-①入门知识

CSS优化界面 CSS选择器：（C3） ①id选择器②类选择器③标签选择器 ④通配符选择器⑤伪类选择器:（链接伪类a:link/visited/hover/active，结构伪类E:frist-child/E:last-child/E:nth-child(n)，目标伪类:target） ⑥复合选择器 ⒈交集选择器[既标签又类名，连写] ⒉并集选择器[逗号] ⒊后代选择器[空格] ⒋子元素选择器[＞] ⑦属性选择器 ⑴E[attr] （attr是属性值） ⑵E[attr=val]（全等） ⑶E[attr^=val]（属性值以val开头）⑷E[attr$=val]（属性值以val结尾）⑸E[attr*=val]（任意位置包含val） ⑧伪元素选择器:: E::frist-letter，E::frist-line，E::selection，E::before，E::after。（前/后添加content）类选择、伪类选择器就是选取对象，而伪元素选择器本质是插入一个行内元素（盒子）审查不到标签却能显示盒模型，要伪元素不占位要用绝对定位。 CSS简写： ①background:url(images/x.png) no-repeat fixed center -25px,url(images/x.png) no-repeat scroll center -25px #000;颜色最后加

订阅 margin