2. CSS3 基础

CSS3 基础

• HTML 负责页面的内容和结构
• CSS 负责页面的样式
• JS 负责页面的交互等

一、CSS 概述

​ CSS 指层叠样式表(Cascading Style Sheets)

二、CSS 语法

代码书写位置

1.1 行内样式

<ul style="list-style-type:disc;background:red;">
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>

1.2 内嵌式（写在style标签内）

<style>
    ul {
        list-style-type: disc;
        background: red;
    }
</style>

1.3 外链式

<link rel="stylesheet" href="style.css" />

三、选择器

选择器 帮助我们选中指定标签的语法

选择器 {
	k:v;
	k:v;
}

2.1 标签选择器

​ 选中的是页面同一类标签。

​ 缺点：不能对个性的元素进行设置。

li {
	background-color:blue;
}

2.2 id 选择器

<li id="js">js</li>
#js {
    color: blue;
    background-color: pink;
}

​ 每个标签都有id属性，一般id1的值是唯一的

​ id选择器不方便复用

​ 一般在css中用的比较少。

2.3 类选择器

<li class="red">html</li>

.red {
    background-color: #fff;
    color: red;
}

每个标签都有class属性，页面中class是可以重复被使用，一个标签可以携带多个class，多个class之间用空格隔开。

一般在css中用的比较多。

2.4 通配符选择器

* {}

2.5 后代选择器

ul li {}

2.6 儿子选择器

div > p {}

2.7 并集选择器

div,p {}

2.8 交集选择器

div.box {
    font-size:16px;
}

2.9 权重

​ 行内样式最高（除非加 !important 提升权重）

​ 单个选择器：id选择器>class选择器>标签选择器>通配符选择器

​ 统计单个选择器权重之和,假如权重相同，看选择器的代码书写位置，后面的覆盖前面的，假如属性是通过继承的 权重等于0。

​ id选择器权重为100，class选择器权重为10 ，标签选择器权重为 1

四、css 常用属性

4.1 字体属性

color:red; 字体颜色
font-size:16px; 字体大小，px像素，pt(印刷，3pt=4px)，em（1em 相当于父亲字号的1倍，谷歌浏览器默认16px）
font-weight:400;  设置字体的粗细，100,200，...700 ,400=normal,700=bold
font-family:"微软雅黑";  字体
font-style:italic;  	设置字体倾斜
font-variant:small-caps;  设置小型大写字母的字体显示文本
font:font-size/line-height font-family;综合属性

4.2 字体属性

text-align:left/center/justify/right; 设置文本对齐方式
text-indent:4em;  缩进文本
text-decoration:none/underline/overline/line-through/blink;  文本装饰
text-transform:lowercase/uppercase;  文本大小写
line-height:18px; 行高，line-height=height,单行文本会垂直居中
letter-spacing: 1px;  字间距；
word-spacing: 5px;  英文单词间距

4.3 元素显示模式属性

display:none/block/inline/inline-block;

元素分类;

1. 块级元素（可以设置宽高，单独一行，不设置宽度默认为父亲宽度的100%），如：div、p、ul、li、ol、dl、dt、dd、h1、h2、h3、h4、h5、h6 等;
2. 行内元素（也叫内联元素，设置宽高无效，宽度由内容撑开，可以与其他非块级元素并排）。如：span，b，strong，i，em，a等。
3. 行内块元素（可以设置宽高，可以与其他非块级元素并排），如：img、input等

通过display属性改变元素的显示模式

display:block;  元素转换成块级元素
display:inline;元素转换成行内元素
display:inline-block;元素转换成行内块元素
display:none;  元素消失

4.4 列表属性

list-style-type:none/disc/square/circel;  设置列表样式
list-style-image: url('/i/eg_arrow.gif');  设置列表图片
list-style-position:inside/outside;  设置列表中列表项目标记的位置
list-style:disc outside url('/i/eg_arrow.gif'); 列表简写属性

4.6 浮动

float: left/right/none;

特点：

​ 浮动主要用于网页布局。实现有宽高的元素的并排
​ 浮动的元素 不能撑开父亲 浮动的元素脱离标准流

清除浮动的方法：
1. 父元素增加overflow（父元素添加  overflow:hidden）
2. 增加标签法；
3. 使用after伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

4.7 盒子模型

​ 每个元素都可以看成是一个盒子

​ 盒子模型相关的属性：

​ 4.7.1 width 内容区域的宽度

​ 4.7.2 height 内容区域的高度

​ 4.7.3 内边距(padding)

padding: 20px; 四个方向都是20px
padding: 20px 30px; 上下20 左右30
padding: 10px 20px 30px; 上10 左右20 下30
padding: 10px 20px 30px 40px; 上10 右20 下30 左40 
顺时针 上右下左

按照方向进行展开 padding-left padding-top padding-right padding-bottom
padding:20px;
padding-left:10px;

注意 行内元素左右padding生效 上下不生效

4.7.4 边框（border）

border: 2px solid red; 粗细 形状  颜色

按照方向展开
border-left:2px solid red; 粗细 形状  颜色
border-right:2px solid red; 粗细 形状  颜色
border-top:2px solid red; 粗细 形状  颜色
border-bottom:2px solid red; 粗细 形状  颜色

每个方向按照三要素展开
border-top-width:2px;
border-top-style:solid;
border-top-color:red;

border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:red;

border-left-width:2px;
border-left-style:solid;
border-left-color:red;

border-right-width:2px;
border-right-style:solid;
border-right-color:red;

按照三要素
border-style:solid;
border-width:2px;
border-color:red;

