CSS知识点梳理

我就是我 2022-02-03 15:57 291阅读 0赞

## 字体及样式 ##

*  字体
    
    font-weight:  
    font-style:italic; 斜体  
    font-family:cursive; 字体
 *  颜色

（1）三原色：红、绿、蓝

（2）颜色函数：rgb(a,b,c) 0-255 000-fff

*  单位
    
    px：一个像素只能展示一个颜色 屏幕分辨率即像素 像素点越大，屏幕分辨率越次  
    像素是一个相对单位
    
    font-size：16px  
    1 em = 1 \* font-size  
    因此em是随着px的变化而变化的，这也就是用em来做首行缩进的单位的巧妙之处
 *  段落
    
    text-align:left center right 对齐方式 水平居中  
    line-height: 20px 单行文本所占的高度  
    若是1.2倍的行高，则可以使用1.2em
    
    text-indent: 2em 首行缩进
    
    单行文本所占高度等于容器高度，则此文本在垂直方向居中
 *  文本装饰
    
    原价50元  
    del\{  
    text-decoration:none; 效果无线  
    \}
 *  鼠标样式（调用的是系统样式）
    
    cursor:pointer; 鼠标成小手  
    cursor:help; 鼠标成问好
 *  边框
    
    border:1px solid black 边框的粗细、边框的线为实线、颜色 复合属性  
    border-width:10px  
    border-style: dotted（点状虚线） dashed（条状虚线） solid（实线）
    
    border-left-color:transparent（透明色）
 *  注意点
    
    img 属性设置宽后，其高也会同比例缩放。

## 选择器及其权重 ##

*  派生选择器

直接关系：

<div class="wrapper">
    		<strong class="box">
    				<em>demo</em>
    		</strong>
    </div>
    
    .wrapper .box .em{
    		background-color:black;
    }

间接关系：

<div>
    		<em>demo_1</em>
    				<strong>
    						<em>demo_2</em>
    				</strong>
    </div>
    
    div em{
    		background-color:black;
    }

*  直接子元素选择器
    
    *demo\_1* ***demo\_2***
    
    div > em\{  
    blackground-color:black;  
    \}
 *  属性选择器
    
    demo\_1
    
    demo\_2
    
    demo\_3
    
    \[class=“demo”\]\{  
    background-color:red;  
    \}
 *  并列选择器
    
    demo\_1
    
    demo\_2
    
    demo\_3
    
    div\[class=“demo”\]\{  
    background-color: red;  
    \}
    
    div.demo\{  
    background-color: green;  
    \}
 *  分组选择器
    
    demo\_1
    
    *demo\_2*
    
    demo\_3
    
    div,  
    em,  
    p\{  
    background-color: red;  
    \}
 *  伪类选择器
    
    www.taobao.com  
    a\{  
    text-decration:none;  
    \}  
    a:hover\{  
    text-decration:underline;  
    background-color:\#f40;  
    color:\#fff;  
    font-size:16px;  
    font-weight:bold;  
    font-family:arial;  
    border-radius:10px;  
    \}
 *  伪元素

伪元素天生就是行级（inline）元素，要想让一些css属性在它身上起作用，可以将其display设为inline-block。

content 只能用在伪元素里面。

<ui class="nav">
    		<li class="item">
    			<a href="#">天猫</a>
    		</li>
    		<li class="item">
    			<a href="#">聚划算</a>
    	    </li>
    		<li class="item">
    			<a href="#">天猫超市</a>
    		</li>
    	</ui>
    
    *{
    	margin: 0;
    	padding: 0;
    	color: #424242;
    	font-family: arial;
    }
    
    a{
    	text-decoration: none;
    }
    
    .nav::after{
    	content: "";
    	display: block;
    	clear: both;
    }
    
    .nav{
    	list-style: none;
    }
    
    .nav .item{
    	float: left;
    	margin: 0 10px;
    	height: 30px;
    	line-height: 30px;
    }
    
    .nav .item a{
    	padding: 0 5px;
    	color: #f40;
    	font-weight: bold;
    	height: 30px;
    	display: inline-block;
    	border-radius: 15px;
    }
    
    .nav .item a:hover{
    	background-color: #f40;
    	color: #fff;
    }

*  权重
    
    通配符（\*） 0  
    标签|伪元素 1  
    class|属性|伪类 10  
    id 100  
    行间样式 1000  
    !important Infinity

