04_css盒子模型

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <style type="text/css">
 7 /*
 8   块级标签：占的是一行.
 9   行内标签:占行内的一部分,不能嵌套块级标签
10
11   块级：div p ol
12   行内：span font a
13   */
14 div {15     border-color: red;
16     border-width: 1px;
17     border-style: solid;
18 }
19 #one{20   width:200px;
21   height:300px;
22  /*内边距：
23      注意，内边距会改变自身的宽高
24  padding-left: 100px; */
25  padding-left: 100px;
26 }
27 #two{28     width:100px;
29     height:100px;
30     /*
31         外边距
32     margin-left: 100px; */
33
34
35 }
36 </style>
37 </head>
38 <body>
39 <!--
40 张三<div>张三</div>张三<br> 李四
41 <span>李四</span>李四 -->
42
43     <div id="one">
44         <div id="two"></div>
45     </div>
46
47 </body>
48 </html>

转载于:https://www.cnblogs.com/Forever-IT/p/5205663.html

04_css盒子模型相关推荐

创建一个水平盒子java_盒子模型理解
HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...
【Qt】Qt样式表总结（四）：CSS盒子模型
官网:http://doc.qt.io/qt-5/stylesheet-customizing.html#box-model [Qt]Qt样式表总结(一):选择器 [Qt]Qt样式表总结(二):冲突和 ...
CSS之布局（盒子模型--外边距）
盒子模型--外边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
CSS之布局（盒子模型--内边距）
盒子模型--内边距: <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
CSS之布局（盒子模型—边框）
盒子模型-边框: <!DOCTYPE html> <html><head><meta charset="UTF-8"><tit ...
从条纹边框的实现谈盒子模型（转）
类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 div: 1 <div></div> 定义如下通用 CSS: 1 2 3 4 5 div{ ...
CSS 盒子模型（转）
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和外边距(marg ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
html盒子宽高,css盒子模型之宽度和高度
盒子模型的宽度width高度height;宽度和高度的单位px像素,使用%动态计算(自适应和响应式) HTML代码 *lt;div class="pag1">*lt;/div ...

04_css盒子模型

04_css盒子模型相关推荐

最新文章

热门文章