1.css核心样式

1.2 css常用样式

1.2.1 字体属性

font-weight 文字粗细

作用：设置文字是否加粗显示

属性值：单词类型和数字类型

单词类型：

属性值说明

normal 默认值，定义标准文字

bold 定义粗体文字 b,strong

bolder 定义更粗的字体

lighter 定义更细的字体

数字类型：100-900 整百 400:normal 700:bold

属性值	说明
normal	默认值，定义标准文字
bold	定义粗体文字 b,strong
bolder	定义更粗的字体
lighter	定义更细的字体

font-style 字体风格

作用：设置文字是否斜体显示

属性值：单词

属性值	说明
normal	设置正规的字体，大多数标签的默认值
italic	设置斜体的文字，主要针对英文，要求英文以字体中的斜体样式显示
ablique	设置倾斜的文字，只是将文字倾斜显示，与字体无关

line-height:行高

作用：设置一行文字实际占有的高度，文字字号在行高是垂直居中的

属性值说明

px 设置行高的具体的像素值

百分比设置的本身字号像素值的百分比

属性值	说明
px	设置行高的具体的像素值
百分比	设置的本身字号像素值的百分比

font 综合写法

font: 字体字号行高加粗斜体

注意：在进行综合书写，必须有字号和字体参与，必须字号在前，字体在后，不能颠倒顺序

<style>
  p{
    /* 写法1：字号 字体 */
    font:12px "宋体";
    /* 写法2：字号/行高 字体*/
    font:12px/30px "宋体";
      /* 写法3：粗细 风格 字号/行高 字体*/
    font:bold italic 14px/20px "宋体"
  }
</style>

1.2.1 文本属性

水平对齐 text-align

作用：设置文本水平方向的对齐，设置的是整体的

属性值说明

left 居左对齐默认

center 居中对齐

right 居右对齐
text-decoration 文本修饰属性

作用：设置文本整体是否有线条的修饰效果

一般用来去除<a>标签的默认样式

属性值说明

none 没有修饰，默认

overline 上划线

line-through 中划线，删除线 <del>标签的默认值

underline 下划线 <a>标签的默认值
文本缩进 text-indent

作用：设置段落首行是否进行缩进

属性值说明

px单位表示首行缩进多少像素

em单位首行缩进几个中文字符的位置

百分比缩进文字所在标签的父级标签的width属性值的百分比

正负代表方向：正：右缩进，负：左缩进

属性值	说明
left	居左对齐默认
center	居中对齐
right	居右对齐

属性值	说明
none	没有修饰，默认
overline	上划线
line-through	中划线，删除线 <del>标签的默认值
underline	下划线 <a>标签的默认值

属性值	说明
px单位	表示首行缩进多少像素
em单位	首行缩进几个中文字符的位置
百分比	缩进文字所在标签的父级标签的width属性值的百分比

1.3 盒子模型

盒子模型：width border padding margin height

书写元素内容区域： width height

盒子实体化区域：width height padding border

盒子实际占位的位置：width height paddign border margin

1.3.1 width

width:宽度

作用：设置可以添加元素内容的区域的宽度

属性值	说明
auto	默认值浏览器可计算出的实际宽度
px	像素值定义的宽度
%	定义参考父元素宽度width的百分比宽度

注意：1.块级元素的宽度默认占据浏览器整行，行内级元素的宽度由内容撑开

2.body不需要设置宽度，宽度自适应浏览器窗口的宽度

1.3.2 height

height:高度

作用：设置可以添加元素内容区域的高度

属性值与宽度的类似

注意：1.内部元素的内容自动撑开的高度，元素高度自适应内部内容的高度

1.3.3 padding

padding：内边距

作用：设置元素的边框内部到宽高区域之间的距离

特点：可以加载背景，不能书写嵌套的内容

padding:复合属性可以分别书写四个方向的属性上右下左

三个值：上右下; 左同右

两个值：上右; 下同上左同右

一个值：四个方向的值相同；

1.3.4 border

border：边框

作用：设置内边距外面的边界区域，作为盒子的实体化的最外层；