当权重一样时，后面的css选择器表达式会覆盖前面的css选择器表达式，即展示后面表达式的css效果。

## 行级元素和块级元素 ##

*  行级元素（内敛元素 inline）

feature：内容决定元素所占的位置，不可以通过css改变宽高。

*  块级元素（block）

feature：独占一行，可以通过css改变宽高。

*  行级块元素（inline-block）

feature：内容决定大小，可以改宽高

这些标签都可以通过修改其内部的隐式属性display，来更改其是块级元素，行级元素还是行级块元素。

*  凡是带有inline的属性，都具有文字特性。所以以下这种情况不用特意修改：
    
    `<img src="fy.jpg"><img src="fy.jpg"><img src="fy.jpg"><img src="fy.jpg">`
    
    img\{  
    margin-left:-6px;  
    \}
 *  注意点
    
    position:abolute;  
    float:left/right;  
    打内部把元素转换成inline-block：可以改变宽高
    
    123
    
    span\{  
    position:abolute;  
    with:100px;  
    height:100px;  
    backround-color:red;  
    \}
    
    行级元素只能嵌套行级元素，块级元素可以嵌套任何元素。  
    p 标签内不能套块级元素 a 标签里不能套 a 标签。

## 常用的开发习惯 ##

*  先定义功能，后选择样式。
 *  标签自定义。
    
    em\{  
    font-style:normal’  
    color:\#c00;  
    \}  
    ul\{  
    list-style:none;  
    padding:0;  
    margin:0;  
    \}
 *  通配符选择器的权重为0，适合初始化所有标签。
    
    \*\{  
    padding:0;  
    margin:0;  
    text-decration:none;  
    \}
 *  如果a标签下面有image的话，让它的border为0。
    
    a img\{  
    border:0;  
    \}

## 盒子模型和层模型 ##

*  盒子模型

1、盒子壁：border

2、内边距：padding

3、外边距：margin

4、盒子内容：width+height

//上、右、下、左
    paddding:100px 150px 200px 250;
    
    //上、左右、下
    padding:100px 150px 200px;
    
    //上下、左右
    padding:100px 150px;
    
    //上
    padding-top:100px;
    padding:100px 0 0 0
    
    //border-width 类似于padding

*  层模型
    
    //底  
    bottom:
    
    //透明度  
    opacity:
    
    absolute：相对于最近的有定位的父级进行定位，如果没有，相对于文档进行定位。（脱离原来的位置进行定位）
    
    relative：相对于原来的位置进行定位。（保留原来的位置进行定位）
    
    fixed：固定定位，相对于可视区窗口，通常用于广告定位。

