html和css中盒子大小,CSS大小设置实例—

一、浏览器效果和Dreamweaver设计视图：

二、HTML

nbsp;html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

htmlxmlns='http://www.w3.org/1999/xhtml'>

head>

metahttp-equiv='Content-Type'content='text/html; charset=utf-8'/>

linkhref='css/reset.css'rel='stylesheet'type='text/css'/>

linkhref='css/layout.css'rel='stylesheet'type='text/css'/>

title>盒子模型title>

head>

body>

divid='box'>

divid='content'>div>

div>

body>

html>

盒子模型

三、CSS

#box{

width:200px;

height:100px;

margin:10px20px30px40px;

border:solid10pxred;

padding:10px20px30px40px;

background-color:green;

}

#content {

width:100%;

height:100%;

background:blue;

}

#box { width:200px; height:100px; margin:10px 20px 30px 40px; border:solid 10px red; padding:10px 20px 30px 40px; background-color:green;}#content { width:100%; height:100%; background:blue;}

【说明】

1、本实例中使用了css reset.css，在这里，主要重置了body和div的{margin: 0;padding: 0; }

2、在用CSS设计盒子时，可以设置盒子的宽(width)和高(height)属性，但是这个宽和高并不是盒子的实际宽和高，而是盒子内容的宽和高。

本例中，盒子的width和height是蓝色内容的宽和高，而盒子实际的宽和高是：

盒子的实际宽度=左边界+左边框+左填充+宽+右填充+右边框+右边界；

盒子的实际高度=上边界+上边框+上填充+高+下填充+下边框+下边界。

html和css中盒子大小,CSS大小设置实例——盒子模型相关推荐

CSS中的自适应字体大小
本文翻译自:Responsive font size in CSS I've created a site using the Zurb Foundation 3 grid. 我已经使用Zurb Fo ...
html css中文字段落,css中文字行间距怎么设置？
在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下css行间距的设置方法 ...
css中鼠标变成手型设置
css中鼠标变成手型设置不需要:hover选择主要依赖cursor属性,对应的设置值如下: default:标准箭头 //这是默认的样式 pointer:手形光标 wait :等待光标 text: ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
php的样式怎么设置字体大小,css中如何改变字体大小
在css中,可以使用font-size属性来改变字体大小,该属性可以设置字体大小,语法格式为"font-size:值;".实际上font-size属性设置的是字体中字符框的高度,实 ...
CSS大小设置实例——盒子模型
一.浏览器效果和Dreamweaver设计视图: 二.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
css中内编,CSS
在微信小程序之中,对盒子布局的时候,我们要注意布局大小不要超过页面的宽度,否则会出现布局混乱的问题这是.wxml内容: 复制密文点击加密这是.wxss.encryption{ box-sizin ...
css中字体与段落属性设置/文本高级样式
CSS中字体与段落属性毫无疑问,不管什么网站,文字一定是必不可少.文字可以是网页传播信息的主要手段.那么怎么显示文字,才能更加的美观,那么大家需要了解以下文字属性. 字体属性属性用途语法(一些 ...
css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录这个不用多说,就是程序 ...
使html轮廓颜色不同,css中border颜色不同怎么设置？
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...

html和css中盒子大小,CSS大小设置实例——盒子模型

html和css中盒子大小,CSS大小设置实例——盒子模型相关推荐

最新文章

热门文章