CSS-8.2-CSS盒模型相关属性

最新推荐文章于 2022-08-03 19:55:56 发布
最新推荐文章于 2022-08-03 19:55:56 发布
阅读量413 收藏 6
点赞数 2
分类专栏： WEB前端 CSS 文章标签： CSS3内容溢出 CSS边框圆角 CSS图片边框 CSS盒子阴影 CSS外围线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QWH_PYTHON/article/details/101164913
版权

CSS-8.2-CSS盒模型相关属性

盒模型相关属性
1.overflow：内容溢出控制
2.outline：外围线
3.box-shadow：盒子阴影
4.border-radius：边框圆角
5.border-image：图片边框

一：overflow：内容溢出控制

  • 规定了内容溢出盒子时如何处理
  • 属性值
    • visible：默认，内容不会修剪会呈现在元素框之外
    • auto：根据内容多少选择显示滚动条，文字多的时候显示滚动条
    • scroll：无论文字多少，都会显示垂直和水平两个滚动条
    • hidden：超出区域的文字直接隐藏，无法看到
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内容溢出控制</title>
	<style type="text/css">
		div{
			width: 65px;
			height: 65px;
		}
		/* 内容不会被修剪,会呈现在元素框之外 */
		.div1{
			background-color: #f00;
		}
		/* 根据内容多少选择显示滚动条
		文字多的时候显示滚动条 */
		.div2{
			background-color: #0f0;
			overflow: auto;
		}
		/* 无论文字多少，都会显示垂直和水平两个滚动条 */
		.div3{
			background-color: #00f;
			overflow: scroll;
		}
		/* 超出区域的文字直接隐藏，无法看到 */
		.div4{
			background-color: #0ff;
			overflow:hidden;
		}
		/* 超出区域的文字使用省略号代替 */
		.div5{
			height: 70px;
			background-color: #ff0;
			overflow: hidden;
			text-overflow: ellipsis;
			/* 将对象作为伸缩模型显示 */
			display: -webkit-box;
			/* 显示的行数 */
			-webkit-line-clamp:4;
			/* 设置或检索伸缩盒对象的子元素的排列顺序 */
			-webkit-box-orient:vertical;
		}
	</style>
</head>
<body>
	<div class="div1">
		内容不会被修剪,会呈现在元素框之外
	</div> <br> <br>
	<div class="div2">
		根据内容多少选择显示滚动条，文字多的时候显示滚动条
	</div> <br> <br>
	<div class="div3">
		无论文字多少，都会显示垂直和水平两个滚动条
	</div> <br> <br>
	<div class="div4">
		超出区域的文字直接隐藏，无法看到
	</div> <br> <br>
	<div class="div5">
		超出区域的文字使用省略号代替代替代替代替
	</div>
</body>
</html>

效果图
在这里插入图片描述

注意
可以使用 overflow-x 和 overflow-y 设置水平和垂直方向的滚动条是否显示

二：outline：外围线

  • 显示在边框边缘外围的一条线，起到突出元素的作用
  • 外围线的属性写法与边框相同
  • 外围线不会占用空间
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外围线</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: #0ff;
		}
		/* 添加边框会占用空间 */
		.div1{
			border: 10px solid #ff0;
		}
		/* 添加外围线不会占用空间 */
		.div2{
			outline: 10px dotted #0f0;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<span>
		div添加border,边框会占用空间,不会盖住周围的文字
	</span>
	<div class="div2"></div>
	<span>
		div添加outline,外围线不会占用空间,会盖住周围的文字
	</span>
</body>
</html>

效果图
在这里插入图片描述

三：box-shadow：盒子阴影

  • 给元素周围添加阴影效果
  • 属性值
    • X轴阴影距离
      • 必写，可正可负
      • 正值右移，负值左移
    • Y轴阴影距离
      • 必写，可正可负
      • 正值下移，负值上移
    • 阴影模糊半径
      • 可写，只能为正，默认值为0
      • 数值越大，阴影越模糊
    • 阴影扩展半径
      • 可写，可正可负，默认值为0
      • 数值越大，阴影扩大
      • 数值越小，阴影缩小
    • 阴影颜色
      • 可写，默认黑色
    • 内外阴影
      • 可写，默认外外阴影
      • inset：内阴影
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子阴影</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: #0ff;
			box-shadow: 5px 5px 10px 10px red;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

效果图
在这里插入图片描述

四：border-radius：边框圆角

  • border-radius是一个简写属性
  • 可以设置一个元素四个边框的圆角，也可以单独为其中一个角设置圆角样式

border-radio的属性两种写法
1.使用带单位的数值
2.使用百分比设置

单独设置一个角样式
1.border-top-left-radio：设置左上角圆角样式
2.border-top-right-radio：设置右上角圆角样式
3.border-bottom-right-radio：设置右下角圆角样式
4.border-bottom-left-radio：设置左下角圆角样式

设置一个元素四个边框的圆角
1.border-radius: 40px 30px 20px 10px/50px 40px 30px 20px;
2."/前后各有四个值"，依次对应的是左上角、右上角、右下角、左上角
3."/“前表示四顶点沿X轴移动的距离，”/"后表示四顶点沿Y轴移动的距离
4.移动完成后，用弧线连接

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>爱心</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 150px;
			background-color: #f00;
			/* 边框圆角
			仅设置X轴左上角右上角60px，右下角左下角0
			Y轴与X轴相同
			 */
			border-radius: 60px 60px 0 0 ;
			line-height: 100px;
			text-align: center;
		}
		/* CSS3transform变换属性
		简写属性，分开来写会失效
		 */
		.div1{
			transform:translate(60px, 50px) rotate(-45deg);
			 
		}
		.div2{
			transform:translate(96px,-100px) rotate(45deg);
			
		}
	</style>