经典案列

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>DOCUMENT</title>
    	<link rel="stylesheet" type="text/css" href="demo_6.css">
    </head>
    <body>
    	<div class="demo"></div>
    	<div class="box"></div>
    </body>
    
    
    //demo_6.css
    *{
    	margin: 0;
    	padding: 0;
    }
    
    .demo{
    	position: relative;
    	left: 100px;
    	top: 100px;
    	background-color: red;
    	width: 100px;
    	height: 100px;
    	opacity: 0.5;
    }
    
    .box{
    	width: 150px;
    	height: 150px;
    	background-color: green;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>DOCUMENT</title>
    	<link rel="stylesheet" type="text/css" href="demo_7.css">
    </head>
    <body>
    	<div class="wrapper">
    		<div class="content">
    			<div class="box">
    				
    			</div>
    		</div>
    	</div>
    </body>
    
    
    //demo_7.css
    .wrapper{
    	margin-left: 100px;
    	width: 200px;
    	height: 200px;
    	background-color: orange;
    }
    
    .content{
    	position: relative;
    	margin-left: 100px;
    	width: 100px;
    	height: 100px;
    	background-color: black;
    }
    
    .box{
    	position: absolute;
    	left: 50px;
    	width: 50px;
    	height: 50px;
    	background-color: yellow;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>DOCUMENT</title>
    	<link rel="stylesheet" type="text/css" href="demo_8.css">
    </head>
    <body>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<div></div>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    	<br>
    </body>
    </html>
    
    
    //demo_8.css
    *{
    	margin: 0;
    	padding: 0;
    }
    
    div{
    	position: fixed;
    	left: 0;
    	top: 100px;
    	width: 100px;
    	height: 100px;
    	background-color: red;
    }
    
    //定位 居中
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>DOCUMENT</title>
    	<link rel="stylesheet" type="text/css" href="demo_9.css">
    </head>
    <body>
    	<div></div>
    </body>
    </html>
    
    
    //demo_9.css
    *{
    	margin: 0;
    	padding: 0;
    }
    
    div{
    	position: fixed;
    	left: 50%;
    	top: 50%;
    	width: 100px;
    	height: 100px;
    	background-color: red;
    	margin-left: -50px;
    	margin-top: -50px;
    }

## 居中五环和两栏布局 ##

*  居中五环
    
    DOCUMENT
    
    //demo\_9.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    .plat\{  
    position: absolute;  
    left: 50%;  
    top: 50%;  
    margin-top: -93px;  
    margin-left: -190px;  
    width: 380px;  
    height: 186px;  
    \}
    
    .circle1,  
    .circle2,  
    .circle3,  
    .circle4,  
    .circle5\{  
    position: absolute;  
    width: 100px;  
    height: 100px;  
    border: 10px solid black;  
    border-radius: 50%;  
    \}
    
    .circle1\{  
    border-color: red;  
    left: 0;  
    top: 0;  
    \}
    
    .circle2\{  
    border-color: green;  
    left: 130px;  
    top: 0;  
    \}
    
    .circle3\{  
    border-color: yellow;  
    left: 260px;  
    top: 0;  
    \}
    
    .circle4\{  
    border-color: blue;  
    left: 75px;  
    top: 70px;  
    \}
    
    .circle5\{  
    border-color: purple;  
    left: 195px;  
    top: 70px;  
    \}
 *  两栏布局
    
    DOCUMENT
    
    //demo\_10.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    .right\{  
    position: absolute;  
    right: 0;  
    width: 100px;  
    height: 100px;  
    background-color: \#fcc;  
    \}
    
    .left\{  
    margin-right: 100px;  
    height: 100px;  
    background-color: \#123;  
    \}

## BFC ##

*  定义

块级格式化上下文。

CSS把HTML中的每一个元素都当作一个盒子，并且每一个盒子里面都有一套渲染规则。

*  如何触发一个盒子的BFC（改变渲染规则）

结合实际需求，选择触发的方式

position:absolute;
    display:inline-block;
    float:right/left;
    overflow:hidden;  //溢出盒子的部分隐藏展示

## 两个经典bug ##

*  margin塌陷：父子嵌套的元素，垂直方向的margin，它俩会粘合在一起，取最大的值。
    
    DOCUMENT
    
    //demo\_11.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    .wrapper\{  
    margin-left: 100px;  
    margin-top: 100px;  
    width: 100px;  
    height: 100px;  
    background-color: black;  
    overflow: hidden;  
    \}
    
    .content\{  
    margin-left: 50px;  
    margin-top: 50px;  
    width: 50px;  
    height: 50px;  
    background-color: green;  
    \}
 *  margin合并：两个兄弟结构的元素，垂直方向的margin是合并的。
    
    DOCUMENT 123 234
    
    1
    
    2
    
    //demo\_12.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    .box1\{  
    background-color: red;  
    margin-right: 100px;  
    \}
    
    .box2\{  
    background-color: green;  
    margin-left: 100px;  
    \}
    
    .demo1\{  
    margin-bottom: 100px;  
    background-color: red;  
    \}
    
    .demo2\{  
    margin-top: 100px;  
    background-color: green;  
    \}
    
    .wrapper\{  
    overflow: hidden;  
    \}

注意点：虽然这样可以通过触发BFC来解决这个bug，所以这个bug我们不解决了。

## 浮动模型 ##

