CSS之盒子模型与背景属性————每天一遍小知识

举报
神的孩子在歌唱 发表于 2021/11/25 14:49:34 2021/11/25
【摘要】 前言这是我学习了这个网站整理的笔记,接下来还会==持续更新==。转载说明:务必注明来源,附带本人博客连接。@TOC 一.盒子模型 1.介绍所有HTML元素都可以视为方框。CSS边框模型代表网站的设计和布局。它由==边缘==(margins),==边框==( borders),==内边距==(paddings),和==内容==(content)组成的。这些属性以什么的==顺序==工作:top-...

前言

这是我学习了这个网站整理的笔记,接下来还会==持续更新==。
转载说明:务必注明来源,附带本人博客连接。

@TOC

一.盒子模型

1.介绍

  1. 所有HTML元素都可以视为方框。
  2. CSS边框模型代表网站的设计和布局。
  3. 它由==边缘==(margins),==边框==( borders),==内边距==(paddings),和==内容==(content)组成的。
  4. 这些属性以什么的==顺序==工作:top->right->bottom->left。

在这里插入图片描述

小知识:

  • 网页的每个元素都是一个==盒子==(box)。 CSS使用盒子模型来确定盒子有多大以及如何放置它们。
  • 框模型还用于计算HTML元素的实际宽度和高度。

2. 元素的总宽度和总高度

(1)总宽度等于左右边缘,边框,边距相加:

在这里插入图片描述

(2)总高度:上下相加
在这里插入图片描述

二.自定义边框——border

1.基本设置

  1. border属性允许您自定义HTML元素的边框
  2. 为了向元素添加边框,您需要指定边框的==大小,样式,颜色==。
p {
   padding: 10px;    
   border: 5px solid green;
}

2.边框宽度——Border Width

使用border-width属性可以 单独设置边框宽度

p{
   padding: 10px;    
   border-style: solid;
   border-width: 2px;
}

3.边框颜色——Border Color

可以使用颜色名称RGB十六进制值定义元素的边框颜色。

p.first {
   padding: 10px;
   border-style: solid;
   border-width: 2px;
   border-color: blue;
}

小知识:除非设置border-style属性,否则所有border属性都不会起作用。
作者:RodmaChen

4.边框样式——Border style

  1. 默认值为none
  2. 多种样式:**dotted(点), dashed(虚线), double(双边框)**等。
p {border-style: none;}
p {border-style: dotted;}
p{border-style: dashed;}
p{border-style: double;}
p {border-style: groove;}
p {border-style: ridge;}
p{border-style: inset;}
p{border-style: outset;}
p {border-style: hidden;}

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

5.CSS的边宽和高度——width height

  1. 要设置<div>元素的总宽度和高度为100px:
div {
   border: 5px solid green;    
   width: 90px;
   height: 90px;
}

框的总宽度和高度将为90px + 5px(边框)+ 5px(边框)= 100px;

  1. 可以使用百分比 进行分配。
div {
   border: 5px solid green;    
   width: 100%;
   height: 90px;
}

3.要设置元素的最小和最大高度与宽度,可以使用以下属性:

  1. min-width-元素的最小宽度
  2. min-height-元素的最小高度
  3. max-width-元素的最大宽度
  4. max-height-元素的最大高度
p{
   border: 5px solid green;    
   min-height: 100px;       
}

三.背景——background

1.背景颜色——background color

background-color属性用来指定一个元素的背景色。

列:

body {
   background-color: #C0C0C0;
}
h1 {
   background-color: rgb(135,206,235);
}
p {
   background-color: LightGreen;
}

2.背景图像—— background image

  1. background-image属性中的元素可以设置一个几个背景图像。
  2. URL指定路径的图像文件相对路径绝对路径均受支持。
  3. 默认情况下,背景图像放置在元素的左上角,并在垂直水平方向重复以覆盖整个元素。

作者:RodmaChen

列;为<p>元素设置背景图片。

p {
   padding: 30px;
   background-image: url("1.jpg");
   color: white;   
}

小知识

要指定多个图像,只需用逗号分隔URL

3.背景重复—— background repeat

  • repeat-x:图片延x轴复制
  • repeat-y:图片延y轴复制
  • Inherited:继承父级属性相同的指定值
  • no-repeat:不重复,只有单个图片

列:

body {
   background-image: url("1.png");
   background-repeat: repeat-x;
}
p {
   background-image: url("1.png");
   background-repeat: inherit;
   margin-top: 100px;
   padding: 40px;
}

4.背景的附件(固定与滚动)——background attachment

有效值

  • fixed:固定背景图片
  • scroll:向下滚动页面是,背景也随着滚动
  • Inherit:继承

列:

body {
   background-image: url("1.png");
   background-repeat: no-repeat;
   background-attachment: scroll;
}

公众号名称:神的孩子都在歌唱
转载说明:务必注明来源,附带本人博客连接。

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。