</head>
<body>
	<div class="div1">1</div>
	<div class="div2">2</div>
</body>
</html>

效果图
在这里插入图片描述

五：border-image：图片边框

  • 当前盒子设置一个图片边框
    • 使用图片进行裁切作为边框显示
  • 代替boder-style边框样式

border-image：图片边框
1.border-image-source：图片路径
2.border-image-slice：图片切片宽度
3.border-image-width：边框宽度
4.border-image-repeat：图片重复方式
5.border-image：简写方式

1、border-image-source：图片路径

  • 用于当作边框的图片地址
    • 使用url()引入图片路径
/* 图片路径 */
border-image-source:url(./background.jpg)

2、border-image-slice：图片切片宽度

  • 由4个值，代表上、右、下、左4条切线，通过4条切线切割，可以将图片分为9宫格
    • 9宫格4个角分别对应边框的4个角（不会进行任何拉伸）
    • 9宫格4条边分辨对应4条边框（会根据设置进行拉伸，铺满，重复等操作）
/* 图片切片 */
border-image-slice：27px 27px 27px 27px；
/* 表示4条切线都是27px */
border-image-slice：27px;

3、border-image-width：边框宽度

  • 边框宽度表示图片边框的宽度大小，使用规则与border类似
/* 边框宽度 */
border-image-width:10px 10px 10px 10px;
/* 表示4条边框的宽度都是10px */
border-image-width:10px;

4、border-image-repeat：图片重复方式

  • 设置边框区域图片的重复方式
  • 属性值
    • stretch：拉伸
    • round：铺满
    • repeat：重复

铺满和重复的区别
1.重复会保持原有4条边的宽度，可能导致角落处无法显示完整一个图标
2.铺满会对4条边进行适当地拉伸、压缩，确保可以正好显示完全

5、border-image：简写方式

/* 图片边框简写 */
border-image:url(./background.ing) 27/10px stretch;
/* webkit浏览器内核专用 */
-webkit-border-image:url(./background.ing) 27/10px repeat;

注意
1.缩写时的顺序必须按照图片路径、切片宽度、边框宽度、重复方式
2.切片宽度和边框宽度用“/”分隔，且只能在边框宽度后带一个px单位

