10-[CSS]-盒模型：border，padding，margin
1、CSS盒子模型
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如图所示：
<!-- 盒模型： 在网页中 基本上都会显示一些方方正正的盒子，这种盒子就被我们称为盒模型
重要的属性： width,height,padding,border, margin
width: 指的是内容的宽度，而不是整个盒子真实的宽度
height: 指的是内容的高度，而不是整个盒子真实的高度
做一个宽度402*402的盒子，你应该如何设计？
-->
<!-- 如果想保证盒子的真实宽度，加width应该减padding 减width 应该加padding -->
2、border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.box{
width: 200px;
height: 200px; /*简写*/
/*border: 5px solid red;*/ /*按照3要素*/
/*宽度，类型，颜色*/ /*border-width: 5px;
border-style: solid;
border-color: red;*/ /*border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/ /* 按照方向分*/
/* 四个值 上 右 下 左 */
/*
border-style: dotted dashed double solid;
border-width: 5px 10px 15px 20px;
border-color: blue red yellow slateblue;
*/ /* 三个值 上 左右 下*/
/*
border-style: dotted double solid;
border-width: 5px 10px 20px;
border-color: blue yellow slateblue;
*/ /* 两个值 上下 左右 */
/*
border-style: dotted solid;
border-width: 5px 20px;
border-color: blue yellow;
*/ /* 一个值 上下左右 */
/*
border-style: dotted;
border-width: 20px;
border-color: blue;
*/ /*设置border没有样式*/
/*border: none;*/ /*border-top: 0;*/
border-left: 10px solid red; }
</style>
</head>
<body> <!--
border: 边框的意思
边框有三个要素： 粗细 线性 颜色 如果颜色不写，默认是黑色的 如果 粗细不写 不显示。 只写线性样式，默认的有上下左右 3px的宽度 solid 默认的黑色 --> <div class="box"></div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css"> /*小三角 箭头指向下方*/
div{
width: 0;
height: 0;
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div></div> </body>
</html>
3.padding内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title> <style type="text/css">
.box{
width: 300px;
height: 300px;
/*padding: 30px;*/
background-color: red;
/*border: 5px solid yellow;*/ /*小属性设置*/
/*padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;*/ /*综合属性设置，用空格隔开*/ /*上 右 下 左*/
/*padding: 20px 30px 40px 50px ;*/ /*上 左右 下*/
/*padding: 20px 30px 40px;*/ /* 上下 左右*/
/*padding: 20px 30px;*/ /*上下左右*/
padding: 20px; }
</style>
</head>
<body> <!--
padding: 就是内边距。 padding的区域是有背景颜色。并且背景颜色和内容区域颜色一样
也就是说background-color这个属性将填充所有的border以内的区域 就是边框到内容之间的距离 padding有四个方向。所以说我们能分别描述4个方向的padding
方法有两种：1.写小属性 2.写综合属性 用空格隔开 -->
<div class="box">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div> </body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
</style>
</head>
<body> <!--
比如说通常我们做站的时候，要清除默认的padding，margin * 效率不高。所以我们要使用并集选择器来选中页面中应有的标签（不同背，因为有人已经给咱们写好了这些清除默认的样式表） body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
--> <ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li> </ul>
</body>
</html>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin:;
padding:;
}
4、margin外边距
/*
内边距：内容区域到边框的距离
内边距会扩大元素所在的区域
注意：
为元素设置内边距 只能影响自己，不会影响其他的元素；
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
background-color: green;
/*margin: 20px;*/ margin-top: 30px;
margin-left: 50px;
margin-bottom: 100px; }
p{
border: 1px solid green;
} </style>
</head>
<body> <!-- margin: 外边距 指的是距离 -->
<div></div> <p>我是一个p标签</p> </body>
</html>
10-[CSS]-盒模型：border，padding，margin的更多相关文章
- Css盒模型属性详解（margin和padding）
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- 尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...
- 干货篇：揭开CSS盒模型神秘的面纱
写博客可以对学习内容进行总结.分享和交流(面对面的技术分享会也不错)... 如果是单纯的记录,印象笔记完全够了. 步入正题,盒模型是web布局核心,掌握基础知识,以后实战中会如鱼得水~ 概念与历史 C ...
- 从零开始学习前端开发 — 3、CSS盒模型
★ css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成 ...
- 重温基础之-css盒模型
所有html元素都可以看作盒子. css盒模型本质上是一个盒子,封装周围的html元素,它包括:外边距,边框,内边距和实际内容. 默认情况下,一个元素的总宽度计算方式: 总宽度=左外边距+左边框+左内 ...
- CSS盒模型的深度思考及BFC
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识 专业的面试,一定会问 CSS 盒模型 ...
- CSS盒模型（Box Model）
阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...
- 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现（含h5/css3新增属性）
大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...
- 4、css盒模型和文本溢出
4:css盒模型和文本溢出 学习目标 1.认识盒子模型 2.盒子模型的组成部分 3.学习盒子模型的相关元素 margin padding 4.文本溢出相关的属性 一.css属性和属性值的定义 盒模型是 ...
随机推荐
- asp.net 對象圖解
- [控件] TranformFadeView
TranformFadeView 效果图: 源码地址: https://github.com/YouXianMing/UI-Component-Collection 注意: maskView是iOS8 ...
- 设置邮箱发送服务|邮箱开始SMTP服务和腾讯云解封25端口的经验总结
原文链接: http://www.lookdaima.com/WebForms/WebPages/Blanks/Pm/Docs/DocItemDetail.aspx?id=7dfaaf63-d36f- ...
- PHP防SQL注入和XSS攻击
摘要: 就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.在用户名输入框中输入:' or 1=1#,密码随便输入,这时候的合成后的SQL ...
- 我的第一个springboot应用+maven依赖管理
第一步:使用Eclipse创建maven工程SpringBootFirst:工程目录如下 第二步:编写依赖文件pom.xml <project xmlns="http://maven. ...
- Js 运算符(加减乘除)
1.加法 + +NaN //NaN,有一个为NaN就为NaN var box=Infinity+Infinity //Infinity var box=-Infinity + -Infinity // ...
- Java虚拟机19：再谈四种引用状态
JVM的四种引用状态 在Java虚拟机5:Java垃圾回收(GC)机制详解一文中,有简单提到过JVM的四种引用状态,当时只是简单学习,知道有这么一个概念,对四种引用状态理解不深.这两天重看虚拟机这部分 ...
- SOJ 4580 动态规划之01背包 （01背包）
Description Sidney想去Gandtom家玩.但Sidney家和Gandtom家之间是高低不平.坑坑洼洼的土路.所以他需要用他的背包装几袋稀的泥,在路上铺平一些干的土,使路变成平整的泥土 ...
- class , field , method
Class类 由于Class类没有公共构造方法,所以创建Class的对象的方法有以下几种: 1.通过Class.forName静态方法返回Class类的一个实例 2.通过类名.class来获取一个Cl ...
- grovvy pipeline 部署
pipeline { agent any stages { stage('Checkout') { steps { echo 'Checkout' checkout([$class: 'GitSCM' ...