CSS基础
CSS入门
标签设置长宽
块级标签才能设置宽度,内联标签的宽度由内容决定
width属性设置宽
height属性设置高
1.字体样式
font前缀
表1 CSS文字属性
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
：除了颜色，其他文字属性都是以“font”前缀开头。font就是“字体”的意思，字体大小就是“font-size”，字体粗细就是“font-weight”等等.
长度单位: px mm cm em rem vw vh in
1.1 字体类型 font-family
font-family可指定多种字体，多个字体将按优先顺序排列，以逗号隔开
<style>
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
1.2 字体大小 font-size
语法: font-size：关键字/像素值;
说明: font-size的属性值可以有两种方式，一种是使用关键字，如表1；二是使用像素做单位的数值。
font-size: 36px;
1.3 字体颜色 color
color 被用来设置文字的颜色
- 颜色英文: red
- 十六进制值: #06a0de 使用pycharm提供的取色器
- 一个RGB值: rgb(1,1,1) 三基色元素改变颜色
- rgba (0,128,128,0.9) 第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
1.4 字体粗细 font-weight
字体粗细和字体大小[font-size]是不一样的，粗细指的是字体的“肥胖”，大小指的是高和宽。大家好好理解一下就很容易区分了。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
字体粗细font-weight属性值可以取100、200、…、900这九个值。400相当于正常字体normal，700相当于bold。100~900分别表示字体的粗细，是对字体粗细的一种量化方式，值越大就表示越粗，值越小就表示越细。
对于中文网页来说，一般仅用到bold、normal这两个属性值完全就可以了，粗细值不建议使用数值（100~900）
1.5 文本斜体 font-style
font-style属性的取值如下表：
| font-style属性值 | 说明 |
|---|---|
| normal | 默认值，正常体 |
| italic | 斜体，这是一个属性 |
| oblique | 将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique |
italic是字体的一个属性，也就是说并非所有字体都有这个italic属性，对于没有italic属性的字体，可以使用oblique将该字体进行倾斜设置。
一般字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有的字体都有这些属性。一些不常用的字体，或许就只有个正常体，如果你用italic发现字体没有斜体效果，这个时候你就要用oblique。
2.文本样式
text前缀
文字样式主要涉及文字本身的型体效果，而段落样式主要涉及多个文字的排版效果，即整个段落的排版效果。文字样式注重个体，段落样式注重整体。
表1 CSS段落属性
| 属性 | 说明 |
|---|---|
| text-decoration | 下划线、删除线、顶划线 |
| text-transform | 文本大小写 |
| font-varient | 将英文文本转换为“小型”大写字母 |
| text-indent | 段落首行缩进 |
| text-align | 文本水平对齐方式 |
| line-height | 行高 |
| letter-spacing | 字距 |
| word-spacing | 词距 |
2.1 文本对齐 text-align
text-align 属性规定元素中的文本的水平对齐方式。
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
<style>
p {
text-align: center;
text-align: left;
text-align: right;
}
</style>
2.2 文字装饰 text-decoration
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
<style>
p {
text-decoration: underline; 下划线
text-decoration: overline; 上画线
text-decoration: line-through; 删除线
}
</style>
常用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
2.3 首行缩进 text-indent
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
4.背景样式
表1 CSS背景图像属性
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图像的路径，这样图片才能显示 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
4.1 背景颜色 background-color
background-color: red;
4.2 背景图片 background-image
默认是铺满整个区域
background-image:url("图像地址");
图像地址可以是相对地址，也可以是绝对地址.
4.3 背景重复 background-repeat
使用background-repeat属性可以设置背景图像是否平铺，并且可以设置如何平铺。
表1 background-repeat属性取值
| 属性值 | 说明 |
|---|---|
| no-repeat | 表示不平铺 |
| repeat | 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺 |
| repeat-x | 表示在水平方向（x轴）平铺 |
| repeat-y | 表示在垂直方向（y轴）平铺 |
注意：设置有背景图片的元素的宽或高大于背景图片本身的宽或高，才会有平铺效果
<style>
div {
width: 1000px;
height: 1000px;
/*background-color: red;*/
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573747556067&di=3d4da0714fc07822563fd99f40626446&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F12%2F20181012224238_enfwb.jpg");
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x; x轴平铺
background-repeat: repeat-y; y轴平铺
}
</style>
4.4 背景位置 background-position
左右上下居中
background-position: center center
<style>
div {
width: 1000px;
height: 1000px;
/*background-color: red;*/
background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573747556067&di=3d4da0714fc07822563fd99f40626446&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F12%2F20181012224238_enfwb.jpg");
background-repeat: no-repeat; 不平铺
background-position: center center; 居中
}
</style>
背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。
background-positon:像素值/关键字;
语法中的取值包括两种，一种是采用像素值，另一种是关键字描述。
1、取值为“像素值”
取值为像素值时，要设置水平方向数值（x轴）和垂直方向数值（y轴）。例如：“background-position：12px 24px;”表示背景图片距离该元素左上角的水平方向位置是12px，垂直方向位置是24px。注意，这两个取值之间要用空格隔开。
| 设置值 | 说明 |
|---|---|
| x（数值） | 设置网页的横向位置，单位为px |
| y（数值） | 设置网页的纵向位置，单位为px |
2、取值为“关键字”
当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。
| 属性值 | 说明 |
|---|---|
| top left | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
background-position: left top;
/*background-position: 200px 200px;*/
支持简写
background:#336699 url('1.png') no-repeat left top;
使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
4.5 背景固定样式 background-attachment
使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。
background-attachment:scroll/fixed;
scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动。
5.边框属性
任何块元素和行内元素都可以设置边框属性.
要设置一个元素的边框必须要设置以下3个方面：
- （1）边框的宽度；
- （2）边框的外观（实线，或者虚线）；
- （3）边框的颜色；
5.1 边框样式 border
表1 边框的三个属性
| 属性 | 说明 |
|---|---|
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
注意，设置一个元素的边框必须要同时设置[border-width]、[border-style]、[border-color]这三个属性，这个元素的边框才能在浏览器显示出来。
1.border-width 宽度
border-width:像素值;
2.border-style 样式
border-style:属性值;
border-style属性取值如下：
| 属性值 | 说明 |
|---|---|
| none | 无样式 |
| hidden | 与“none”相同。bug应用于表除外。对于表，hidden用于解决边框冲突 |
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
| double | 双线，双线的宽度等于border-width值 |
从表中我们可以看出，solid、dashed、dotted和double用于定义基本边框样式，从下图1中，我们可以看出这几个属性值的明显区别。
3.border-color 颜色
border-color:颜色值
4.简写
#i1 {
border-width: 2px;
border-style: solid;
border-color: red;
}
通常使用简写方式：
#i1 {
border: 2px solid red;
}
5.2 边框局部样式 border局部
想要对上下左右这四条边进行单独设置时
1. 上边框border-top
`border-top-width``:``1px``;``border-top-style``:``solid``;``border-top-color``:``red``;`
简洁写法：border-top:1px solid red;
2. 下边框border-bottom
`border-bottom-width``:``1px``;``border-bottom-style``:``solid``;``border-bottom-color``:orange;`
简洁写法：border-bottom:1px solid orange;
3. 左边框border-left
`border-left-width``:``1px``;``border-left-style``:``solid``;``border-left-color``:``blue``;`
简洁写法：border-left:1px solid blue;
4. 右边框border-right
`border-right-width``:``1px``;``border-right-style``:``solid``;``border-right-color``:``red``;`
简洁写法：border-right:1px solid green;
无论是边框整体样式，还是局部样式，都需要设置边框的3个属性：宽度、外观、颜色。
<style>
p {
border-top: 10px solid red;
border-left: 20px dashed darkblue;
border-right: 30px dotted wheat;
border-bottom: 40px double greenyellow;
}
</style>
5.3 圆,圆角边框 border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
/*左上为第一个角, 顺时针赋值, 不足找对角*/
/*border-radius: 30px 60px;*/
/*border-radius: 150px;*/
/*border-radius: 50%;*/
/*横向第一个角50px, 第二个角10px, 不足找对角*/
/*纵向均是150px*/
border-radius: 50px 10px / 150px;
6.display 显示方式
定义
用于控制HTML元素的显示效果
使用
通过设置该属性的不同属性值, 使其在页面中的显示方式达到设定的效果,且对于css的样式支持程度也不一样
同行显示display: inline
块级标签变为行内标签,可以同行显示,但没法设置长宽
- 同行显示
- 只支持部分css样式(不支持宽高)
- 宽高由文本内容撑开
异行显示display: block;
将行内参数变为块级标签
- 异行显示
- 支持所有css样式
- 设置了宽高就采用设置的值, 宽高也就有默认的特性(后面讲)
兼并display: inline-block;
标签即可以设置长宽,又可以在全部在一行显示
- 同行显示
- 支持所有css样式
- 设置了宽高就采用设置的值
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
标签特性
1. 有些标签支持宽高, 有些标签不支持宽高，如span不支持宽高，p，img支持宽高；
2. 有些标签同行显示span img, 有些标签异行显示(独占一行)p；
3. 有些标签有结束标识span、p, 有些标签没有结束标签(省略了)img link。
7.盒子模型
所有的元素都可以看成一个盒子！
在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。
一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构，二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子，盒子模型是由content（内容）、[padding]（内边距）、[margin])（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。
表1 盒子模型4个属性
| 属性 | 说明 |
|---|---|
| border | （边框）元素边框 |
| margin | （外边距）用于定义页面中元素与元素之间的距离 |
| padding | （内边距）用于定义内容与边框之间的距离 |
| content | （内容）可以是文字或图片 |
7.1 margin: 外边距
1.margin: 外边距, 控制盒子的位置(布局), 通过左和上控制自身位置, 通过右和下影响兄弟盒子位置(划区域)
margin-left: -80px;
margin-top: -80px;
margin-bottom: 100px;
margin: 100px 50px;
起始为上, 顺时针依次赋值, 不足边取对边
7.2 border: 边框
2.border: 边框, 样式/宽度/颜色 (solid实线 dashed虚线 dotted点状线)
border-style: solid;
border-width: 10px;
border-color: red;
transparent 透明色
border: blue dashed 20px;
7.3 padding: 内边距
3.padding: 内边距, 从显示角度控制文本的显示区域
padding: 10px 0 0 10px;
7.4 content: 内容区域
4.content: 内容区域, 由宽 x 高组成
注意:
1.margin,padding: 起始为上, 顺时针依次赋值, 不足边取对边
2.要做到文本内移,设置padding, 如果又想显示区域不变, 相应减少content
margin外边距
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
推荐使用简写：
.margin-test {
margin: 5px 10px 15px 20px;
}
顺序：上右下左
常见居中：
.mycenter {
margin: 0 auto;
}
padding内填充
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
推荐使用简写：
.padding-test {
padding: 5px 10px 15px 20px;
}
顺序：上右下左
补充padding的常用简写方式：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
8. 浮动布局 float
在 CSS 中，任何元素都可以浮动。 (谷歌浏览器的body默认有8px的外边距)
浮动元素会生成一个块级框，而不论它本身是何种元素。(相当于升维,平面的标签突然变成三维升空了!)
关于浮动的两个特点：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的元素是脱离了正常文档流的(原来的位置会让出来),但浏览器会优先展示文本内容(********)
8.1 三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动
浮动的影响
浮动会脱离文档流,使得下方的标签自动补位,升维的同时带来塌陷,解决使用clear清除浮动影响
<style>
.c1 {
width: 100px;
height: 100px;
background-color: greenyellow;
float: left; 左浮动
}
.c2 {
width: 100px;
height: 100px;
background-color: aqua;
float: right; 右浮动
}
</style>
8.2 clear 清除浮动
清除浮动的副作用（父标签塌陷问题）主要有三种方式：
- 固定高度
- 伪元素清除法
- overflow:hidden
伪元素清除法（使用较多）：
首先定义风格
.clearfix:after {
content: "";
display: block;
clear: both; /*左右两边都不能有浮动的元素*/
}
哪个父标签塌陷了 就给谁加clearfix这个类属性值
clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
注意：clear属性只会对自身起作用，而不会影响其他元素。
9.overflow 溢出
超出盒子规定的显示区域外的内容的处理方式
/*将超出规定区域的内容隐藏, 隐藏掉的内容无法直接查看*/
/*overflow: hidden;*/
/*不超出正常，超出滚动 两种不同的处理方式来处理超出规定区域的内容*/
/*overflow: auto;*/
/*一直以滚动方式处理超出规定区域的内容*/
/*overflow: scroll;*/
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
- overflow（水平和垂直均设置）
- overflow-x（设置水平方向）
- overflow-y（设置垂直方向）
10. 定位布局 position
CSS定位使你可以将一个元素精确地放在页面上你指定的地方。联合使用定位和浮动，能够创建多种高级而精确地布局。
所有的标签默认都是静态的 无法改变位置
position: static;
必须将静态的状态修改成定位之后
10.1 静态定位 static
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
10.2 相对定位 relative
相对于标签原来的位置 移动
相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
10.3 绝对定位 absolute
相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位******,类似于定位一个购物车标签,在购物车的方位设置位置
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
10.4 固定定位 fixed
相对于浏览器窗口 固定在某个位置不动,网站的回到顶部标签
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
<style>
body {
background-color: darkolivegreen;
}
.c1 {
height: 300px;
width: 300px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
}
img {
max-width: 160%;
max-height: 300%;
position: relative;
left: -60px;
}
</style>
10.5 是否脱离文档流
脱离文档流：
- 浮动元素
- 绝对定位
- 固定定位
不脱离文档流：
- 相对定位
11. z-index
设置对象的层叠顺序,但必须是定位了的元素(xyz轴)
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用
d1 {
z-index=999
}
12.透明度 opacity
用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
会更改文字和背景颜色的透明度
通用样式
a标签的 text-decoration: none;
浮动的 clearfix
