css学习2-css背景、css三大特性and盒子模型

css学习-css背景、css三大特性and盒子模型

css背景

1、颜色：background-color:red
2、图片：background-image: url(不要加引号)
3、背景图片平铺：
background-repeat:repeat(默认的，平铺)/no-repeat(不平铺)/repeat-x(横向平铺)/repeat-y(纵向平铺)
4、*****背景位置：
background-position: x坐标 y坐标
注意：
（1）必须先指定background-image属性
（2）position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。
（3）如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
指定了一个方位名词，另一个值默认居中对齐。
（4）如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y
（5）如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
（6）如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
例：超大背景图片的位置写法
background-position:center top;
5、背景附着(背景是否滚动)：
background-attachment:scroll(默认滚动)/fixed(固定)
6、背景简写：
background:背景颜色 背景图片地址 背景平铺 背景是否滚动 背景位置 ;
7、背景透明：
（盒子颜色半透明，盒子例的内容不受影响）
background:rgba(0,0,0,0.2);(a代表透明度，取值范围0~1)

css三大特性

1、层叠性：样式冲突时，就近原则，写在后面的优先
2、继承性：子承父业（text-，line-,font-）
3、优先级：
(1)选择器相同，执行层叠性
(2)选择器不同，计算权重（继承来的权重：0；标签选择器权重：1；类_：10；id：100；行内样式表：1000；****不存在进位关系）
(3)!important：写在样式属性后面，永远优先。

我们修改样式，一定要看该标签有没有被选中。
1） 如果选中了，那么以上面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0.

盒子模型

一、网页布局的本质：
首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
最后把网页元素比如文字图片等等，放入盒子里面。
二、border（边框）:
1、border-width:
2、border-style: solid(实线)/dashed(虚线)/dotted(点线)
3、border-color:
4、综合性写法(不分顺序，下为通常写法)：border: 粗细(width) 样式(style) 颜色(color)；
5、四条边可以分开写：
例：border-top: 5px solid red；
6、合并相邻边框：border-collapse:collapse;
三、padding（内边距）：
1、重点*******

值的个数	表达意思
1个值	padding：上下左 右
2个值	padding: 上下 左右
3个值	padding：上 左右 下
4个值	padding: 上 右 下 左（顺时针）

2、内边距会撑开原有的盒子大小，所以准确计算内盒（内容）元素的大小，通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小。
（1）盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框
*****（2）padding不影响盒子大小的情况：如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子。
四、margin（外边距）：
1、简写形式（值的个数，表达意思）与padding一致；
2、块级盒子水平居中：
（1）可以让一个块级盒子实现水平居中必须：

盒子必须指定了宽度（width）
然后就给左右的外边距（margin）都设置为auto，

（2）三种写法：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

（3）文本水平居中和盒子水平居中的区别

• 盒子内文本水平居中：text-align(对行内元素、行内块元素都生效)
• 块级盒子水平居中：margin：auto

3、清除元素默认的内外边距

• 以后写css代码的第一句话：

*｛
	margin：0；
	padding：0；
｝

• 行内元素为了照顾浏览器兼容性，尽量只设置左右内外边距，不要设置上下内外边距（不兼容可能不识别）。

4、外边距合并
（1）两个垂直方向上块级元素
当垂直有两个块级元素都添加margin值时，外边距会合并成一个外边距。（只体现在垂直外边距上，对左右外边距没有影响）
解决方法：最好只给一个元素添加margin值。
（2）嵌套块级元素垂直外边距的合并（塌陷 ）
解决方案：

1. 可以为父元素定义上边框。border-top:1px solid transparent(透明);
2. 可以为父元素定义上内边距。padding-top:1px;
3. 可以为父元素添加overflow:hidden。

五、插入图片和背景图片区别
1、插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
2、背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

本文地址：https://blog.csdn.net/weixin_44817062/article/details/107296313