2021-08-10 盒子模型的背景样式和边框样式

最新推荐文章于 2022-09-23 20:51:55 发布
最新推荐文章于 2022-09-23 20:51:55 发布
阅读量618 收藏
点赞数
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53758026/article/details/119579731
版权

一. 盒子模型

例：  

      div {

            width:200px;

            heigth:200px;

            padding:20px;

            margin:20px;

            border:20px solid red;

          }

1.W3C盒子、默认盒子、content-box、内容盒子

         box-sizing:content-box

        内容区域值  200px * 200px

        盒子的大小  200px+20px*2+20px*2=280px

        屏幕的大小  280px+20px*2=320px

2.IE盒子、border-box、边框盒子

        box-sizing:border-box

       内容区域值  200px-20*2-20*2=120px

       盒子的大小  200px*200px

       屏幕的大小  200px+20*2=240px

二. 盒子背景样式-background

1.background-color
为元素设置一种颜色
2.background-image
为元素设置一个背景图片
3.background-size
设置背景的大小 
取值
①cover 背景铺满整个屏幕，（尽量不要使用大图覆盖小范围）
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像
的某些部分也许无法在背景定位区域中。按照背景定位区域的最大边扩展
②contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按
照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有
背景图片。
③百分比
④绝对值
例：

/* 只会拉伸成一张图片 */

background-size: cover;

/* 按图片的宽高比进行拉伸 */

background-size: contain;

4.background-repeat
设置背景图片的重复方式
5.background-origin
设定背景的起始点
6.background-clip
设定背景的覆盖范围
7.background-attachment
设置背景图片的固定点
取值
①scroll
默认值，背景图像会随着页面其余部分的滚动而移动，背景固定在自身
元素上，背景图相对于元素固定，背景随页面滚动而移动，即背景和元素绑定
②fixed
背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置
在了视口区上。
③local
背景图相对于元素内容固定
存在内部滚动条的情况下， scroll 就相当于 fixed ，而 local 就相当于 scroll
8.background-position
设置为背景图像初始位置，可以实现图片精灵
例：

<style>

        body>div {

            width: 600px;

            height: 600px;

            background-color: rgb(214, 213, 213);

            padding: 20px;

        }

        body>div>div {

            height: 135px;

            width: 135px;

            border-radius: 50%;

            background-origin: padding-box;

            background-image: url('images/sprites.jpg');

            margin-bottom: 20px;

        }

        body>div>div:last-child {

            margin-bottom: 0;

        }

        div>div:nth-child(1) {

            background-position: -123px -128px;

        }

        div>div:nth-child(2) {

            background-position: -123px -305px;

        }

        div>div:nth-child(3) {

            background-position: -123px -480px;

        }

        div>div:nth-child(4) {

            background-position: -123px -655px;

        }

    </style>

</head>

<body>

    <!-- 背景图片只引入一次 -->

    <div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>

 只引入以上一张图片实现下面效果，网络只请求一次加快网页加载速度

9.background
背景设置的速记写法
三. 盒子边框样式-border
边框 （ border ）
1.border-width
为元素指定边框的宽度
2.border-style
为元素指定边框样式
3.border-color
为元素指定边框颜色
4.border-radius
为元素指定圆角边框的半径
5.border
边框相关属性的速记写法
例：利用盒子边框做出头像正圆的效果