属性值：宽度线的形状颜色；

按照属性值的类型划分：

线宽 border-width

作用：设置边框线的宽度

有四个方向的值

线型 border-style

作用：设置变量的线条形状

属性值	说明
none	定义无边框
solid	定义实线
dashed	定义虚线
dotted	定义点线
double	定义双线
groove	定义3D凹槽边框 border-color
ridge	定义3D垄状边框
inset	定义3d内容凹陷效果
autset	定义23d内容凸出效果

边框颜色 border-color

作用：设置边框的颜色

根据边框的方向划分：

border-top:设置上边框
border-right:设置右边框
border-bottom:设置下边框
border-left:设置右边框

根据方向和类型划分

border-方向-类型：如 border-top-width:10px;

1.3.5 margin

margin:外边距

作用：设置盒子与盒子之间的距离

特点：不能渲染背景

属性值：常用px为单位的数值

外边距的设置方式与内边距设置差不多，参考内边距

1.3.6 盒子模型应用

清除默认样式

大部分标签会被浏览器加载默认样式，会对布局造成一些影响

<style>
 blockquote,body,dd,dir,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hr,input,legend,menu,ol,optgroup,p,pre,tbody,td,textarea,tfoot,th,thead,ul{margin:0;padding:0}
</style>

清除列表的默认样式

<style>
  ul,ol{
    /*清除前面的默认样式 小点 */
    list-style:no ne;
  }
</style>

清除a标签的默认样式

<style>
  a{
    text-decoration: none;
    color: #ccc;
  }
</style>

清除加粗效果

<style>
  h1,h2,h3,h4,h5,h6,b,strong{
    font-weight:normal;
  }
</style>

初始化一些标签

<style>
  body {
    color: #333;
    font-size: 14px;
    font-family: Arial,"宋体";
  }
</style>

1.3.7 height的应用

height的应用：

如果设置了高度，盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载

overflow属性

设置了高度的盒子，如果盒子内容加载的高度超过父级，会出现溢出效果。通过overflow属性，进行溢出部分的显示效果

属性值	说明
visible	默认值，可见的可视的，溢出部分显示
hidden	溢出部分直接隐藏，隐藏超过边框范围的内容
scroll	隐藏的部分出现滚动条，可以拖动滚动条看到隐藏部分，多出的盒子高度的部分不显示，无论有没有溢出，水平和垂直方向都会出现滚动条
auto	自动的，如果没有溢出就正常显示，如果有溢出，溢出的方向自动出现滚动条

如果不设置高度，会根据标签内部高度自动撑开

要求盒子高度必须自适应内部内容的高度，或者设置height的属性值是自动的

1.3.8 居中

文字水平居中：text-align:center;

文本的垂直居中：单行文本：利用行高，设置行高等于高度

多行文本：让父元素高度自适应，子盒子撑开父盒子，然后给父盒子设置内边距。

元素的垂直居中：让父元素高度自适应，子盒子撑开父盒子，然后给父盒子设置内边距。

元素水平居中：设置margin,水平方向的值设置为auto,auto只在水平方向有作用。垂直方向无效。

1.3.9 父子盒模型

