目录
背景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 方向的值同内边距一样