anh_qwh
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS盒子模型及属性
annotation_PLZ的博客
07-24 1982
盒⼦模型 是⽹⻚设计中经常⽤到的⼀种思维模型，由四个部分构成，从内⽽外分别为内容区（ content ）、内边距（ padding ）、边框（ border ）和外边距（ margin ）,CSS为这四部分提供了⼀系列相关属性，通过对这些属性的设置可以丰富盒⼦的表现效果。...
css盒模型有哪些属性
weixin_52255418的博客
11-10 7720
CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。 示例代码： 效果图： 由此可见：外边距margin是不可见的，如果设置了父元素的背景，就可以看到;背景色在边框区域设置一个不同的背景，就可以看到内边距(padding)区域。并且盒模型是由margin(外边界)+border(边框)+padding(内边距)+content(内容)构成的。 二、属性介绍 1、margin属性 概念：margin属性应用于盒子外面的空间，或者是位于盒子与文档中其他元素之间的区域
CSS盒子模型以及相关属性总结
chen__cheng的博客
04-18 1364
CSS盒子模型以及相关属性总结1. 外边距2. 内边距3. 边框3.1边框样式3.2 圆角边框4. 轮廓线5. display元素显示类型5.1 外部显示类型\5.2 内部显示类型6. visibility控制元素显示隐藏7. 元素尺寸设置7.1 min&max-7.2 fill-available自动撑满可用空间7.3 fit-content根据元素内容适应尺寸大小7.4 min-content/max-content 1. 外边距 声明定义 外边距margin简写声明次序： 上、右、下、左
盒子模型解析
shao_xuan_的博客
10-11 1420
盒子模型盒子模型盒子的特性1、外边距属性2、内边距属性3、边框属性4、背景属性 盒子模型 进行网页布局的重要的属性，一个页面由多个盒子组成，每个盒子的内容都不相同 盒子的特性 (1)外边距(margin)：盒子与其他元素之间的额距离 (2)内边距(padding)：也称为填充距离,内容和边框之间的距离 (3)边框(border) 1、外边距属性 外边距属性 作用 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin
2.12 CSS盒模型与定位相关属性
dreamingbaobei的博客
03-25 226
display 属性、盒模型属性、定位属性、弹性盒属性
盒子模型的属性
m0_66868047的博客
03-30 420
宽高width/height 　　在CSS中，可以对任何块级元素设置显式高度。 　　如果指定高度大于显示内容所需高度，多余的高度会产生一个视觉效果，就好像有额外的内边距一样； 　　如果指定高度小于显示内容所需高度，取决于overflow属性，需要滚动条需要设置为overflow:auto。 auto 　　宽高和margin可以设置auto。对于块级元素来说，宽度设置为auto，则会尽可能的宽。详细来说，元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距； 　　高度设置为aut
【CSS】CSS3新特性-新增选择器-盒子模型-滤镜-过渡-2D-3D-透视-动画-浏览器私有前缀等
YK菌的博客
12-20 348
文章目录1. 现状2. 新增选择器2.1 属性选择器2.2 结构伪类选择器2.3 伪元素选择器（重点）使用场景2.3.1 伪元素字体图标2.3.2 仿土豆效果2.3.3 伪元素清除浮动3. 盒子模型4. 其他特性4.1 滤镜 filter4.2 calc函数4.3 过渡transition (重点)5. 2D转换5.1 translate 位移5.2 rotate 旋转5.3 2D转换中心点 transform-origin5.4 缩放scale5.5 2D转换综合性写法5.6总结6. 动画 animati
CSS盒子模型
weixin_45709134的博客
12-22 193
目录CSS盒子模型1.简介2.设置边框和内容(Border,Content)3.内边距（padding）4.外边距(margin)4.1垂直外边距的重叠5.内联元素(inline)的盒子6.盒子的显示(display)7.盒子溢出(overflow)8.文档流（Normal Flow）8.1文档流定义8.2元素在文档流中的特点:8.3脱离文档流9.浮动(float)9.1浮动定义9.2浮动特点 CSS盒子模型 1.简介 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和
CSS 选择器，样式，盒子模型及浮动
weixin_52625590的博客
07-27 2109
CSS 选择器，样式，盒子模型及浮动
[前端]-CSS
JOHN
05-29 318
1. CSS语法规范 1.1 使用方式 （1）行内样式/内联样式 将css的样式写在元素的style属性中，key value间使用冒号，结束使用分号 color: 字体颜色 background-color: 背景色 font-size: 字体大小 语法： <any style="样式声明"/> 样式声明： 样式属性:样式值; 特点： 内联样式无法重用 内联样式优先级最高 由于内联样式优先级最高，无法被修改，所以项目中基本不用 （2）内部样式 <htm
HTML5制作vedio视频播放器ui样式.zip
07-05
HTML5制作vedio视频播放器ui样式是一款支持进度条和音量显示，可全屏预览视频播放器功能。
CSS 一些特别的属性
爱人BT的博客
10-31 779
一、关于 CSS 的重置问题 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b,...
css盒子模型及一些相关属性详细解析
a754334599的博客
12-09 3752
系列文章目录 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 一、CSS 盒子模型 1.CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。注：最常见的盒子是divspan CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模...
盒子模型的组成及其相关属性
m0_55931152的博客
08-03 5109
一、盒子模型的组成 二、盒子模型的组成属性 1、边框属性(border) ⑴边框属性样式(border-style) 属性值 none：没有边框 solid：边框为单实线 dashed：边框为虚线 dotted：边框为点线 double：边框为双实线 综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。 分开写，即 border-top-style 上边框样式 border-bottom-style.
盒子模型基础属性
weixin_30762087的博客
08-10 282
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>盒子模型</title> <!-- 边框（border） 外边距（margin） 内边距（padding） 内容区（content）--> ...
js盒子模型常用属性
sushans的博客
06-17 8886
1.js盒子模型 指的是通过js中提供的一系列的属性和方法，获取页面中元素的样式信息值 例： #box有很多自己的私有属性： HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype var bo
3.盒子模型
疯子渣的博客
03-15 91
盒子模型 盒子模型是我学习css中使用频率最高的模型，其中主要还是理解整个盒子的构成， 以及其中各属性的作用，最重要的问题就是合并嵌套问题。 盒子模型 = 外边距margin + 边框border + 内边距padding + 内容 1.边框 border-color: 边框颜色 border-width: 边框宽度 border-style: 边框样式(none solid) 总: border: 1px solid red; CSS3补充： border-radius: 50%; //圆角
CSS盒子模型各属性层级及基础知识
qi1271199790的博客
01-31 2794
经测试box-shadow应该位于background-image之上并且位于content之下，因此对标签设置内阴影会被其内容（图片）覆盖； 1.设置浮动属性后，会对相邻的元素产生影响，相邻元素特指仅邻后面的元素。  2.受到影响的元素清除flow影响的方法：clear：both；只适用于紧邻后面的元素的清楚浮动，而当父包含块缩成一条时就不起作用了。  或者同时设置width：100%；+
什么是css盒模型？
gaoyuan1044704446的博客
03-02 193
内容（content）、填充（padding）、边框（border）、边界（margin），css盒模型都具备这些属性，这些属性可以用日常生活中的常见事物--盒子做一比喻来理解，所以叫盒子模型。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值