CSS 盒模型概念

来源：互联网发布：linux mongodb 启动编辑：程序博客网时间：2024/06/11 06:01

参考：CSS

CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距
的方式,页面中的所有标记都可以看成是一个盒子，盒模型是我们对网页元素进
行定位的基础，而定位是我们对网页元素进行位置固定的重点知识

元素性质相互转化：
display:block;
display:inline;
display:inline-block;
display:none;

盒模型概念

这里写图片描述

内边距：边框和内容区之间的距离，通过 padding 属性设置
外边距：元素边框的外围空白区域是外边距，通过 margin 属性设置
内边距设置方法：
padding-top:10px;
padding-right:10px;
padding-bttom:10px;
padding-left:10px;
简些：padding:上右左下;
padding:10px 20px 40px 30px;
外边距设置方法：
margin:;用法同上！

这里写图片描述

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><title>第四章 用CSS给网页装潢[4] -构造块级元素</title><style type="text/css">#div1 {    width:200px;    height:200px;    background:#CCFF66;    border:1px solid #000000;    overflow:auto;}#div2 {    width:300px;    height:150px;    background:#FF00FF;    overflow:inherit;}a {    width:200px;    height:200px;    background:#CCFF66;    border:1px solid #000000;    display:block;}#div3 {    width:200px;    height:200px;    background:#00FF99;    border:1px solid #00FF99;    overflow:auto;    display:inline-block;}#div4 {    width:200px;    height:200px;    background:#CC66CC;    border:1px solid #000000;    overflow:auto;    display:inline-block;}#div5 {    width:200px;    height:200px;    background:#FF3399;    border:1px solid #000000;    overflow:auto;    display:none;}</style></head><body><div id="div1">    <div id="div2">        的武器大全我地区我的武器大全我地区我的武器大的武器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武的武器大全我地区我的武器大全我地区我的武全我地区我的武器大全我地区我的武器大全我地区我的武器大全我地区我    </div></div><a href="http://www.sifangku.com">私房库</a><div id="div3">div3</div><div id="div4">div4</div><div id="div5">div5</div></body></html>

<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8" /><title>第四章 用CSS给网页装潢[5] -盒模型概念</title><style type="text/css">#box1 {    width:200px;    height:200px;    background:#FF3399;    border:1px solid red;    padding:10px;    /*        padding:10px;        padding:上下 左右;        padding:上 右 下 左;    */    margin:0px;}body {    border:1px solid #cccccc;    margin:0px;    padding:0px;}p {    background:#999999;    margin:0px;}</style></head><body><div id="box1">    我是一个盒子我是一个盒子我是一个盒子我是一个盒子</div><p>我是一个段落</p></body></html>

阅读全文

0 0