ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第四次网页前端笔记(CSS盒子模型和常用属性)

2022-02-08 20:01:16  阅读:149  来源: 互联网

标签:盒子 元素 边框 background 对齐 网页 CSS 属性


学习网址:

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili

1. CSS盒子模型

1.1 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

1.2 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

1.3 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

 1.4 

 Margin(外边距) - 清除边框外的区域,外边距是透明的。

margin 清除周围的(外边框)元素区域。margin 没有背景颜色,是完全透明的。

margin 可以单独改变元素的上,下,左,右边距,也可以一次改变所有的属性。

1.5

Border(边框) - 围绕在内边距和内容外的边框。

边框样式属性指定要显示什么样的边界。

 border-style属性用来定义边框的样式

 border-width 属性为边框指定宽度。

border-color属性用于设置边框的颜色

 1.6

Padding(内边距) - 清除内容周围的区域,内边距是透明的。

CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。

当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

2. CSS常用属性

2.1 背景:

CSS 属性定义背景效果:

  • background-color属性定义了元素的背景颜色.
  • background-image属性描述了元素的背景图像.
  • background-repeat设置背景图像是否及如何重复。
  • background-attachment背景图像是否固定或者随着页面的其余部分滚动。
  • background-position设置背景图像的起始位置。

2.2 文本:

2.2.1

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 - 如: #FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如: red

2.2.2

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

2.2.3

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

2.3 字体:

CSS字体属性定义字体,加粗,大小,文字样式。

2.4 对齐方式:

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度,并将两边的空外边距平均分配:

2.5 display属性:

display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏

2.6 浮动:

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用。

标签:盒子,元素,边框,background,对齐,网页,CSS,属性
来源: https://blog.csdn.net/qq_62885901/article/details/122829356

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有