img {

            /* 头像：正圆 */

            width: 100px;

            height: 100px;

            border-radius: 50%;

            border:5px solid #aaa;

扩展：

            /* 跑道的椭圆 */

            width: 500px;

            height: 100px;

            border-radius: 50px; 

Silver〄line
关注
盒子模型常用到的样式有哪些？背景样式background怎么设置，绝对定位与相对定位的区别
weixin_45788388的博客
04-20 999
盒子模型常用到的样式有哪些？在布局样式中常常需要注意的小细节你发现没有？背景样式background应用详解，绝对定位与相对定位应用举例，在这里都能找到答案。
盒子模型的背景
originalApril的博客
03-16 3319
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、盒子的背景颜色二、盒子的背景图片1.注意细节2.当图片比较小时，控制是否平铺3.设置背景图片在盒子上的位置三、精灵图（雪碧图）四、设置背景图的大小五、复合属性background 前言 盒子的背景：背景颜色，背景图片。只要是一个盒子，就可以设置它的背景。 提示：以下是本篇文章正文内容，下面案例可供参考 一、盒子的背景颜色 背景颜色，默认会填充盒子的内容区域，padding区域，边框区域。并不会填充margin区域。 ba
css盒子边框样式
weixin_30393907的博客
03-02 342
边框样式有全边框和单个边框样式，可对每条边设置不同的样式 如下代码P1为全边框样式，P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css边框样式</title>...
盒子模型的边框及样式
qq_67413159的博客
03-19 3615
盒子的样式----背景、边框、表格
Lance2574的博客
08-22 989
一、盒子的背景样式 1、background-color：为背景设置一种颜色 取值有：关键字、十六进制、RGB、HSL、RGBA、HSLA 2、background-image：给元素设置一个背景图片 取值有：none、url()引入图片的地址 3、background-size：设置背景的大小 取值： cover:背景铺满整个屏幕，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背...
2021-07-13-盒子模型课堂笔记
tubulvxing1的博客
07-13 329
7月13日课堂笔记 css三大模块：盒子模型、浮动、定位 盒子模型（重点） 盒子模型： 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。 1.盒子边框（border） 语法格式：border：border-width| border-style | border-color ; 边框样式用于定义页面中边框
CSS基础----背景样式与盒子模型
你的小甜甜的博客
11-07 348
在我们的编程过程中,经常不光会使用到设置字体样式,还会用到设置背景颜色,背景图片等样式,今天我们就来学习一下关于背景的样式设置 CSS的背景样式: 1.背景颜色: background-color: 颜色 这个属性我们为我们的标签设置背景颜色,其中我们有三种属性值的书写方式: 1. 预定义的颜色表示(red,blue,green,black…) 2.十六进制表示(#ff0000) 3.RGB代码表示：rgb(0,0,0) 而在我们实际开发中最常用用的还是十六进制表示的颜色表示 2.背景颜色透明:
2021-07-17 盒子模型~内容、外边距、内边距、边框
前端卡卡西的博客
07-17 702
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。 每个盒子由四个部分：边距（margin），边框（border），填充（padding），和实际内容（content） 我们可以通过浏览器的开发者工具观察页面的元素，会发现每个元素都是一个盒子： 1.内容content 概念：由内容边界限制，容纳着元素的
python tkinter-08-盒子模型.ev4.rar
最新发布
04-30
在“python tkinter-08-盒子模型.ev4.mp4”这个视频教程中，可能详细介绍了如何利用Tkinter的盒子模型来设计和调整控件的布局，包括通过实践演示如何设置各个部分的大小和位置，以及如何使用布局管理器配合盒子模型...
CSS3样式表-框模型（盒子模型）.pptx
05-06
**CSS3 框模型（盒子模型）详解** 在网页设计中，CSS3框模型（Box Model）是理解和布局页面元素的关键概念。它定义了网页元素如何占据和影响页面空间，包括元素的内容区域、内边距、边框和外边距。框模型使得开发者...
CSS盒子边框样式选择
CasT1R's Blog
08-30 1383
值 说明 dotted 点状虚线 dashed 短横状虚线 solid 实线 double 双线（边框宽度3px起步） groove 3D凹槽边框（边框宽度3px起步） ridge 3D凸槽边框（边框宽度3px起步） outset 3D凸起边框（边框宽度3px起步） inset 3...
第四讲 CSS盒子模型-背景
Fiki515的博客
03-07 1538
一、盒子模型-背景 1、background-color：定义标签的背景颜色 2、background-image：定义背景图片,可定义多背景 例：background-image：url("图片路径")； 3、background-repeat：定义背景图片的显示方式 repeat 图片重复 repeat-x 图片横向重复 repeat-y 图片纵向重复 no-repeat 图片不重复 4、background-position：定义背景图片的
盒子模型和背景设置
weixin_44580880的博客
04-19 1186
rgba最后一个参数表示透明度 注：前三个统一使用，缺一不可 border-style:dobule 双实线 border-dashed;虚线 当weig...
盒子边框
qq_41646730的博客
07-08 629
&lt;body&gt; &lt;div class="q1"&gt;&lt;/div&gt; &lt;div class="q2"&gt;&lt;/div&gt;&lt;body&gt;&lt;style&gt; .q1{ width: 100px; height: 100px; border-co
盒模型--边框（一）
dmpnosvn28419的博客
08-30 170
盒模型--边框（一） 盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。 如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框： div{ border:2px solid red; } 上面是 border 代码的缩写形式，可以分开写： div{ border-widt...
盒子边框常用样式
qq_39509610的博客
12-09 500
none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 double：边框为双实线
14 盒子边框及盒子样式
dskfksdf的博客
06-11 192
1 盒子圆角边框 使用border-radius：length；对边框的四个角进行设置 <style type="text/css"> div { height: 100px; width: 200px; background-color: pink; border-radius:20px; } </style>
盒子模型及边框的使用
qq_46423017的博客
09-23 321
1、什么是盒子模型？ 2、边框 ​编辑 3、内外边距及div居中 内外边距 盒子的计算方式：你这个元素到底多大？ 4、圆角边框及阴影和经验分享 圆角边框 5、阴影 盒子阴影
CSS 盒子模型
鑫宇的博客
03-18 171
盒模型 1.内容区（content） 元素中的所有的子元素和文本内容都在内容区中排列 ,内容区的大小由width 和 height两个属性来设置: width 设置内容区的宽度 height设置内容区的高度 2. 边框（border） 边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部,边框的大小会影响到整个盒子的大小, 要设置边框，需要至少设置三个样式： ①边框的宽度 border-width 说明：
CSS样式总结：兼容性、盒子模型与优先级详解
3. 盒子模型：CSS中的盒子模型指的是元素在页面布局中的空间占用，包括内容区域、边框、内边距和外边距。`width`属性仅定义内容部分的宽度，而整个元素的总宽度还包括其他组成部分。理解这一点对于调整元素的布局和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值