<head>
  <style>
    * {
        margin: 0;
        padding: 0;
    }
    .box1 {
        width: 1000px;
        height: 100px;
      border: 1px solid #f40;
    }
    .box1 p {
      width: 200px;
      height: 100px;
      margin-right: 10px;
      float: left;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="box1">
    <p></p> 
    <p></p> 
    <p></p> 
    <p></p> 
  </div>
</body>

特殊情况：盒模型自动内减

父子盒模型，只有一个子元素且子元素是类似div标签必须占一行，不设置子元素的width属性，子元素的width属性值会自动加载父级元素的width.如果同时设置了子元素水平方向的border,padding,margin.会自动去缩减宽度的值

1.3.10 margin塌陷现象

在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正外边距不是两个间距的加和。而是两个边距中值比较大的，边距值小的塌陷到了边框值大的内部。

解决：同级之间：只给一个元素设置，不要进行拆分。

父子之间：可以父元素设置border和padding将边距隔离开。常用的方法是父子盒子之间的距离不要子元素的margin去踹出来，给父元素设置padding

注意：水平方向没有塌陷现象

1.4 标准文档流

标准文档流：元素排布布局的过程中，元素会默认自动从左往右，从上往下流式排列方式，前面内容发生了变化，后面的内容位置也会随着发生变化。

HTML就是一种标准文档流文件。

HTML中的标准文档流特点通过两种方式体现：微观现象，元素等级

元素等级：在标准流中，大部分元素是区分等级的，习惯将元素划分为常见的加载级别：块级元素，行内元素，行内块元素

块级元素

块级元素可以设置宽高，在浏览器中正常加载
块级元素必须独占一行，不能在其他任何标签并排一行
块级元素如果不设置宽度，会自动撑满父级的width区域；高度不设置会被内容自动撑开高度。

行内元素

行内元素不能正常加载宽度和高度属性，其他的盒模型属性虽然能设置，但是容易出现加载问题
行内元素可以与其他的行内或行内块元素并排一行显示
行内元素不论是否设置宽高，宽度和高度都只能被内容自动撑开

行内块元素

行内块元素可以设置宽度和高度
行内块元素可以与其他的行内或行内块并排一行显示
行内块元素如果不设置宽高，要么以原始尺寸加载要么被内容撑开
行内块依旧具有标准流的围观性质，例如空白折叠现象

1.4.1 显示模式 display

标准流中的元素有自己默认的浏览器加载模式，但是加载模式不是一成不变的，后期可以通过display属性更改一个标签的显示模式。

属性值：元素根据属性值不同，可以加载对应的元素等级的显示模式的特点。

属性值	作用
block	表示元素要以块级元素模式加载，具备块级特点
inline	表示元素要以行内元素模式加载，具备行内特点
inline-block	表示标签要以行内块模式加载，具备行内块特点
none	表示标签及内部内容直接隐藏，让出原有标准流的位置

脱离标准流：display属性更加的显示模式没有改变标准流的本质。

标签元素脱离标准流的方法：浮动，绝对定位，固定定位

1.4.2 浮动

浮动时一种非常重要的布局属性

属性名：float 漂流浮动的意思

属性值：left 左浮动 right 右浮动

作用：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示

浮动元素脱离标准流：

a.标准流文档特点：区分行块，块级元素可以设置宽高，必须独占一行；行内元素不能设置宽高，可以并排一行

b.浮动元素脱离了标准流的限制，具备行块二象性。可以设置宽高，可以并排一行，不会有空白折叠现象。如果元素不设置宽高，可以被元素自动撑开。
浮动元素依次贴边

浮动属性值：left right

浮动方向设置不同，进行布局时，加载位置方向不同

如果父盒子的宽度足够，会依次在浮动方向一行显示，当父盒子宽度不够，后面的盒子会掉到下一行按照浮动方向排列。
浮动的元素没有margin塌陷

margin塌陷现象的出现在标准流中，浮动元素已经脱离标准流，不再出现margin塌陷现象
浮动的元素让出标准流位置

元素浮动之后，脱离了标准流，会将原来占有的标准流位置让给后面一个同级元素

元素浮动后不再占据原来的位置，后面的元素会层叠上来。在低版本ie浏览器有兼容问题。如果没有特殊需求，不允许一个元素浮动，一个元素不浮动。特殊情况：字围现象；
浮动元素存在的问题

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部子元素进行了浮动，浮动的子元素是撑不高标准流父亲的；

父元素没有高度，会影响后面元素的标准流位置，如果浮动子元素足够高时，有可能影响到后面浮动元素的贴边。
清除浮动
- clear:both;给父元素设置
- 给标准流的父元素添加一个高度
- 隔墙法在两个大盒子之间添加一个空的div标签，标签上带有clear:both属性
- 伪类： :after 选中某个标签内部的最后的位置，前面紧跟普通选择器，一般给清除浮动的父盒子添加一个clearfix的类名
```
.clearfix:after {
  content: "1";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
```
- 添加溢出隐藏属性 overflow:hidden

1.5 伪类选择器

伪类不能单独出现，必须和其他选择器搭配使用

不给标签添加任何属性，伪类名都是语法提前规定好的，伪类选择器后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载。

a标签的伪类

a标签可以根据用户行为不同划分四种状态，用户触发对应的行为，加载对应的样式。书写顺序一定不能颠倒

a:link {
  color:gray; /* 访问前的状态 */
}
a:visited {
  color: cyan; /* 访问后的状态 */
}
a:hover {
  color: red; /* 鼠标悬停的状态 */
}
a:active {
    color: yellow; /* 鼠标点击的状态 */
}

1.6 背景属性

1.6.1 背景颜色 background-color

作用：在盒子区域添加背景颜色的修饰

加载区域：在border及以内加载背景颜色。

属性名：颜色名，颜色值

1.6.2 背景图片 background-image

作用：给盒子添加图片的背景修饰

加载范围：默认加载到边框以内部分，后期如果图片不重复加载，加载从border以内开始。

属性值：url(图片路径)

1.6.3 背景重复 background-repeat

作用：设置添加的背景图是否要在盒子中重复进行加载。

属性值	说明
repeat	重复，默认值，表示会使用被背景图片重复加载填满整个盒子区域
no-repeat	不重复，无论背景图是否大于盒子范围，都只加载一次图片
repeat-x	水平重复，使用背景图片水平重复加载铺满一行，垂直方向不重复
repeat-y	垂直重复，使用背景图片垂直重复加载铺满一行，水平方向不重复

1.6.4 背景定位 background-position

作用：主要用于设置不重复的图片在背景区域的加载开始位置

属性值：有三种写法。单词表示法，像素表示法，百分比表示法，无论哪种写法，属性值都有两个，值之间用空格分隔。默认位置是 0 0 .border以内的左上角顶点为顶点。

第一个值表示垂直方向

第二个值表示水平方向

单词表示法：center left right;

像素表示法：

.box{
  width: 100px;
  height: 100px;
  background-image: url("iamge/l.jpg");
  background-position: 0 -10px;
}

1.6.5 背景附着 background-attachment

作用：设置背景图片是否随着页面或者盒子的滚动而滚动。

属性值

属性值	说明
scroll	滚动的，背景图片与盒子保持相对位置，随着页面的滚动而滚动
fixed	固定的，背景图片的定位参考点从盒子border以内的左上顶点变成浏览器窗口左上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图片固定在浏览器窗口的某个位置，不会随着页面的滚动而滚动。

1.6.6 background 连写

body {
  /* 背景图片 是否平铺 背景位置 背景附着 背景颜色 */
  background: url('iamg.jpg') no-repeat center top scroll lightblue;
}

1.6.7 背景应用

替换插入图，如logo图

让文字消失的方法：1.设置文学字号为0，有兼容性问题

2.利用text-indent 和 overflow 解决

padding区域背景图

.list {
  width: 300px;
  padding-left: 10px;
  margin: 10px;
  list-style: none;
  font: 16px/32px "微软雅黑";
}
.list li {
  background: url("iamges/star.jpg") no-repeat left center;
  padding-left: 20px;
}

精灵图

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术(css Sprites css雪碧)

css精灵：一种处理网页背景图像的方式。

由很多小的背景图合成大图就叫做精灵图。

通过背景图和背景定位，利用切图工具选取需要的位置
```
p {
  width: 80px;
  height: 20px;
  background: url("images/icons.png") no-repeat -146px -48px;
}
```

1.7 C3背景属性

1.7.1 背景半透明

颜色值新增：rgba a：alpha 0-1

1：完全显示 0：透明

注意：背景半透明是盒子半透明，盒子里面的内容不影响；

.box {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,.5);
}

