学习CSS

目录

一、CSS背景概述

二、CSS定位

三、浮动

四.CSS-列表样式

---

一、CSS背景概述

CSS 背景属性用于定义HTML元素的背景。

CSS 背景属性:

background-color
background-image
background-repeat
background-attachment
background-position
下面我们依次来学习！！！

二、background-color
background-color 属性定义了元素的背景颜色.

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："blue"

三、background-image

background-image属性指定用作元素背景的图像

默认情况下，图像会重复，以覆盖整个元素

四、background-repeat

默认情况下，background-repeat属性在水平和垂直方向上都重复图像

 五、background-attachment
background-attachment属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

滚动：background-attachment: scroll
固定：background-attachment: fixed

二、CSS定位

CSS 定位 (Positioning) 属性允许你对元素进行定位

CSS定位分为相对定位和绝对定位

相对定位：设置为相对定位的元素框会偏移某个距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}
绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

三、浮动

使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动属性：用float属性，它的属性值有两个，为right和left两个属性值。

left：左浮动
right：右浮动
1、使用浮动的规则
浮动元素的左外边界不能超出其包含块的左内边界，右亦然
防止元素彼此覆盖，浮动元素的左(或右)外边界必须是源文档中之前出现的左浮动(右浮动)元素的右(或左)外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
浮动元素的左外边界必须是源文件中之前出现的左浮动元素的右外边界，除非后出现浮动元素的顶端在先出现浮动元素的底端下面。
左浮动元素的右外边界不会出现在其右边右浮动元素的左外边界的右边。
一个浮动元素的顶端不能比其父元素的内顶端更高
浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高
如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能比包含该元素所生成框的任何行框的顶端更高。
浮动元素不能超出其包含元素的边界。左(或右)浮动元素的左(或右)边有另一个浮动元素，前者的右外边界不能在其包含块的右(或左)边界的右(或左)边。如果没有足够的空间，浮动元素会被挤到一个新的“行上”
浮动元素必须尽可能高地放置。即满足其他约束条件的前提下，浮动得尽可能高。
左浮动元素必须向左尽可能远，右浮动元素必须向右尽可能远
2、浮动的排序规则
相同方向的浮动元素,先浮动的显示在前面，因为浮动只会盖住标准流
不同方向的浮动元素,左浮找左浮,右浮找右浮
浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定
贴靠现象: 如果浮动的最后一个元素超过了父元素的宽度,会自动找上一个元素贴过去,如果宽度还是不够,继续找上一个~如果父元素宽度还是不够的话,那就只能凑合呆着了
图文混排
3、清除浮动
给前面一个父元素设置高度(在开发中最好不要设置高度,所以此方便不建议使用)

给后边的元素设置clear属性,(注意添加clear属性后margin属性就会失效)

隔墙法

外墙法

中间加个块级元素并设置clear: both (注意: 可以在第二个盒子使用margin-top,但是第一个盒子不能使用margin-bottom,所以一般既不设置第一个盒子的margin-bottom,也不设置第二个盒子的margin-top,而是直接设置额外块级元素的高度)

内墙法

块级元素写到第一个盒子最后面并设置clear: both(注意: 第一个盒子可以使用margin-bottom,第二个盒子也可以使用margin-top.额外块级元素也可以设置高度)

区别: 内墙法可以撑起第一个盒子的高度,而外墙法不可以.(改方法同样不建议使用,因为添加了额外的元素)

四.CSS-列表样式

一、列表的默认样式
ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em)
li 元素没有设置默认的空白（行间距）
dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距
dd 元素的margin-left为40px(2.5em)
p 元素的margin-top，margin-bottom为16px(1em)
二、设置无序列表
list-style-type:circle：设置空心圆
list-style-type:disc：设置方块
list-style-type:square：设置实心圆

 三、设置有序列表

lower-roman：小写罗马数字：i, ii, iii, iv, v…
upper-roman：大写罗马数字：I, II, III, IV, V…
decimal：数字：1, 2, 3, …