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属性和属性值的定义 盒模型是 ...
随机推荐
- linux下postgresql的安装与卸载
安装: sudo apt-get update sudo apt-get install postgresql 启动: sudo /etc/init.d/postgresql start 查看是否启动 ...
- Elasticsearch安装记录
一 安装部分 1.新建用户 elasticsearch不能使用root身份执行 adduser esuser passwd esuser 2.赋予权限 切换到root chown -R esuser ...
- UITableView中cell点击的绚丽动画效果
UITableView中cell点击的绚丽动画效果 本人视频教程系类 iOS中CALayer的使用 效果图: 源码: YouXianMingCell.h 与 YouXianMingCell.m / ...
- 适配iOS6与iOS7
适配屏幕其实很简单,但为了保持兼容性以及写的代码的通用性,以及最小的改动代码,本人按照如下的一种方式来适配,可以一劳永逸. 1. 先定义几个宏,分辨表示应用可以使用区域的高度,屏幕可用区域的高度,屏幕 ...
- thinkphp导出csv文件，用表格输出excel
1.thinkphp导出csv文件 导出csv文件可能就那几行代码,今天有个问题困扰我好久,就是导出之后出现一些html代码,这个不应该,view里面是空的,controller中最后也没有$this ...
- [2018HN省队集训D8T1] 杀毒软件
[2018HN省队集训D8T1] 杀毒软件 题意 给定一个 \(m\) 个01串的字典以及一个长度为 \(n\) 的 01? 序列. 对这个序列进行 \(q\) 次操作, 修改某个位置的字符情况以及查 ...
- Uva10048 Audiophobia （Floyd）
题意:有一个无向带权图,求出两点之间路径的最大边权值最小能为多少. 思路:使用floyd算法跑一边以备查询,每一次跑的过程中dp[i][j]=min(dp[i][j],max(dp[i][k],dp[ ...
- BZOJ2281:[SDOI2011]黑白棋(博弈论,组合数学,DP)
Description 小A和小B又想到了一个新的游戏. 这个游戏是在一个1*n的棋盘上进行的,棋盘上有k个棋子,一半是黑色,一半是白色. 最左边是白色棋子,最右边是黑色棋子,相邻的棋子颜色不同. 小 ...
- 【招聘123】Some good open positions
Software Engineer III - Java, REST, Agile/Kanban https://jobs.cmegroup.com/jobs/3679794-software-eng ...
- c++ 浅拷贝和深拷贝 指针和引用的区别 malloc(free)和new(delete)的区别 重载重写重定义
4.malloc(free)和new(delete)的区别 malloc()函数: 1.1 malloc的全称是memory allocation,中文叫动态内存分配. 原型:extern void ...