前端入门之CSS
Web标准的构成
结构：对网页元素进行整理和分类。HTML
表现：设置网页元素的版式、颜色、大小等外观样式。CSS
行为：网页模型的定义及交互的编写。JavaScript
CSS学习
1.CSS介绍
两部分：选择器以及一条或多条声明
三种链接方式：
（1） 内联式
css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：<p style="color:red">这里文字是红色。</p>（2） 嵌入式
可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个标签中的文字设置为红色：<style type="text/css"> span{ color:red; } </style>嵌入式css样式必须写在
<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。（3）外部式
把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：<link href="base.css" rel="stylesheet" type="text/css" />注意：
（1）css样式文件名称以有意义的英文字母命名，如 main.css。
（2） rel=“stylesheet” type=“text/css” 是固定写法不可修改。
（3） 标签位置一般写在标签之内。
优先级：内联式 > 嵌入式 > 外部式
2.CSS选择器
- 标签选择器
h1{
font-weight:normal;
color:red;
}
- 类选择器
<!--1.使用合适的标签把要修饰的内容标记起来，如下：-->
<span>胆小如鼠</span>
<!--2.使用class="类选择器名称"为标签设置一个类，如下：-->
<span class="stress">胆小如鼠</span>
<!--3.设置类选器css样式，如下：-->
.stress{color:red;}/*类前面要加入一个英文圆点*/
- ID选择器
（1） 使用ID选择器，必须给标签添加上id属性，为标签设置id=“ID名称”，而不是class=“类名称”。
（2） ID选择符的前面是井号(#)号，而不是英文圆点（.）。
（3） id属性的值既为当前标签的id，尽量见名思意，语义化。
- 类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
（1） ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
（2） 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
子选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素
.food>li{ border:1px solid red; }这行代码会使class名为food下的子元素li加入红色实线边框。
- 后代选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如：
.first span{color:red;}总结：> 作用于元素的第一代后代，空格作用于元素的所有后代。
- 后代选择器
通用选择器
它使用一个（*）号指定，它的作用是匹配html中所有标签元素* {color:red;}伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}分组选择器
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,span{color:red;}
3.CSS的继承，优先级和重要性
（1） 选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
（2） 权值计算
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
（3） 选择器最高层级!important
p{color:red!important;}
4.CSS字体样式
设置字体：font-family:“宋体”;
设置字体大小：font-size:12px；
设置字体粗细：font-weight:bold;
设置字体样式：font-style:normal;
- 正常为normal，也是默认值
- italic为设置字体为倾斜，用于字体本身就有倾斜的样式
- oblique为设置倾斜的字体，强制将字体倾斜
设置字体颜色：color:;
- 英文命令颜色：color:red;
- RGB颜色：color:rgb(20%,33%,25%);
- 十六进制颜色：color:#00ffff;
简写方式：
body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
/* 简写后：*/
body{
font:italic bold 12px/1.5em "宋体",sans-serif;
}
5.CSS文本样式
文本修饰：text-decoration
- 默认值为none，定义标准的文本
- underline为定义文本下的一条线
- overline为定义文本上的一条线
- line-through为定义穿过文本下的一条线，一般用于商品折扣价
首行缩进：text-indent:2em;
设置行间间距：line-height:1.5em;
增加或减少字符间的空白：letter/word-spacing
- 中文字间隔、字母间隔设置：letter-spacing:50px;
- 单词间距设置： word-spacing:50px;
文本对齐方式：text-align:center/right/left;
长度值：px(像素)、em、%百分比
px
em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}百分比
p{font-size:12px;line-height:130%}设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
6.CSS盒模型
1.元素分类
（1）块状元素
每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
（2）内联元素
- 和其他元素都在一行上；
- 元素的高度、宽度及顶部和底部边距不可设置；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
（3）内联块状元素：
和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。
常用的内联块状元素有：
<img>、<input>
2.display实现三种元素的变化
（1）设置
display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。a{display:block;}
（2）块状元素也可以通过代码
display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。div{ display:inline; } ...... <div>我要变成内联元素</div>
（3）代码
display:inline-block就是将元素设置为内联块状元素。
（4）none设置此元素不会被显示，当想要元素隐藏的时候可以使用此值。display:none;
3.盒子结构
（1）内容范围：width,height
（2） 元素实际宽度（盒子的宽度）=左边界(margin-left)+左边框(border-left)+左填充(padding-left)+内容宽度(width)+右填充+右边框+右边界。
（3）高度同理。
4.盒子模型相关设置
背景色：background-color:颜色值;
边框border:
border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
border-color（边框颜色）中的颜色可设置为十六进制颜色
border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
单独设置一条边框：
div{border-bottom:1px solid red;} /* border-top:1px solid red; border-right:1px solid red; border-left:1px solid red; */圆角效果border-radius：
元素边框的圆角效果可以使用border-radius属性来设置。圆角可分为左上、右上、右下、左下。如下代码：
div{border-radius: 20px 10px 15px 30px;}一个正方形，当设置圆角效果值为元素宽度一半时，显示效果为圆形。例如：
div { width: 200px; height: 200px; border: 5px solid red; border-radius: 100px; }
内边距（填充）padding–在边框里
- 元素内容与边框之间是可以设置距离的，称之为“内边距（填充）”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
外边距（边界）margin–在边框外
- 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
7.CSS布局模型
元素有三种布局模型：
1、流动模型（Flow）
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2、浮动模型 (Float)
块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？设置元素浮动就可以实现这一愿望。
/*两个元素左浮动*/
div{ float:left;}
<div id="div1"></div>
<div id="div2"></div>
/*两个元素左浮动*/
div{float:right;}
/*两个元素一左一右*/
#div1{float:left;}
#div2{float:right;}
3、层模型（Layer）
三种形式：
（1）绝对定位(position: absolute)
- 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
（2）相对定位(position: relative)
- 如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于**以前的位置移动，**移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
- 偏移前的位置还保留不动，覆盖不了前面的没有偏移前的位置
（3） 固定定位(position: fixed)
- fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
区分：
absolute:相当于一个块被扔到另一个地方去了。
relative:可以当作一个立方体的房子发生了歪斜，从正上方看，只是房顶偏移了，但下面的底落还在那里，底下的格局没有发生改变一个不保留地基，一个保留地基。
Relative与Absolute组合使用：
（1）参照定位的元素必须是相对定位元素的前辈元素
（2）参照定位的元素必须加入position:relative;
（3）定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
<div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>#box1{ width:200px; height:200px; position:relative; } #box2{ position:absolute; top:20px; left:30px; }
8.flex弹性盒模型
（1）display: flex属性可以把块级元素在一排显示。flex需要添加在父元素上，改变子元素的排列顺序。默认为从左往右依次排列,且和父元素左边没有间隙。
（2）横轴排列方式：justify-content
flex-start：交叉轴的起点对齐flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
（3）纵轴排列方式：align-items
flex-start：默认值，左对齐flex-end：交叉轴的终点对齐center： 交叉轴的中点对齐baseline：项目的第一行文字的基线对齐。stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
（4）给子元素设置flex占比
给子元素设置flex属性,可以设置子元素相对于父元素的占比。
flex属性的值只能是正整数,表示占比多少。
给子元素设置了flex之后,其宽度属性会失效。
9.总结
1.水平居中设置-行内元素：text-align:center
2.水平居中设置-定宽块状元素(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
3.面试常考题之已知宽高实现盒子水平垂直居中
（1）利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
（2）子元素设置上和左偏移的值都为50%，是元素的左上角在父元素中心点的位置。
（3）然后再用margin给上和左都给负的自身宽高的一半,就能达到垂直水平居中的效果。(即子元素中心点到父元素的中心点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>已知宽高实现盒子水平垂直居中</title>
<style type="text/css">
.box {
border: 1px solid #00ee00;
height: 300px;
position:relative;
}
.box1 {
width: 200px;
height: 200px;
border: 1px solid red;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
4.面试常考题之宽高不定实现盒子水平垂直居中
（1）利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
（2）子元素设置上和左偏移的值都为50%。
（3）然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宽高不定实现盒子水平垂直居中</title>
<style type="text/css">
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网慕课网
</div>
</div>
</body>
</html>