CSS学习总结(4)——盒模型/背景属性
CSS盒模型
CSS盒模型是网站的设计和布局。 由边距(margin),边框(border),填充(padding)和实际内容组成。属性以相同的顺序工作:顶部(top),右侧(right),底部(bottom)和左侧(left)。属性工作顺序为顺时针,以上右下左
的顺序。
元素的总宽度
- 带有填充(padding)的盒的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right)的总和。
- 使用CSS设置元素的宽度和高度属性时,可以设置内容区域的宽度和高度。
- 在盒模型中设置背景颜色时,将覆盖内容区域以及填充区域(padding)。
元素的总高度
元素的总高度的计算方式与宽度相同。
- 总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)
border属性
CSS的border属性允许自定义HTML元素的边框。为了向元素添加边框,需要指定边框的大小,样式和颜色
。
p{padding: 10px;border: 6px solid orange;
}
- border宽度
border的属性可以单独设置。border-width
属性指定边框的宽度。
p {padding: 10px; border-style: dotted;border-width: 6px;
}
- border 颜色
可以使用颜色名称关键字,RGB或十六进制值定义元素的边框颜色。 - border-style
- 默认值是none,它没有定义边界。边框样式属性支持各种样式:虚线(dotted),虚线(dashed),双精度(double)等。 在CSS中,可以使用以下属性为不同的边指定不同的边框:border-top-style,border-right-style,border-bottom-style 和 border-left-style。
CSS 宽度和高度
<div>宽和高设定为100px</div>
div {border: 5px dotted blue; width: 90px;height: 90px;
}
- 要设置元素的最小和最大高度或者宽度,可以使用以下属性:
min-width - 元素的最小宽度
min-height - 元素的最小高度
max-width - 元素的最大宽度
max-height - 元素的最大高度
background-color属性
background-color属性用于指定元素的背景颜色。
- 颜色名称关键词:red、blue等;
- 十六进制值:#fff、#000、#6e6e6e等;
- RGB:rgb(255,255,255)、rgba(0,0,0,0.5)等(使用rgba可以实现透明背景色);
background-image属性
background-image属性在元素中设置一个或多个背景图像。 默认情况下,背景图像放置在元素的左上角,并且垂直和水平重复以覆盖整个元素。 要指定多个图片,只需用逗号分隔设置多个url( )属性就可以了。
div {border: 5px dotted blue; width: 90px;height: 90px;background-image: url(09a826a1ce5d0edba28cf3a459c516c0.jpg);}
background-repeat属性
background-repeat属性指定如何重复背景图像。 背景图像可以沿水平轴,垂直轴,两个轴重复,或者根本不重复。repeat-x只会水平重复背景图像。repeat-y只会垂直重复背景图像。如果你的背景图片只想使用一次,请使用no-repeat
- 当background-repeat属性设置为inherit时,它将采用与元素父级的属性相同的指定值。如果只在body上设置background-repeat:repeat-x;。同时设置段落的background-repeat为inherit,它们将采用与body元素相同的属性值。
background-attachment属性
background-attachment属性设置背景图像是固定的还是与页面的其余部分一起滚动。
background-attachment属性的参数:
- scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed:当页面的其余部分滚动时,背景图像不会移动。 设置了fixed属性后,即使元素具有滚动机制,背景图像会固定在某个位置不会跟随页面元素滚动。
- inherit:规定应该从父元素继承 background-attachment 属性的设置。
CSS学习总结(4)——盒模型/背景属性相关推荐
- DIV + CSS 学习笔记(盒模型)
本文目录 一.盒模型 (一)盒边框(border) (二)内边距(padding) (三)外边距(margin) (四)盒内容(element) (五)盒模型计算 (六)块级元素与内联元素的区别和转换 ...
- css盒模型(css的两种盒模型:标准盒模型、怪异盒模型)和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
- 盒模型的属性丶display显示丶浮动
一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <me ...
- CSS基础语法和盒模型
CSS基础语法和盒模型 CSS简介 Cascading Style Sheet 层叠样式表 用于给HTML标签添加样式 CSS3是CSS的最新版本 增加了大量的样式/动画/3D特效以及移动端特性 前端 ...
- extjs中滚动条属性_前端学习随笔6 盒模型及相关属性
注:测试浏览器版本号--chrome 75.0.3770.80:opera 60.0.3255.109:firefox 67.0:ie 11. 一 心得体会 最大的收获是第一次知道了outline(轮 ...
- css中 盒模型的属性包括(),css的盒子模型属性有哪些?css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
- css 盒模型的属性
1.盒模型 2.display 3.浮动 转载于:https://www.cnblogs.com/Tang854416/p/9676424.html
- CSS学习笔记7—盒子模型
盒子模型(CSS重点) 学习目标 理解: 能说出盒子模型有那四部分组成 能说出内边距的作用以及对盒子的影响 能说出padding设置不同数值个数分别代表的意思 能说出块级盒子居中对齐需要的2个条件 能 ...
- CSS如何清除默认样式,背景属性
第一个阶段,开发环境和工具准备 浏览器 (Google,FireFox,-) 下载,安装前端开发工具vscode, 下载.安装 node.npm.webpack.webpack-cli.cnpm,配置 ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector {property: value;property: value;... property: value ...
最新文章
- RabbitMq的学习(一):VirtualHost
- Extjs中使用FusionChart举例
- cms的 php代码,KingCMS/PHP可执行代码
- ubuntu下无法在根目录创建文件夹;permission denied 权限不足问题解决方法
- c语言编译前端,c语言编译器前端的设计与实现.doc
- 基于lis3dh的简易倾角仪c源码_开源网关apisix源码阅读和最佳实践
- STM32F103单片机使用DMA功能读取ADC采样数据
- 拼团功能实现 php_PHP实现微信退款功能
- java程序设计课后答案 刘慧宁_【单选题】建筑立面图中,室外地坪轮廓线应用( )。...
- 苹果电脑(macOS)查看 WiFi 密码的两种方法
- Java基于springboot+vue+elementUI高速公路收费管理系统设计与实现
- Houdini学习笔记——【案例二】消散文字制作
- 纯真数据库理解及根据IP定位地区
- python熊猫弹幕_GitHub - qingyuj/danmu: Python 弹幕包 A live danmu package for python
- 天润云再恢复上市进程:2021年利润下滑七成,称未来业绩增长放缓
- R语言结构方程模型(SEM)在生态学领域中的应用
- oracle中 xD转义,【转】oracle X表汇总
- windows通过独立ip形式访问docker容器
- 雨流计数法及matlab代码【转载】
- 无线传感器网络及应用
热门文章
- Failed to start bean ‘documentationPluginsBootstrapper‘;
- php制作调查问卷,用PHP制作饼图调查表
- php 查oracle 表不存在报错处理,合同信息查询时,报错提示oracle数据库执行异常,表或视图不存在...
- 单片机歌曲代码大全_对于 51 单片机的四大误区!
- linux搭建禅道_linux下搭建禅道项目管理系统
- 取datatable某一列的值_R-缺失值识别与处理
- python语言基础实验一_实验1 Python语言基础
- 使用Standford coreNLP进行中文命名实体识别(NER)
- ML/DL-复习笔记【三】- 算法的评价指标
- 3D点云分割算法汇总