应用：1.字体，边框也可使用半透明

1.7.2 背景缩放 background-size

设置背景图片的尺寸。

属性值	说明
px值	1-2个像素值，只设置一个值，垂直方向等比例拉伸；设置两个值，按照设置加载
百分比	同像素值设置方法，设置百分比时，数值参照盒子的宽高属性
cover	自动调整缩放比例，把背景图像扩展至足够大，以使背景图片完全覆盖背景区域，如有溢出部分会被隐藏
contain	自动调整缩放比例，把图像扩展至最大尺寸，保证图片始终完整显示在背景区域

1.8 定位 position

作用：设置定位的元素，它需要根据某个参考元素发生位置偏移。

属性值	说明
relative	相对定位
absolute	绝对定位
fixed	固定定位

偏移量属性：定位的元素想发生位置移动，必须搭配偏移量的使用

左右：left right

上下：top bottom

1.8.1 相对定位 relative

参考：标签加载的原始位置。

性质：

相对定位的元素没有脱离标准流。占有原来的位置
元素显示效果上原位留坑形影分离

注意：

偏移量属性的值区分正负。正：与属性名相反；负：与属性名相同
同一个方向上不能设置两个偏移量，设置两个，水平方向会加载left,垂直方向会加载top。

建议：书写时从水平和垂直方向各挑一个
由于相对定位的参考元素是自身，left的正值等价于right的负值。top的正值等价于bottom的负值。