*  浮动元素产生了浮动流。
    
        所有产生浮动流的元素，块级元素看不到它们；
        
        而产生了BFC的元素和文本类属性（inline）的元素可以看到它们。
    
    报纸类布局  
    ![Image 1][]
    
    img\{  
    float:left;  
    width:100px;  
    \}
 *  浮动站队的边界是父级的边界。
 *  浮动元素并不是分层，只是产生了浮动流，这个浮动流对各元素的影响不一样。
 *  浮动元素脱离了文档流，不能主动的撑开父级。
 *  浮动元素形成文字环绕图片样式的原理：图片虽然脱离了文档流，但是并没有脱离文本流。
 *  包裹浮动模型（能清除浮动的必须是块级元素）
    
    DOCUMENT
    
    1
    
    2
    
    3
    
    demo\_15.css
    
        *{
          	margin: 0;
          	padding: 0;
          }
          
          .wrapper{
          	border: 1px solid black;
          }
          
          .wrapper::after{
          	content: "";
          	display: block;
          	clear: both;
          }
          
          .content{
          	float: left;
          	color: #fff;
          	background-color: black;
          	width: 100px;
          	height: 100px;
          }
 *  综合案例
    
    //初步实现淘宝导航栏
    
    DOCMENT
 *  天猫
 *  聚划算
 *  天猫超市
 *  //demo\_17.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    color: \#424242;  
    font-family: arial;  
    \}
    
    a\{  
    text-decoration: none;  
    \}
    
    .nav::after\{  
    content: “”;  
    display: block;  
    clear: both;  
    \}
    
    .nav\{  
    list-style: none;  
    \}
    
    .nav .item\{  
    float: left;  
    margin: 0 10px;  
    height: 30px;  
    line-height: 30px;  
    \}
    
    .nav .item a\{  
    padding: 0 5px;  
    color: \#f40;  
    font-weight: bold;  
    height: 30px;  
    display: inline-block;  
    border-radius: 15px;  
    \}
    
    .nav .item a:hover\{  
    background-color: \#f40;  
    color: \#fff;  
    \}

## 文字溢出和背景图片的处理 ##

*  单行文本技术实现“…"
    
        white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
 *  多行文本则截断处理。
 *  图片处理
    
    div\{  
    width:200px;  
    height:200px;  
    border: 1px solid black  
    background-image: url(fy.jpg)  
    background-size: 100px 100px;  
    background-repeat: no-repeat; //不重复出现  
    //以x轴重复、以y轴重复  
    repeat-x repeat-y  
    background-position: 100px 100px; //图片出现的位置  
    background-position: left center;  
    background-position: 50% 50%;
 *  在网站无法加载CSS和JS的时候，全站以HTML的方式仍然能够保持正常运行。
    
    DOCUMENT [明昊昊的小站][Link 1]
    
    //demo\_19.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    a\{  
    display: inline-block;  
    text-decoration: none;  
    color: \#424242;  
    width: 190px;  
    height: 90px;  
    border: 1px solid black;  
    background-image: url(https://minghaohao.oss-cn-beijing.aliyuncs.com/images/002.jpg);  
    background-size: 190px 90px;
    
        /*首行缩进*/
          text-indent: 200px; 
          /*强制不换行*/
          white-space: nowrap;
          /*溢出隐藏*/
          overflow: hidden;
    
    \}
    
    DOUCMENT [明昊昊的小站][Link 1]
    
    //demo\_20.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    a\{  
    display: inline-block;  
    text-decoration: none;  
    color: \#424242;  
    width: 190px;  
    height: 0px;  
    padding-top: 90px;  
    overflow: hidden;  
    border-top: 1px solid black;  
    background-image: url(https://minghaohao.oss-cn-beijing.aliyuncs.com/images/002.jpg);  
    background-size: 190px 90px;
    
    \}

## 知识点补充 ##

*  导航栏自适应技巧
    
    DOCUMENT
    
        </div>
          </div>
    
    //demo\_21.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    .wrapper\{  
    height: 30px;  
    background-color: \#123;  
    \}
    
    .content\{  
    margin: 0 auto;  
    width: 1200px;  
    height: 30px;  
    background-color: \#0f0;  
    \}
 *  设置：和文本类元素里面的文字，其底部的对齐方式。
    
    DOCUMENT 123hehe
    
    //demo\_22.css  
    \*\{  
    margin: 0;  
    padding: 0;  
    \}
    
    span\{  
    display: inline-block;  
    width: 100px;  
    height: 100px;  
    background-color: red;  
    font-size: 50px;  
    vertical-align: -5px;  
    /*vertical-align: middle;*/  
    \}
 *  W3C标准：

（1）定义：

万维网（1994）联盟标准，其为一系列标准的集合。英文名：world wide web consortium。

（2）网页：结构、样式、行为。结构、行为、样式相分离。

*  网页的设计思想：

（1）首先确定布局，将整个页面分成大的区域。

（2）确定大的区域的范围尺寸，利用div布局并且设置固定宽高和边框。

（3）细分每个盒子中的子布局，实现具体样式。

[Image 1]: 
[Link 1]: https://www.minghaohao.cn