(前端)html与css,css 8、盒模型、宽高、盒模型内减

盒模型

概述

盒模型:也叫框模型
一个盒子内容包含了五部分:宽度、高度、内边距、边框、外边距。

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{

            width: 400px;
            height: 400px
            padding: 40px;
            margin: 40px;
            border: 1px dashed blue;

        }
        .box p{
            color: red;
            font: 14px/28px "宋体";
            text-indent: 2em;

        }
    </style>
</head>
<body>
    <div class="box">
        <p>北京时间11月1日凌晨,2018-19赛季英格兰联赛杯1/8决赛燃起战火。阿森纳坐镇酋长球场迎战英甲球队布莱克浦,而切尔西则迎来了德比郡的挑战,蓝军昔日功勋兰帕德作为客队主帅重返斯坦福桥。而刚刚结束德比之争的西甲双雄也分别奔赴国王杯战场。国王杯1/16决赛首回合,皇马远赴客场挑战西乙球队梅利亚,而同样是客场作战的巴萨的对手则是莱昂内萨。此外,今晨意甲赛场进行了一场补赛,AC米兰主场迎战热亚那。</p>
    </div>
</body>
</html>

图解↓

2、宽高

宽度:width
高度:height
这个区域是能书写内容的区域,实际内容区域。
实际内容区域:width+height

图解↓蓝色为实际内容区域


盒子占有位置区域:
实际占有区域:width+height+padding+border

蓝色+绿色为实际占有区域。

3、盒模型内减

盒子有时设置了宽高,如果增加内边距和边框,要想占有的位置保持不变,需要对宽高进行内减。

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或大大大
    </div>
</body>
</html>

效果图↓

看的出来这是一个宽400,高300的盒子,如果我想给他加一个6px的边框和40的内边距,代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            padding: 40px;
            border: 6px solid red;
            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或大大大
    </div>
</body>
</html>

效果图↓

当你自己跑一遍代码,你会发现盒子整体都变大了,那么我想加内边距个边框怎么才能不使盒子实际占区域有变大,宽度、高度=400、300-(6*2+40*2) 最终结果 宽度改为308 高度改为208;

代码↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            padding: 40px;
            border: 6px solid red;
            width: 308px;
            height: 208px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或大大大
    </div>
</body>
</html>

效果图↓

虽然和之前一样,但是他的实际内容区域变小。

原文地址:https://www.cnblogs.com/StevenSunYiwen/p/11045439.html

时间: 2024-10-13 20:45:52

(前端)html与css,css 8、盒模型、宽高、盒模型内减的相关文章

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

css/css3实现未知宽高元素的垂直居中和水平居中

其实在平常的一些布局中也经常有要实现元素的垂直居中和水平居中的的需要,下面来写几种css/css3实现的未知宽高元素的水平和垂直居中的写法 ps:不考虑兼容问题(下次会写js实现元素的水平and垂直居中 ) 第一种 css3的transform .ele{ /*设置元素绝对定位*/ position:absolute; /*top 50%*/ top: 50%; /*left 50%*/ left: 50%; /*css3 transform 实现*/ transform: translate(

JS获取盒模型对应的宽高

## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 1 let div = document.querySelect('.test'); 2 let width = div.style.width 3 let height = div.style.height ## currentStyle和getComputedStyle获取所有样式 两者只能获取样式,不能设置样式 let div = document.querySelect('.test'); le

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

XHTML+CSS基础知识(三):盒模型

盒模型的四要素:content(内容).border(边框).padding(内边距).margin(外边距). 页面当中的每一个元素都会被看做是一个矩形框,这个框有内容.内边距.边框.外边距组成. 1.盒模型的四要素分别指什么? 内边距出现在内容区域的周围,如果在元素上添加背景,那么背景会应用于内容和内边距相加组成的区域. 添加边框会在内边距的区域以外添加框线,这些线可以有多种样式,比如实线.虚线.点线等. 在边框外边是外边距,外边距是透明的,一般使用它来控制元素之间的间隔. 2.盒模型中一个

CSS盒子模型与怪异盒模型

         盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准的盒子模型(怪异盒模型) 当前大部分的浏览器支持的是W3c的标准盒模型,也保留了对怪异盒模型的支持,当然IE浏览器沿用的是怪异盒模型.怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器. 一.标准盒模型与怪异盒模型的表现效果的区别之处: 1.标准

什么是CSS盒模型 ?IE盒模型和W3C盒模型是什么?

1.CSS盒模型 盒模型,顾名思义就是一个盒子.生活中的盒子,有长宽高,盒子本身也有厚度,可以用来装东西.页面上的盒模型我们可以理解为,从盒子顶部俯视所得的一个平面图,盒子里装的东西,相当于盒模型的内容(content):东西与盒子之间的空隙,理解为盒模型的内边距(padding):盒子本身的厚度,就是盒模型的边框(border):盒子外与其他盒子之间的间隔,就是盒子的外边距(margin).其中CSS盒模型(图1)分为IE盒模型(图2)和W3C盒模型(图3). 盒模型一共有两种模式,一种是标准

web前端面试试题总结---css篇

CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(margin). 边框(border): (3)区 别: IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些?哪些属性可以继承? * 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选