CSS常用属性
1. 字体属性
color颜色
- 给文字设置颜色
- color: red; /color: #741cc7; /color: rgb(172,25,44);
- rgb模式:根据红绿蓝三原色进行混合而成的颜色模式。每个原色的取值范围是0-255，一共256个数值。
font-family字体
- 定义元素内文字的字体。
- 属性值可以有多个，用逗号分隔。
- 可以设置多个字体名称，在实际加载中只会选择一种加载，选择的依据是书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。
- 浏览器中加载的字体是用户机器自带的，如果用户的电脑中没有设置字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。
font-size字号
-
设置文字大小，可以使用相对长度单位，也可以使用绝对长度单位，推荐使用相对长度。
- 相对长度单位:
- px像素值;
- em倍数，继承自祖先元素设置的字号倍数;
- %百分比，继承自祖先元素设置的字号百分比。
- 绝对长度单位:
- in英寸;
- cm厘米;
- mm毫米;
- pt点。
- 如果HTML中不设置字号，不同的浏览器有自己默认的加载字号，比如chrome、IE默认显示字号为16px
- 不同浏览器也有自己最小加载显示字号，如果设置字号低于最小字号，都以最小字号加载，0除外。chrome最小加载8px,IE最小加载1px。
- 实际应用：网页最小设置字号必须是12px,如果低于12px会出现兼容性问题，网页普遍使用14px+。尽量使用12px、14px、16px等偶数的数字字号，IE6等老式浏览器支持奇数会有bug。
💡 实际工作中的字号，需要以设计图为准。
- 相对长度单位:
font-weight字体粗细
- 作用：设置文字是否加粗显示。
- 属性名：font-weight，属于font属性的一个单一属性。
- 属性值有两种方式：单词类型、数字类型。
- 属性值为normal时，定义标准字体(默认值为normal)
- 属性值为bold时，定义粗体字符，b、strong标签的默认值。
- 属性值为bolder时，定义更粗体的字体。
- 属性值为lighter时，定义更细的字体。
- 属性值为数字时，100~900之间的整百数字。数字越大，文字显示越粗。其中400等价于normal，700等价于bold。
font-style字体风格
- 作用:设置文字是否斜体显示。
- 属性名:font-style，属于font属性的一个单一属性。
- 属性值:单词。
- 属性值为normal时，设置正规的字体，大多数标签的默认值。
- 属性值为italic时，设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示。
- 属性值为oblique时，设置倾斜的文字，只是将文字倾斜显示，与字体无关。
line-height行高
💡 注：实际为文本属性，但可以写在font属性中，暂时归类到字体属性中学习。
- 作用:设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
- 属性名:line-height,属于font属性的一个单一属性。
- 当属性值为px像素值时，设置的行高的具体像素值。
- 当属性值为百分比数值时，设置本身字号像素值的百分比。
- adobe Fireworks软件,网页作图软件，专为网络图形设计的图形编辑软件。
- Fireworks软件初始设置:选中文字工具，在属性栏中将平滑消除锯齿，更改为不消除锯齿，方便文字的像素点清晰显示。
- 量取行高步骤:
- 第一步:确定文字字号和字体。使用文字工具，书写两个与内容相同的文字，调整字号和字体，直到两个文字都完全重合，就是我们需要的字号和字体。制作时，设置一个与内容文字颜色差异较大的字体颜色。（常用：微软雅黑/宋体）
- 第二步: 根据已知的字号和字体，再书写上下对齐的两行文字，调整属性面板的行高值单位为像素，更改数值大小，直到两行文字都对齐，得到的就是我们需要的行高值。
💡 注:行高是文字实际占有的高度，文字在行高内是垂直居中的。
font字体综合属性
-
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
-
font属性五个单一属性的值可以进行合写，属性值可以有2~多个，值之间用空格进行分割。
-
写法一：
-
font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。
.fontprop { font: 20px "宋体"; }
-
-
写法二：
-
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔。
.fontprop { font: 20px/28px "宋体"; }
-
-
写法三：
-
font属性需要设置加粗和斜体，这两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置。
.fontprop { font: bold italic 20px/28px "宋体"; }
-
2. 文本属性
text-align水平对齐
- 作用:设置文本水平方向的对齐。在盒子中，不论文本是单行还是多行，都会对应方向对齐。
- 属性值：三个方向单词。
- 属性值为left，居左对齐，大部分标签的默认值。
- 属性值为center，居中对齐。
- 属性值为right，居右对齐。
text-decoration文本修饰
- 作用:设置文本整体是否有线条修饰效果。
- 属性值:
- none:没有修饰，大部分标签的默认值
- overline:上划线
- line-through:中划线，删除线，<del>标签默认值。
- underline:下划线，<a>标签的默认值。
text-indent文本缩进
- 作用:设置段落首行是否进行缩进。
- 属性值：
- px单位，表示首行缩进多少像素。
- em单位，表示首行缩进几个中文字符的位置。(如常用的首行缩进2字符)
- 百分比，表示缩进文字所在标签的父级标签的width属性值的百分比。(不常用)
- 注：属性值区分正负，正整数表示向右缩进，负数表示向左缩进。
3. 盒模型属性
盒模型概念
-
概念:盒模型又叫狂模型，包含五个用来描述盒子位置、尺寸的属性，分别时宽度width、高度height、内边距padding、边框border、外边距margin。
-
常见盒模型区域:
💡 盒模型的属性中，根据不同属性的效果，可以划分区域。
- 书写元素内容区域: width + height。
- 盒子可以实体化的区域: width + height + padding + border。
- 盒子实际占位的位置: width + height + padding + border + margin。
width宽度
- 作用:设置可以添加元素内容的区域的宽度。
- 属性值:
- auto:默认值。浏览器可计算出实际的宽度。
- px:像素定义的宽度。
- %:定义参考父元素宽度width的百分比宽度。
- 特殊应用:
- 如果一个元素不添加width属性，默认属性值为auto，不同的元素浏览器会根据其特点自动计算实际宽度，例如<div>元素独占一行，其width属性的值会自动撑满父元素的width区域，如果是<span>元素等不需要独占一行的，其width属性的值是内部元素内容自动撑开的宽度。
- <body>元素比较特殊，不需要设置width属性，宽度会自动适应浏览器窗口的宽度。
height高度
- 作用:设置可以添加元素内容的区域的高度。
- 属性值:
- auto:默认。浏览器会计算出实际的高度。
- px:像素定义的高度。
- %:定义参考父元素高度height的百分比高度。
- 特殊应用:
- 如果一个元素不添加height属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容撑开的高度。元素的高度自适应内部内容的高度。
padding内边距
-
作用:设置的是元素的边框内部到宽高区域之间的距离。
-
特点:可以去加载北京，不能书写嵌套的内容。
-
属性值:常用px为单位的数值。
-
padding是一个复合属性，可以根据内边距的方向划分为四个方向的单一属性。
.box1 { width: 200px; height: 200px; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; background-color: pink; } -
简写:
-
有时为了简化书写，一般习惯将四个方向的单一属性进行合写写成padding属性。
-
padding属性值:可以是1~4个值，值之间用空格进行分隔。
-
根据四个方向属性值不同，padding有多种的书写表示方法。根据属性值个数不同，区分了四种表示法：
- 方法一：四值法,设置四个属性值分配给上、右、下、左
.box1 { width: 200px; height: 200px; padding: 10px 20px 30px 40px; background-color: pink; }- 方法二：三值法,设置三个属性值分配给上、左右、下
.box1 { width: 200px; height: 200px; padding: 10px 30px 40px; background-color: pink; }- 方法三：二值法,设置两个属性值，分配给上下、左右
.box1 { width: 200px; height: 200px; padding: 10px 30px; background-color: pink; }- 方法四：单值法,设置属性值只有一个，分配方向上右下左，四边的值相同。
.box1 { width: 200px; height: 200px; padding: 50px; background-color: pink; }
-
border边框
-
作用:设置的是内边距外面的边界区域，作为盒子的实体化的最外层。
-
属性值:由三个值组成，分为线的宽度、线的形状、线的颜色。
-
border属性是一个复合属性，根据划分依据不同可以有多种单一属性的划分方式。
/* 综合属性写法 */ .box1 { width: 200px; height: 200px; padding: 10px; padding-right: 20px; border: 10px solid #f00; background-color: pink; }-
按照属性值类型划分
- border-width线宽
- 作用:设置边框线的宽度。
- 属性值:常用px形式的数值，四个方向都有边框，属性值类似于padding，也有四种值的写法。
- border-style线型
- 作用:设置边框的线条形状。
- 属性值:形状的单词，总体也是类似padding的综合属性写法，有四种值写法。
- none:定义无边框。
- solid:定义实线。
- dashed:定义虚线，在大多数浏览器中呈现为实线。
- dotted:定义点状边框。在大多数浏览器中呈现为实线。
- double:定义双线。双线的宽度等于border-width的值。
- groove:定义3D凹槽边框。其效果取决于border-color的值。
- ridge:定义3D垄状边框。其效果取决于border-color的值。
- inset:定义3D内容凹陷效果。其效果取决于border-color的值。
- outset:定义3D内容凸出效果。其效果取决于border-color的值。
- border-color颜色
- 作用:设置边框颜色。
- 属性值:颜色名或颜色值，整体类似padding综合属性写法，也有四种值的写法。
- border-width线宽
-
按照边框的方向划分
- border-top上边框
- border-right有边框
- border-bottom下边框
- border-left左边框
💡 每个单一属性都必须与复合属性border一致，设置三个属性值。
-
按照方向和类型划分
- 类似border-top的单一方向属性，也可以根据属性值类型继续进行单一属性划分。
- 单一属性写法: border-方向-类型。
💡 注意:细分时必须险些方向划分再写类型划分，否则属性名错误。
.box1 { width: 200px; height: 200px; padding: 10px; padding-right: 20px; border: 10px solid #f00; border-top-color: yellow; background-color: pink; }
-
margin外边距
- 作用: 设置的是盒子与盒子之间的距离。
- 特点：不能渲染背景。
- 属性值：常用px为单位的数值。
💡 外边距的设置方式与内边距padding一模一样。
- 单一属性：
- margin-top
- margin-right
- margin-bottom
- margin-left
- 复合属性的四种值的写法
- 四值法,设置四个属性值分配给上、右、下、左: margin: 10px 20px 30px 40px;
- 三值法,设置三个属性值分配给上、左右、下: margin: 10px 20px 30px;
- 二值法,设置两个属性值，分配给上下、左右: margin: 10px 20px;
- 单值法: margin: 10px;
扩展-清除默认样式
- 大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。
- 盒模型属性中内外边距：大部分容器级标签都由默认边距，要么用标签选择器的并集方式，要么通配符清除。
- <ul>和<ol>两种列表有默认的列表前缀:清除list-style属性。
- <a>标签的默认样式，顺带设置页面中常用的a的公共样式:设置color和text-decoration。
- 清除默认加粗效果：设置font-weight。
- 设置初始化的公共样式。如给<body>标签设置整体文字样式，让大部分后代标签全部去继承。
扩展-height应用
-
根据不同需求，高度属性可以设置也可以不设置。
- 如果设置了高度: 盒子占有的高度位置就确定死了，后面的统计元素会紧挨着加载。
- 如果不设置高度：会根据标签内部内容高度自动撑开。
- 以<div>标签为例，根据情况不同选择是否设置高度
- 必须设置高度的情况：设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。自身盒子内部内容过多会溢出盒子区域。
-
overflow属性
- 设置了高度的盒子
- 如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性overflow，进行溢出部分内容的显示效果设置。
- 属性值：
- visible：默认值，可见的可视的，溢出部分显示的。
- hidden：溢出部分直接隐藏，隐藏超过边框范围的内容。
- scroll：溢出的部分数显滚动条，可以拖动滚动条看到隐藏部分，多出盒子高度的部分不显示，不论有没有溢出，水平和垂直方向都会出现滚动条。
- auto：自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条。
- 不设置高度的盒子
- 要求盒子该高度必须自适应内部内容的高度。或者设置height的属性值是自动。
.div1 { width: 200px; height: auto; border: 1px solid #000; padding: 20px; } - 设置了高度的盒子
扩展-居中
-
文本居中
-
文本水平居中
- 水平居中: text-align属性，center属性值。不论单行或多行都可以设置。
-
文本垂直居中
- 单行文本垂直居中：让文字行高line-height等于盒子高度height。
.div2 p { width: 200px; height: 200px; line-height: 200px; border: 1px solid #000; text-align: center; }- 多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。
.div2 p { width: 200px; padding: 20px 0px; border: 1px solid #000; text-align: center; }
-
-
元素居中
- 元素垂直居中
- 一个元素内部嵌套的子元素，在父元素中居中。
- 垂直居中: 与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
/* 父元素 */ .box { width: 300px; border: 1px solid #0f0; padding: 20px 0px; } /* 子元素 */ .demo { width: 100px; height: 100px; background-color: pink; }- 元素水平居中
- 针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的margin值，水平方向的值都设置为auto。
- 原因：水平方向的margin如果设置为auto，边距会自动无限增大，直到盛满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无线大，只能达到一个平衡，两边距离相同，导致盒子居中。
/* 父元素 */ .box { width: 300px; border: 1px solid #0f0; padding: 20px 0px; } /* 子元素 */ .demo { width: 100px; height: 100px; margin: 0 auto; background-color: pink; } - 元素垂直居中
扩展-父子盒模型
- 一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够(不考虑溢出情况)，需要遵循一个设置尺寸的规律：所有子元素的宽度加载一起不能大于父元素的宽度width。
- 父元素width >= 所有子元素width + padding + border + margin
- 如果不满足条件：要么多余的子元素掉下来不能排成一排，要么溢出父元素。
- 错误效果解决方式：
- 1.计算或取尺寸是计算准确，一像素都不偏差。
- 2.盒模型自动内减
- 父子盒模型中，只有一个子元素，且子元素是类似<div>标签必须占一行的。不设置子元素的width属性，子元素的width属性会自动加载父级元素的width。如果同时设置了子元素水平方向的padding和border、margin，不需要手动去进行内减，子元素的width会自动收缩尺寸。
- 子元素所有的水平方向的位置属性的家和等于父元素的width。
- 错误效果解决方式：
扩展-margin塌陷现象
-
margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的内部。
- 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两边边距相遇，真正的盒子间距是较大的那个值。
.box3 { width: 100px; height: 100px; margin-bottom: 50px; background-color: skyblue; } .box4 { width: 100px; height: 100px; margin-top: 100px; background-color: skyblue; }-
父子元素塌陷：
- 1.父元素与子元素都设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷。
.box5 { width: 100px; height: 100px; margin-top: 50px; background-color: skyblue; } .box5 p { width: 50px; height: 50px; margin-top: 30px; background-color: #fff; }- 2.本身父元素与上一个元素的距离是0，子元素设置了垂直方向的上边距，会带着父级一起掉下来。
.box5 { width: 100px; height: 100px; background-color: skyblue; } .box5 p { width: 50px; height: 50px; margin-top: 30px; background-color: #fff; }
-
解决方法：
- 同级元素塌陷问题：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。
- 父子元素塌陷问题：让两个边距不要相遇，中间可以使用父元素border或者padding将边距分隔开；更常用的是，父子盒模型之间的距离就不要用儿子的margin去设置出来，而是父级的padding挤出来。
4. display显示模式
- 标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过dispaly属性更改一个标签的显示模式。(如：让块级元素以行内元素形式显示，常用于更改div的加载模式)
- 属性值:元素根据属性值不同，可以加在对应元素等级的显示模式的特点。
- block:表示元素要以块级元素模式加载，具有块级特点。
- inline:表示元素要以行内元素模式加载，具备行内特点。
- inline-block:表示元素要以行内块模式加载，具备行内块特点。
- none:表示标签及内部内容直接隐藏，让出原有标准流的位置。
- 脱离标准流
- display属性更改的显示模式并没有改变标准流本质性质，页面还是按照从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
- 标签元素脱离标准流的方法包括:浮动、绝对定位、固定定位。
5. 浮动属性
-
浮动定义
- 浮动是一种布局属性
- 属性名：float
- 属性值：left:左浮动; right:右浮动
- 作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示。
-
浮动性质
-
浮动的元素脱离了标准流的限制，具备行块二象性，浮动的元素可以设置宽高，还可以并排一行，而且不会有空白折叠现象，如果元素不设置宽高，可以被元素内容自动撑开。
-
依次贴边，浮动方向不同，进行布局时，加载位置方向不同。
- 以left为例：
- 父元素宽度足够，所有子元素会按照HTML书写顺序，依次向左进行贴边，父元素左边<-子元素1<-子元素2<-子元素3<-子元素4。
- 父元素宽度不够，例如不能放下一个子元素4，那么子元素4在贴边时，会跳过上一个子元素3，向更上一个子元素2进行贴边，如果子元素2后面位置不够，继续跳过子元素2向前面的子元素1进行贴边。
- 如果子元素4在跳过子元素3向前面的子元素2贴边时，子元素2的高度不高于子元素3，子元素2没有延伸出一个高度的边让子元素4贴边，那么子元素4就会跳过子元素2向子元素1进行贴边。
- 如果贴边的这个子元素4宽度小于子元素2，子元素2的高度低于子元素1和子元素3，形成一个凹陷，子元素4会受前面子元素3的高度影响，不会出现钻空现象。
- 如果子元素1后面的距离也放不下子元素4，子元素4最终会贴到父元素左边，如果子元素4的宽度超过了父元素，只会出现溢出现象。
💡 注意：同一个盒子中，可以有左浮动和右浮动的子盒子并存，子盒子会根据浮动方向，向上一个同方向的子盒子进行贴边，如果空间不够，也会发生之前依次贴边的各种情况。
- 贴边性质应用:
- 平均分布表格效果
- 导航栏效果
- 常见的电商或企业网站布局
- 以left为例：
-
浮动的元素没有margin塌陷现象。
-
浮动的元素会将原来占有的标准流位置让给后面的一个同级元素。
- 压盖效果
/* 压盖效果 */ .ps1 { float: left; width: 100px; height: 100px; /* margin: 50px; */ background-color: skyblue; } .ps2 { width: 200px; height: 200px; /* margin: 50px; */ background-color: yellowgreen; }
💡 由于浏览器中兼容性问题，不会使用这种属性制作压盖效果，真正的压盖效果使用后期学习的定位制作。
如果没有特殊需求，不允许一个父元素中的子元素有的浮动有的不浮动，同级元素中有一个浮动其他的也要浮动。 -
字围现象：与压盖效果类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字内容会让开蓝盒子位置，围绕他进行加载。
-
-
浮动的问题
-
在标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。
-
父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。
-
解决方法:
-
a.给父元素设置一个合适的高度。但是父元素高度不是自适应的，一旦子元素高度发生变化，问题再次出现。
-
b.给标准流父元素添加clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置，但父元素仍不能高度自适应，两个父元素之间如果有margin效果不正确。
- clear属性
- 作用:清楚标签元素自身受到的前面的浮动元素的影响。
- 属性值:
- left:清除前面左浮动带来的影响
- right:清除前面右浮动带来的影响
- both:清除前面所有浮动带来的影响
- clear属性
-
c.隔墙法:在两个大的父盒子之间，添加一个空的<div>标签，标签上带有clear属性。模拟两个父盒子之间的距离，解决b方法中的margin效果不正确问题。
-
d.内墙法:在父元素内部，所有的浮动子元素后面添加一个空的<div>元素，标签高度为0，添加clear属性。解决父元素高度自适应问题，且解决margin效果不正确问题。但该方法会造成HTML结构冗余。
-
e.伪类:使用伪类方法利用css实现内墙法。
- 伪类选择器:通过选中的标签添加伪类，去选中标签的某个状态或位置。
- :after这个伪类表示选中的是某个标签内部的最后的位置。
- 书写方法:前面必须加普通的选择器(如module1中的7种选择器)，后面连续书写伪类名称。
💡 约定俗成(业内不成文规则):将伪类添加给一个选中父盒子的选择器后面，一般给需要清楚浮动的父盒子设置一个clearfix的类名。
.clearfix:after { content: "1"; display: block; height: 0; clear: both; /* 隐藏但仍占位 区别于display隐藏且让位 */ visibility: hidden; }- f.溢出隐藏:给内部有浮动子元素的父元素添加溢出隐藏overflow:hidden;属性，可以解决浮动的所有问题。
- overflow属性：
- 在元素设置高度后，overflow:hidden;效果是将超过高度的部分直接隐藏。
- 在元素不设置高度后，overflow:hidden;效果是盒子被元素撑开，成高度自适应效果。
- 高度自适应原因:一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏，浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
- 浮动影响后面的元素:父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。
- overflow属性：
-
-
6. 定位
position定位属性
- 属性值：
- relative，相对定位
- absolute，相对定位
- fixed，固定定位
- 作用：设置定位的元素，他需要根据某个参考元素发生位置的偏移。
- 偏移量属性：定位的元素想要发生位置的移动，必须搭配偏移量属性进行设置。
- 水平方向：left、right。
- 垂直方向：top、bottom。
- 属性值：常用px为单位的数值或百分比。
绝对定位
- 属性值：absolute，绝对的意思
- 参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>。
💡 必须搭配偏移量属性才会发生移动。
.box .para {
/* position: relative; */
position: absolute;
left: 100px;
top: 100px;
/* right: -100px; */
background-color: yellowgreen;
}
- 绝对定位的性质
- 绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
💡 注意事项：
- 绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。
- 在绝对定位中，由于参考点不同，left正值不再等价于right的负值。
-
<body>为参考元素的参考点
- 以<body>为参考元素时，参考点的确定与偏移量方向有关
- 如果有top参与的定位，参考点就是<body>页面的左上顶点或右上顶点。自身的对比点是盒子的所有和模型最外面的左上角或右上角。
- 如果有bottom参与定位，参考点是<body>页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
💡 实际应用中，如果以<body>为参考元素，不同分辨率的浏览器，绝对定位的元素位置是不同的，所以较少使用<body>作为参考元素。
-
祖先级为参考元素
- 如果祖先级中有定位的元素，就不会参考<body>。
- 参考的是祖先元素中有任意定位的，在HTML结构中距离目标最近的祖先。
- 如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点。绝对的定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding。
- left、top：参考点是祖先的border以内的左上顶点，对比点是盒子自身的左上角。
- right、top：参考点是祖先的border以内的右上顶点，对比点是盒子自身的右上角。
- left、bottom：参考点是祖先的border以内的左下顶点，对比点是盒子自身的左下角。
- right、bottom：参考点是祖先的border以内的右下顶点，对比点是盒子自身的右下角。
-
根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多数时候使用子绝父相的情况。
相对定位
- 属性值：relative，相对的意思。
- 参考元素：标签加载的原始位置。
💡 必需搭配偏移量属性才能发生位置移动。
.box .para {
position: relative;
left: 100px;
top: 100px;
background-color: yellowgreen;
}
- 相对定位的性质
- 相对定位的元素不脱离标签的原始状态(标准流、浮动)，不会让出原来占有的位置。
- 元素显示效果上，原位留坑，形影分离。
💡 注意事项
- 偏移量属性的值是区分正负的。正数：表示偏移方向由左向右、由上向下；负数：表示偏移方向由右向左、由下向上。
- 同一个方向上，不能设置两个偏移量属性，如水平方向同时设置了left和right属性，只会加载left属性，垂直方向只加载top属性。
- 由于相对定位的参考元素是自身，left的正值等价于bootom的负值。为了方便记忆，可以只使用left、top组合。
- 实际应用
- 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。
- 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置、或者对文字进行微调。
固定定位
- 属性值：fixed,固定的意思。
- 参考元素：浏览器窗口。
- 参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。
- 由于浏览器窗口的四个顶点位置不会变化，会导致固定定位的元素始终显示在定位位置。
- 性质：固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。
定位应用
-
压盖效果
- 所有的定位类型都可以实现压盖效果。
- 由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 440px; border: 10px solid #f00; } .box p { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div class="box"> <img src="images/meng.jpg" alt=""> <p></p> </div> </body> </html> -
居中设置
- 定位的元素，如果想在参考元素中居中显示，有自己剧中的方法
- 第一步：在居中的方向使用偏移量属性，例如left，设置属性值为50%。导致图片的左顶点移动到参考元素的中心位置。百分比形式的属性值，参考的是参考元素的border以内的宽度、高度。
- 第二步：给绝对定位的子盒子设置一个同方向的margin，例如margin-left，属性值为负的自身宽度的一半。
💡 注：不论盒子宽度是否比参考元素更宽，都能使用以上方法进行居中设置。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { position: relative; width: 440px; border: 10px solid #f00; } .box p { position: absolute; left: 50%; top: 50px; width: 100px; height: 100px; margin-left: -50px; background-color: pink; } </style> </head> <body> <div class="box"> <img src="images/meng.jpg" alt=""> <p></p> </div> </body> </html> - 定位的元素，如果想在参考元素中居中显示，有自己剧中的方法
-
扩展应用
- 解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。
- 浮动的元素居中，在不改变原始浮动状态的情况下，可以利用相对定位居中方法。
-
压盖顺序
- 实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。
- 默认压盖顺序
- 定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
- 如果都是定位元素，在HTML中后写的定位压盖先写的定位。因此，书写代码时，需要注意压盖效果，必须合理设置HTML元素的书写顺序。
- 自定义压盖顺序
- 如果想更改定位的元素的压盖顺序，可以设置一个z-index属性。
- 属性值：数字。
- 属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。
- 如果属性值相同，比较HTML中的书写顺序，后写的压盖先写的。
- z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。
- 父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖部分：
- 父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。
- 子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的，俗称“从父效应”。
7. 背景属性
💡 CSS中通过background属性来设置背景，他是一个综合属性，可以拆分成多个单一属性。
background-color背景颜色
- 作用：在盒子区域添加背景颜色的修饰。
- 加载区域：在border及以内加载背景颜色
- 属性值：颜色名、颜色值
background-image背景图片
-
作用：给盒子添加图片的背景修饰。
-
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载(background-repeat:no-repeat)，加载从border以内开始。
-
属性值：url(图片路径)
-
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径。
background-image: url(01_02_note/images/yagai.png); -
背景图和背景颜色可以同时设置，背景图会压盖背景颜色。
background-repeat背景重复
- 作用：设置添加的背景图是否要在盒子中重复进行加载。
- 属性值：
- repeat：重复，默认属性值，表示会使用背景图片重复加载填满整个盒子北京区域
- no-repeat：不重复，不论背景图是否大于盒子范围，都只加载一次图片
- repeat–x：水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
- repeat–y：垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复
background-position背景定位
-
作用：主要用于设置不重复的图片在背景区域的加载开始位置。
-
属性值：有三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法属性值都有两个，值之间用空格分隔。
- 第一个属性值：背景图片水平方向的位置。
- 第二个属性值：背景图片垂直方向的位置。
- 单词表示法:表示图片与盒子背景区域进行对应方向的对齐。
- 水平方向可选:left、center、right
- 垂直方向可选:top、center、bottom
background-position: right bottom;- 像素表示法:
- 第一个属性值:像素是几，表示背景图片左上角针对border以内的左上顶点水平方向位移的距离。
- 第二个属性值:像素是几，表示背景图片左上角针对border以内的左上顶点垂直方向位移的距离。
- 正数：向右、向下
- 负数：向左、向上
background-position: -100px -100px;- 百分比表示法:
- 100%代表的数值：等价于盒子的border以内的背景区域宽度(高度)减去图片的宽度(高度)。
background-attachment背景附着
- 作用：设置的背景图片是否要随着页面或盒子的滚动而滚动。
- 属性值：
- scroll：滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走。
- fixed：固定的，背景图的定位的参考点从盒子border以内的左上顶点变为了浏览器窗口的左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个位置，不会随着页面滚动而滚走。
综合写法
-
background属性可以将五个单一属性的值进行合写。
-
属性值：可以有1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
background: url(../01_02_note/ziwei.png) no-repeat center top fixed lightblue;💡 注1：如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载。
注2：如果想去层叠综合属性的一部分，其他属性保持不变，最好使用单一属性进行层叠。
应用
-
背景图替换插入图
- 问题背景描述：<h1>标签是权重最高的标签，一般会在内部书写最重要的内容，比如logo图片，最大的标题等。<h1>内部的文字可以帮助提高SEO搜索排名。在设置的是logo图片时，如果使用插入图，就不能在标签中书写搜索关键字。
- 解决方法：想要解决SEO问题，可以将HTML结构中，插入图片换成搜索关键字，然后使用css添加背景图给<a>标签或<h1>标签。
- 文字隐藏方法
- 方法一：将文字字号设置成0。IE8及以上或高版本浏览器可以隐藏文字，但是IE7及一下有兼容性问题。
- 方法二：可以设置给<a>标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。
-
padding区域背景图
- 在一个盒子中有背景图部分，而且有文字内容，想要实现文字让开背景图区域进行加载，背景区域应该使用padding挤出位置。
.list li { padding-left: 25px; background: url(images/s.png) no-repeat left center; }
-
精灵图
-
问题背景：当用户访问一个网站时，需要像服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求地次数，提高页面地加载速度，出现了CSS精灵技术(也称CSS Sprites)
-
CSS精灵
- CSS精灵是一种处理网页背景图像地方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中，然后将大图应用于网页，这样，当用户访问该网页时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。
-
技术依据：
- 将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片(可在线工具制作)。
- 利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。
💡 注意事项：
- 精灵图上方的都是小的装饰性质的背景图片，插入图片不能放于精灵图内。
- 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
- 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部，不能出现多余内容。
- 在精灵图的最低端，尽量留一点空白，方便以后添加其他精灵图。
-
694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