4.7.5 外边距 (margin)

​ 外边距：盒子与其他盒子的间距

​ 语法上面类似padding

​ 对于一个有宽度的块级元素，可以设置margin:0 auto; 让其水平居中。

 margin: 20px;
 margin: 10px 20px 30px 40px;
 margin: 20px 40px;
 margin-left: 20px;
 margin-top: 30px;
 margin-right: 30px;
 margin-bottom: 40px;

备注：margin塌陷现象

​ 1. 上下兄弟元素，上兄弟的margin-bottom 和下兄弟的margin-top会发生塌陷（以较 大的为准，不是简单的叠加）最简单的解决方法就是设置一个方向就可。

  					2. **父子元素塌陷，儿子的margin-top会塌陷在父亲的margin-top，父亲的margin-top以较大的为准。解决方法是善用父亲的padding。**

4.8 背景

background-color 背景颜色

background-image:url(); 背景图片

background-repeat:repeat-x/repeat-y/repeat/no-repeat; 背景图平铺，默认背景图平铺

background-position 背景图定位

background-size：63px 100px; 属性规定背景图片的尺寸

background: 背景色 背景图片 平铺 定位 综合属性

background-color: red;
background-image: url(jiazhuang.png); */
/*默认背景图会平铺*/
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y; 
background-position: right top;
background-position: center;
background-position: left;
background-position: top;
background-position: -100px -100px;
background-position: 100px;
background-position: 50% 50%;
background-size: 100px 100px;
background: red no-repeat url(jiazhuang.png)  40px 50px;

4.9 设置文本溢出显示省略号

text-overflow:clip/ellipsis; 属性规定当文本溢出包含元素时发生的事情。

ellipsis 显示省略符号来代表被修剪的文本

white-space:nowrap; 属性设置如何处理元素内的空白。

overflow:hidden;

4.9.1 单行文本溢出隐藏

div.box1 {
    width: 200px;
    /* height: 100px; */
    border: 2px solid #000;
    margin: 100px auto;
    /* 单行文本溢出隐藏*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

4.9.2 多行文本溢出隐藏

div.box2 {
    width: 300px;
    border: 2px solid #000;
    margin: 0 auto;
    /*转换为弹性盒*/
    display: -webkit-box;
    /* 设置排列方式为垂直排列*/
    -webkit-box-orient: vertical;
    /*设置显示的行数*/
    -webkit-line-clamp: 4;
    overflow: hidden;
}

4.10 伪类

link 未访问过

visited 已访问过

hover 鼠标移动到链接上

active 选定的链接

/*love hate */
/*未访问时*/
a:link {
    color: #000;
    text-decoration: none;
}
/*访问过*/
a:visited {
    color: #ccc;
}
/*鼠标放入*/
a:hover {
    text-decoration: underline;
}
/*按住鼠标不松手*/
a:active {
    font-size: 18px;
}

div:hover {
    background-color: red;
    width: 400px;
}


/*
a {
....
}

a:hover {

}
*/

4.11 vertical-align 属性设置元素的垂直对齐方式

vertical-align:top/middle/bottom/text-top/text-bottom;

4.12 定位 position（position: static;默认值）

4.12.1 相对定位

position:relative; 配合方位名词：top/left/bottom/right

特征：1. 相对定位的元素还是标准流的元素（不脱标） 2. “老家留坑” 3. 做元素位置的微调 4. 搭配绝对定位的元素

.box {
    width: 200px;
    height: 200px;
    background-color: orange;
    /*默认值*/
    /* position: static; */
    position: relative;
    left: 100px;
    right: 100px;
    top: 100px;
}

4.12.2 绝对定位

position:absolute;

特征：1. 绝对定位的元素脱标；

2. 绝对定位的元素可以设置宽高，不设置宽高有内容撑开；
3. 参考点：绝对定位的盒子总是以最近的带有定位（相对定位、绝对定位或固定定位）的祖先元素为参考点，假设没有定位的祖先元素，则以body为准；
4. 在工程上，通常会利用子绝父相来在父亲的空间范围内对儿子进行定位。

<div class="outer">
<p class="inner"></p>
</div>

.outer {
    width: 300px;
    height: 200px;
    background-color: blue;
    position: relative;
}

.outer > .inner {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: red;
    /* margin-top: -25px;
    margin-left: -50px; */
    transform: translate(-50%,-50%); 
}

4.12.3 固定定位

position:fixed;

特征：1.固定定位的元素脱标

2. 以浏览器的窗口为参考点。

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<style>
* {
    padding: 0;
    margin: 0;
}
.box {
    width: 400px;
    height: 400px;
    background-color: blue;
    margin: 100px auto;
}
.box > div {
    width: 100px;
    height: 100px;
}
.box > .box1 {
    background-color: pink;
}
.box > .box2 {
    background-color: orange;
    position: fixed;
    left: 0;
    top: 100px;
}
.box > .box3{
    background-color: black;
}
</style>

4.12.4 沾性定位

position: sticky;

 <div class="div">
     <p>第一行</p>
     <p>第二行</p>
     <p class="sticky">第三行</p>
     <p>第四行</p>
     <p>第五行</p>
     <p>第六行</p>
     <p>第七行</p>
     <p>第八行</p>
     <p>第九行</p>
     <p>第十行</p>
 </div>      
 
 <style>
     .sticky{
         width: 100%;
         color:white;
         background-color: cadetblue;
         border: 1px solid red;
         position: sticky;
         top:100px;
     }
     .div{
         height: 3000px;
         text-align: center
     }
 </style>