CSS之我不会

非常推荐html-css学习视频：尚硅谷html-css

一、选择器

作用：选择页面上的某一个后者某一类元素

基本选择器

1.标签选择器

格式：标签{}

<h1>666</h1>

<style>
 	h1{
 		css语法
 	}
</style>

2.类选择器

格式：.类名{}

<h1 class="name">666</h1>
<style>
	.name{
		css语法
	}
</style>

3.id选择器

格式：#名称{}

<h1 id="name">666</h1>
<style>
	#name{
		css语法
	}
</style>

高级选择器（只说一个`id+class`组合）

格式：id

<style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        属性名,属性名 = 属性值（正则）
              = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
             存在id属性的元素
                a[]{}
         */
        a[id]{
        /*
        a标签使用id的元素
        */
            background: deeppink;
        }
        a[id=first]{
            /*
            id=first的元素
            */
            background: greenyellow;
        }

        a[class*="links"]{
            /*
            class 中有links的元素
            */
            background: green;
        }

        a[href^=http]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
        a[href$=pdf]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
</style>

<p class="demo">
    <a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
    <a href="" class="links item active" target="_blank " title="test">链接</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>

二、美化

1.字体 font

font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

2.文本样式 text

文本对齐方式：text-align：center
首行缩进: text-indent：2em
行高: line-height：300px
下划线:text-decoration

text-decoration:underline /下划线/
text-decoration:line-through /中划线/
text-decoration:overline /上划线/
text-decoration:none /超链接去下划线/

图片、文字水平对齐（行内元素对齐）

img,span{
    vertical-align: middle;
}

6.文本阴影

<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>

<h1>文本阴影效果！</h1>

在这里插入图片描述

3.超链接伪类

	<style>
        /*超链接有默认的颜色*/
        a{
            text-decoration: hotpink;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: dodgerblue;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color:green
        }
        /*点击之后的状态*/
        a:visited{
            color:mediumpurple;
        }
    </style>

列表 ui li

有序 ui li
无序 ol li
list-style-type: circle
list-style-type: square
list-style-type: upper-roman
list-style-type: lower-alpha

背景

1.背景颜色 `background-color`

2.透明度 `opacity`

3.背景图片 `background-image: url("name.jpg")`

三、盒子模型

布局三大核心：盒子模型、浮动、定位

1.元素的显示模式

1.块元素（block）

又称：块级元素特点：

在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
默认宽度：撑满父元素。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

主体结构标签： <html> 、 <body>
排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、 <caption>
<form> 与 <option>

2.行内元素（inline）

又称：内联元素特点:

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
无法通过 CSS 设置宽高。

文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
<a> 、 <label>、<span>、<input>

3.行内块元素（inline-block）

又称：内联块元素特点：

在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
默认宽度：由内容撑开。
默认高度：由内容撑开。
可以通过 CSS 设置宽高。

图片： <img>
单元格： <td> 、 <th>
表单控件： <textarea> 、 <select> 、 <button>
框架标签： <iframe>

2.盒子模型

在这里插入图片描述

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子 Box 。
利用 CSS 设置好盒子样式，然后摆放到相应位置。 （难点）
往盒子里面装内容

3.盒子模型（Box Model）组成

在这里插入图片描述

1.边框

 border : border-width || border-style || border-color;

在这里插入图片描述
边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线

2.内边距（padding）

和写属性
在这里插入图片描述
分写属性

3.外边距（margin）

在这里插入图片描述

margin 注意事项：

子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）
上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置。
块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。
margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。
margin 的值可以是负值

4.处理内容溢出

在这里插入图片描述

注意：

overflow-x 、 overflow-y 不能一个是 hidden ，一个是 visible ，是实验性属性，不建议使用。
overflow 常用的值是 hidden 和 auto ，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

5.布局小技巧（重点）

行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。

如何让子元素，在父亲中 水平居中：

若子元素为块元素，给子元素加上： margin:0 auto
若子元素为行内元素、行内块元素，给父元素加上：text-align:center

如何让子元素，在父亲中 垂直居中：

若子元素为块元素，给子元素加上： margin-top ，值为：父元素 content －子元素盒子(margin+border+padding) / 2。
若子元素为行内元素、行内块元素：让父元素的 line-height=height（父元素高度），每个子元素都加上： vertical-align:middle 。
补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

不知到父元素高度，子元素在父元素垂直居中

通过数学计算calc()，计算出父元素高度：用100%视口高度-已经占用的高度 100vh - height 然后同上

height: calc(100vh - 70px);

6.常用布局练习

块元素水平垂直居中

 	<style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: gray;
            overflow: hidden;
        }
        .inner{
            height: 100px;
            width: 200px;
            padding: 10px;
            border: 10px solid red;
            background-color: orange;
            margin: 130px auto 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
	<div class="outer">
        <div class="inner">
            inner
        </div>
    </div>

行内元素水平垂直居中

	<style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: pink;
            text-align: center;
            line-height: 400px;
        }
    </style>
    <div class="outer">
        <span style="background-color: salmon;height: 20px">出来玩</span>
    </div>

