html 8 盒子的background 颜色的面积

颜色是从哪里铺？

从盒子的border内边开始铺满盒子内部整个区域

铺到盒子的border内边缘

铺的面积呢？

以前有个错误的思想，盒子width height 是content区的

总宽应该是div的 width + padding-left + padding-right

总长应该是div的 height + padding-bottom + padding-top

同一div中图文并排

布局完美的情况下，如果突然增加padding 会破坏原来的布局。

解决方法，根据增加的padding 值，去调整相对应的原来的盒子的 width height 值

时间： 2024-10-04 03:55:00

html 8 盒子的background 颜色的面积的相关文章

8.2 css3 新增标签盒子模型长度单位颜色渐变径像渐变

# CSS3 盒子模型 * box-sizing 值 content-box 默认值包括所有的值 / border-box 只算边框的长与宽 * resize(调节框的大小) * 值 none不允许 / horizontal调节宽度 / vertical调节高度 / both都可以 * outline轮廓边框 `outline:width style color` * outline-width * outline-color * outli

1 background（复合属性）与font（复合属性） 2 行内块的间距问题 3 行内元素的margin 4 清除浮动 5定位的元素的层级 6 Border-radius: 边框半径

1 background(复合属性)与font(复合属性): background: 颜色图片的链接是否平铺背景位置是否滚动.(可以随意调动或省略) Font: 粗度字体风格字体大小/行高字体样式字体大小和样式不可省略 2 行内块的间距问题行内块元素相邻时,行内块元素之间会有几像素的间距,只有通过浮动解决. 3 行内元素的margin 行内元素的上下外边距不起作用,左右起作用. 4 清除浮动给父盒子设置一个高度 Clear: both Overflow

【CSS进阶】CSS 颜色体系详解

说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照这个顺序进行,内容十分基础,可选择性跳到相应内容处阅读. 色彩关键字嗯,色彩关键字很好理解.它表示一个具体的颜色值,且它不区分大小写.譬如这样 color:red 的 red 即是一个色彩关键字. 在 CSS3 之前,也就是 CSS 标准 2,一共包含了 17 个基本颜色,分别是: 而到了 CSS

CSS基础深入之细说盒子模型

Html任何一个元素(element)都可以当成一个盒子(box)来看待,可以结合现实中的盒子来理解下文,下文其中一些单词应该是通俗易懂的需要记录的单词. 基本情况每一个盒子都有一个内容区域(content area),例如盒子里的一堆文字或者一张图片的边界,其周围是具有一定宽度的padding area,border area,和margin area,还有cotent area(类似于下图中线条的中间跑道部分). 每个area都是具有一定宽度或高度的,譬如在上下方的就是占用高度,在两侧的就

css盒子模型及属性介绍（margin,padding）

每个HTML元素都可以看作装了东西的盒子盒子具有宽度(width)和高度(height) 盒子里面的内容到盒子的边框之间的距离即填充(margin) 盒子本身有边框(border) 而盒子边框外和其他盒子之间,还有边界(margin) 内容填充属性(padding) Padding-top 上填充 Padding-bottom 下填充 Padding-left 左填充 Padding-right 右填充 Demo1: 代码: <div class="oDiv1"> pad

0016 CSS 背景：background

目标理解背景的作用 css背景图片和插入图片的区别应用通过css背景属性,给页面元素添加背景样式能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背景图要设置元素的宽高才可见.] 4.1 背景颜色(color) 语法: background-color:颜色值; 默认的值是 transparent 透明的 4.2 背景图片(image) 语法: background-image : none | url (url) 参数作用 none 无背景

[HDU 4419] Colourful Rectangle (扫描线矩形面积并)

题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4419 题目大意:比矩形面积并多了颜色,问染成的每种颜色的面积. 矩形面积并的扫描线维护的是长度,这道题就是维护每个颜色的长度,写起来很蛋疼. 1 #include <cstdio> 2 #include <cmath> 3 #include <algorithm> 4 #include <cstring> 5 #include <vector> 6

关于border边框重叠颜色设置问题

盒子模型包括:margin border padding content 在标准盒子模型中 conten不包括border和padding 就是他自身内容所包含的区域. 在IE盒子模型中 content包括border和padding 是内容和border padding之和. 关于盒子边框重叠颜色设置问题: //就拿下列标签来说 <ul> <li class="on">房产</li> <li>家居</li> &l

CSS 文本字体颜色(CSS color)

CSS 颜色样式篇目录 (音乐放松椅) 认识CSS 颜色(color) 网页颜色基础两种方法设置对象颜色样式文字颜色控制color 网页背景颜色color 边框颜色color 网页color RGB设置网页color 颜色表 css 颜色样式color总结一.认识CSS 颜色(CSS color) - TOP(音乐放松椅) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范.1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色2.颜色规范与颜色规定:网页使用RGB模式