背景backgrounds：

1.背景颜色(background-color)：

值的表示：四种：1.rgba三原色+透明度 rgb(255,0,0,1) a表示透明度，范围是0-1,1表示不透明，0表示完全透明

2.rgb三原色 rgb（255,0，0）

3. 英文字母 red

4. 16进制 #fff 推荐使用

2.背景图片（background-image）：url:后面跟图片地址

3.背景平铺 background-repeat：

4.背景位置：

background-position：center

5.背景大小

background-size：

总结：如果我们要设置图片的样式的话，就要写上面的background-xxx写很多次，现在只需要写background一个单词就行了，background后面跟颜色图片的url 平铺位置如下：

集合简写：background：color image repeat position

也就是1-4都可以写在background后面，background-size要单独设置哦

显示模式转换

1.元素类型分三种

行（块）元素：单独成行，一行不能有多个，可以设置宽高，

行内元素：一行可以有多个，不能设置宽高

行内块元素：一行可以有多个，可以设置宽高

2.转化模式

其他类型元素转化成行内元素：display:inline

其他类型元素转化成行（块）元素：display:block

其他类型元素转化成行内块元素：display:inline-block

盒子模型

概念：

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

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

模型图：

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

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

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

Content(内容) - 盒子的内容，显示文本和图像。

边框Border

边框样式：

border-style :

属性值含义

border-style none 默认无边框

dashed 虚线边框

solid 实线边框

double 定义两个边框。两个边框的宽度和 border-width 的值相同

边框颜色：border-color属性用于设置边框的颜色。（注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。）

边框圆角属性：border-radius:给边框设置圆角

Content(内容)

块元素的默认的width ：100%

行内元素的默认的width是内容的长度

盒子中自定义的width指的是内容的宽度

Padding(内边距)

内容到边框的间距

padding:10px 20px 30px 40px 从上面顺时针是各个方向的值

Margin(外边距)

盒子与盒子之间的间距

maring:10px 20px 30px 40px 方向的值同内边距一样

属性	值	含义
border-style	none	默认无边框
	dashed	虚线边框
	solid	实线边框
	double	定义两个边框。两个边框的宽度和 border-width 的值相同

css样式：背景、模式转换和盒子模型相关推荐

css知多少（7）——盒子模型
原文:css知多少(7)--盒子模型 1. 引言从这一节开始,我们就进入本系列的第三部分--css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类--文字.这部分相 ...
CSS核心内容-标准流、盒子模型、浮动、定位
CSS核心内容-标准流.盒子模型.浮动.定位,了解了核心内容才能用CSS设计出一个简单的页面一.基础在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素: 块级元素:一个块级元素占 ...
一个简单的css网页换色例子（盒子模型）
原始的代码来自北京林业大学的MOOC课程:web前端开发,我自己把这个例子又写了一遍,主要是对css部分做了修改(盒子模型杀我),js和HTML部分与课程的源代码基本相同.现在记录一下,首先是代码: ...
HTML、CSS综合02——css，样式表，选择器、盒子模型
回顾复习什么是标签:标签由<tagName>开始,到</tagName>结束. xml的标签基本都是自定义的 html的标签,基本都是规定好的.(可以使用自定义标签)浏览器对 ...
CSS样式（三） - div盒子
CSS样式 - 盒子 CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景内 ...
html盒子边框内部线条,详解CSS从条纹边框的实现盒子模型的方法
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS属性,赶紧去补习一下吧. 2.类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 p: 定义 ...
css知识笔记（二）——盒子模型
盒子模型类比月饼:礼盒是最外层,里面的月饼(伍仁)是页面元素,比如一个div:"伍仁"本身是盒子的内容(可以是文字.图片.另一个标签元素),月饼和月饼盒之间的距离称为盒子模型的内 ...
css标准流/非标准流盒子模型
流:网页设计中就是指元素(标签)排列的方式标准流:元素在网页中就像流水,排在前面的先出现,排在后面的后出现,默认布局方式 <!DOCTYPE html> <html>< ...
CSS代码中的属性，盒子模型
CSS中的属性是由属性名以及属性值来构成的. 字体大小:font-size:16px; 设置的是字体的高字体粗细:font-weight:?; ?包括lighter,normal,bold 字体样 ...

css样式：背景、模式转换和盒子模型

背景backgrounds：

显示模式转换

盒子模型

边框Border

边框样式：

Content(内容)

Padding(内边距)

Margin(外边距)

css样式：背景、模式转换和盒子模型相关推荐

最新文章

热门文章