行元素、行内块绝对居中

	<style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: salmon;
            text-align: center;
            line-height: 400px;
            font-size: 0;
        }
        .outer img{
            vertical-align: middle;
            height: 100px;
            width: 100px;
        }
        .outer span{
            background-color: #35BAF6;
            vertical-align: middle;
            font-size: 40px;
        }
    </style>

	<div class="outer">
        <span style="">头像：</span>
        <img src="../image/小姐姐.gif">
    </div>

背景图片铺满

		html, body{
            width: 100%;
            height: 100%;
        }
        body{
            background: url("../image/bg.jpg");
            background-repeat: no-repeat; /*图片不重复*/
            background-size: cover;  /*图片铺满整个视口*/
        }

四、浮动 float

场景：布局

1.简介

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。
在这里插入图片描述

2.元素浮动后的特点

🤢脱离文档流。
😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽
高。
😊不会独占一行，可以与其他元素共用一行。
😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

3.解决浮动产生的影响

3.1元素浮动后会有哪些影响

对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

3.2 解决浮动产生的影响（清除浮动）

解决方案：

方案一：给父元素指定高度。
方案二：给父元素也设置浮动，带来其他影响。
方案三：给父元素设置 overflow:hidden 。
方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

.parent::after {
content: "";
display: block;
clear:both;
}

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

3.3 浮动小练习

整体效果如下：
在这里插入图片描述

盒子分析
在这里插入图片描述

	<style>
        * {
            margin: 0;
            padding: 0;
        }
        .float-left {
            float: left;
        }
        .float-right{
            float: right;
        }
        .clear-float::after{
            content: '';
            display: block;
            clear: both;
        }
        .container {
            text-align: center;
            width: 960px;
            margin: 0 auto;
        }
        .header {
            height: 80px;
            width: 960px;
            text-align: center;
            line-height: 80px;
        }
        .log{
            width: 200px;
            margin-right: 10px;
        }
        .banner1{
            width: 540px;
            margin-right: 10px;
        }
        .banner2{
            width: 200px;
        }
        .log,.banner1,.banner2{
            background-color: #ccc;
            height: 80px;
        }
        .menu{
            margin-top: 10px;
            background-color: #CCC;
            line-height: 30px;
        }
        .content{
            width: 960px;
        }
        .item1,.item2{
            width: 368px;
            height: 198px;
            border: 1px solid black;
            margin-top: 10px;
            margin-right: 10px;
            line-height: 198px;
        }
        .item3,.item4,.item5,.item6{
            height: 198px;
            width: 178px;
            margin-right: 10px;
            margin-top: 10px;
            border: 1px solid black;
            line-height: 198px;
        }
        .item7,.item8,.item9{
            border: 1px solid black;
            height: 128px;
            width: 198px;
            margin-top: 10px;
            line-height: 128px;
        }
        .footer{
            background-color: #ccc;
            width: 960px;
            height: 60px;
            margin-top: 10px;
            line-height: 60px;
        }
    </style>
	
	<div class="container">
        <!--头-->
        <div class="header clear-float">
            <div class="log float-left">log</div>
            <div class="banner1 float-left">banner</div>
            <div class="banner2 float-left">banner</div>
        </div>
        <!--菜单-->
        <div class="menu">菜单</div>
        <!--内容-->
        <div class="content clear-float">
            <!--左-->
            <div class="content-left float-left">
                <!--上-->
                <div class="left-up clear-float">
                    <div class="item1 float-left">栏目一</div>
                    <div class="item2 float-left">栏目二</div>
                </div>
                <!--下-->
                <div class="left-down clear-float">
                    <div class="item3 float-left">栏目三</div>
                    <div class="item4 float-left">栏目四</div>
                    <div class="item5 float-left">栏目五</div>
                    <div class="item6 float-left">栏目六</div>
                </div>
            </div>
            <!--右-->
            <div class="content-right clear-float">
                <div class="item7 float-left">栏目七</div>
                <div class="item8 float-left">栏目八</div>
                <div class="item9 float-left">栏目九</div>
            </div>
        </div>
        <!--页脚-->
        <div class="footer">页脚</div>
    </div>

五、定位 position

1.相对定位

1.1 如何设置相对定位？

给元素设置 position:relative 即可实现相对定位。
可以使用 left 、 right 、 top 、 bottom四个属性调整位置

1.2 相对定位的参考点在哪里？

相对自己原来的位置

1.3 相对定位的特点：

1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

默认规则是：
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3.left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。

注意：绝大多数情况下，相对定位，会与绝对定位配合使用。（子元素绝对定位，父元素相对定位——子绝父相）

2.绝对定位

2.1 如何设置绝对定位？

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。

2.2 绝对定位的参考点在哪里？

参考它的包含块。

什么是包含块？

对于没有脱离文档流的元素：包含块就是父元素；
对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

2.3 绝对定位元素的特点：

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。

3.固定定位

3.1 如何设置为固定定位？