实际应用：

由于相对定位元素比较稳定，未脱标。后续可以选择相对定位的元素应用为绝对定位的参考元素子绝父相。
相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置微调，对文字进行微调。

.p {
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  left:100px;
}

1.8.2 绝对定位 absolute

参考元素：参考的是距离最近的有定位的祖先元素，如果祖先元素没有定位，参考body.

必须搭配偏移量属性才会发生移动

性质：

绝对定位的元素会脱离标准流，不再占据原来的位置
绝对定位的元素宽高不会失效。不设置宽高只能被内容撑开。
不用的参考元素以及不同的偏移量组合，导致定位元素参考点不同，具体位移效果不同
由于参考点不同，left的负值不再等价于right的正值。top的负值不再等价于bottom的正值。

.box {
  width: 100px;
  height: 100px;
  position: relative;
}
.box .son{
  width: 50px;
  height:50px;
  position: absolute;
  left: 50px;
  top:50px;
}

1.8.3 固定定位 fixed

固定定位脱离标准流

参考元素：浏览器窗口

参考点：浏览器窗口的四个顶点，跟偏移量组合方向有关。

由于浏览器窗口的四个顶点不变，所以固定定位的元素也是始终不变的

性质：脱离了标准流，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。

.backtop {
  position:fixed;
  right: 100px;
  bottom: 100px;
  width: 100px;
  height: 50px;
  background-color: #ccc;
  font: 18px/50px "微软雅黑";
  color: #333;
  text-decoration: none;
}

1.8.4 定位的应用

压盖效果

.box {
  width: 440px;
  position: relative;
  border:5px solid red;
}
.box p {
  position: absolute;
  right: 50px;
  bottom:50px;
  width: 50px;
  height: 50px;
  background-color: pink;
}

居中

.box {
  width: 440px;
  position: relative;
  border:5px solid red;
}
.box p {
  width: 50px;
  height: 50px;
  background-color: pink;
  position: absolute;
  left: 50%;
  top:50px;
  margin-left: -25px;
}

定位压盖顺序 z-index

默认压盖顺序。后写的会压盖前面的。

书写代码时，需要注意压盖效果。必须合理设置HTML的顺序书写。
```
.box {
  width: 300px;
  height: 300px;
  background-color: blue;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color:pink;
  position:fixed;
  top:0;
  left:0;
  z-index:4;
}
.box2 {
  width: 50px;
  height: 50px;
  background-color:green;
  position:absolute;
  top:0;
  left:0;
}
```
自定义压盖顺序：z-index

属性值是数字。数字大的会压盖数字小的。如果属性值相同，按照HTML的书写顺序压盖。

z-index只要给定位的元素设置才会生效

父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖部分：

父盒子：如果不设置z-index，后写的压盖先写的，如果设置了z-index属性，值大的压盖值小的

子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了z-index值，无论子级值多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

css补充说明