给元素设置 position: fixed 即可实现固定定位。
可以使用 left 、 right 、 top 、 bottom四个属性调整位置。

3.2 固定定位的参考点在哪里？

参考它的视口

什么是视口？—— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。

3.3 固定定位元素的特点

脱离文档流，会对后面的兄弟元素、父元素有影响。
left 不能和 right 一起设置， top 和 bottom 不能一起设置。
固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。

4. 粘性定位

4.1 如何设置为粘性定

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。

4.2 粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

4.3 粘性定位元素的特点

不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。

粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

5.定位层级

定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
可以通过 css 属性 z-index 调整元素的显示层级。
z-index 的属性值是数字，没有单位，值越大显示层级越高。
只有定位的元素设置 z-index 才有效。
如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。

6. 定位的特殊应用

注意：

发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高。
发生相对定位后，元素依然是之前的显示模式。
以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素。

让定位元素的宽充满包含块

块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
高度想与包含块一致， top 和 bottom 设置为 0 。

让定位元素在包含块中居中

方案一：

left:0;
right:0;
top:0;
bottom:0;
margin:auto;

方案二：

left: 50%;
top: 50%;
margin-left: 负的宽度一半;
margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！！！

七、布局

1.版心

在 PC 端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心。
版心的宽度一般是 960 ~1200 像素之间。
版心可以是一个，也可以是多个。

2. 常用布局名词

位置	名词
顶部导航条	`topbar`
页头	`header` 、 `page-header`
导航	`nav` 、 `navigator` 、 `navbar`
搜索框	`search` 、 `search-box`
横幅、广告、宣传图	`banner`
主要内容	`content` 、 `main`
侧边栏	`aside` 、 `sidebar`
页脚	`footer` 、 `page-footer`

八、伸缩盒模型（display：flex布局）

1.伸缩容器、伸缩项目

伸缩容器：开启了 flex 的元素，就是：伸缩容器。

给元素设置： display:flex 或 display:inline-flex ，该元素就变为了伸缩容器。
display:inline-flex 很少使用，因为可以给多个伸缩容器的父容器，也设置为伸缩容器。
一个元素可以同时是：伸缩容器、伸缩项目。

伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目。

仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目。
无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

2.主轴与侧轴

主轴： 伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）。
侧轴： 与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边
是终点）。

3.主轴方向

属性名： flex-direction
常用值如下：

1.row ：主轴方向水平从左到右 —— 默认值
2.row-reverse ：主轴方向水平从右到左。
3.column ：主轴方向垂直从上到下。
4.column-reverse ：主轴方向垂直从下到上。

在这里插入图片描述

注意：改变了主轴的方向，侧轴方向也随之改变。

4.主轴的换行方式

属性名： flex-wrap
常用值如下：
1. nowrap ：默认值，不换行。
2. wrap ：自动换行，伸缩容器不够自动换行。
3. wrap-reverse ：反向换行。

5.flex-flow

flex-flow 是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序要求
```
flex-flow: row wrap;
```

6.主轴对齐方式

属性名： justify-content
常用值如下：
1. flex-start ：主轴起点对齐。—— 默认值
2. flex-end ：主轴终点对齐。
3. center ：居中对齐
4. space-between ：均匀分布，两端对齐（最常用）。
5. space-around ：均匀分布，两端距离是中间距离的一半。
6. space-evenly ：均匀分布，两端距离与中间距离一致。

7.侧轴对齐方式

7.1 一行的情况

所需属性： align-items
常用值如下：
1. flex-start ：侧轴的起点对齐。
2. flex-end ：侧轴的终点对齐。
3. center ：侧轴的中点对齐。
4. baseline : 伸缩项目的第一行文字的基线对齐。
5. stretch ：如果伸缩项目未设置高度，将占满整个容器的高度。—— （默认值）

7.2 多行的情况

所需属性： align-content
常用值如下：
1. flex-start ：与侧轴的起点对齐。
2. flex-end ：与侧轴的终点对齐。
3. center ：与侧轴的中点对齐。
4. space-between ：与侧轴两端对齐，中间平均分布。
5. space-around ：伸缩项目间的距离相等，比距边缘大一倍。
6. space-evenly : 在侧轴上完全平分。
7. stretch ：占满整个侧轴。—— 默认值

8. flex 实现水平垂直居中

方法一：父容器开启 flex 布局，随后使用 justify-content 和 align-items 实现水平垂直居中

.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
	justify-content: center;
	align-items: center;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
}

方法二：父容器开启 flex 布局，随后子元素 margin: auto

.outer {
	width: 400px;
	height: 400px;
	background-color: #888;
	display: flex;
}
.inner {
	width: 100px;
	height: 100px;
	background-color: orange;
	margin: auto;
}

九、H5布局简介

新增布局标签

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等。	双
section	页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）。	双
aside	侧边栏	双
main	文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用。	双
hgroup	包裹连续的标题，如文章主标题、副标题的组合（ W3C 将其删除）	双

关于 article 和 section ：
1. artical 里面可以有多个 section 。
2. section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。
3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用
4. article 元素。