前端三剑客之CSS

CSS概念：CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表。
简 称样式表 CSS文件后缀名为 .css
CSS用于HTML文档中元素样式的定义。
为什么需要CSS
使用css的唯一目的就是让网页具有美观一致的页面。
语法：
CSS的引入方式：
内联样式（行内样式）要使用内联样式，你需要在相关的标签内使用样式（style）属性。 Style 属性可以包含任何 CSS 属性。
内部样式当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使 用。
外部样式（推荐）当样式需要应用于很多页面时，外部样式表将是理想的选择。在使 用外部样式表的情况下，你可以通过改变一个文件来改变整个站点 的外观。每个页面使用标签链接到样式表。标签在 （文档的）头部 。
全局选择器可以与任何元素匹配，优先级最低，一般做样式初始化 元素选择器HTML文档中的元素， p、b、div、a、img、body 等。 标签选择器，选择的是页面上所有这种类型的标签，所以经常描述 “共性”，无法描述某一个元素的“个性” 再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变 为红色字体，那么我可以用 标签把“前端”这两个字围起来，然 后给 标签加一个标签选择器
*{ margin: 0; padding: 0; }
类选择器规定用圆点.来定义，针对你想要的所有标签使用 优点 灵活 class属性的特点 1 类选择器可以被多种标签使用 2 类名不能以数字开头 3 同一个标签可以使用多个类选择器。用空格隔开 学完了前端，继续学Javaspan{ color: red; } class=“oneclass”>你好/定义类选择器/ .oneclass{ width:800px; }。
ID选择器针对某一个特定的标签来使用，只能使用一次。 css 中的 ID选择器 以#来定义。
合并选择器语法： 选择器1,选择器2,…{ } 作用：提取共同的样式，减少重复代码。
选择器的优先级CSS中,权重用数字衡量 元素选择器的权重为: 1 class选择器的权重为: 10。id选择器的权重为: 100 内联样式的权重为: 1000 优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器。
关系选择器分类 ：1 后代选择器 2 子代选择器 3 相邻兄弟选择器 4 通用兄弟选择器。
后代选择器定义 选择所有被E元素包含的F元素，中间用空格隔开。
语法：

F{}
<ul>
     <li>宝马</li>
    <li>奔驰</li>
</ul>
<ol>
    <li>奥迪</li>
</ol>

ul li{
color:green;
}

子代选择器：定义选择所有作为E元素的直接子元素F，对更深一层的元素不起作用， 用>表示
语法：

E>F{}
<div>
     <a href="#">子元素1</a>
    <p> <a href="#">孙元素</a> </p>
  <a href="#">子元素2</a>
</div>
div>a{color:red}

相邻兄弟选择器定义
选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择.

E+F{}
<h1>h1元素</h1> <p>第一个元素</p> <p>第二个元素</p>
h1+p{ color:red;}

CSS 盒子模型(Box Model)

概念
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：
外边距（margin），边框（border），内边距（padding），和实际内容（content）
弹性盒模型（flex box）

定义
弹性盒子是 CSS3 的一种新的布局模式
CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
CSS3弹性盒内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成弹性容器通过设置display属性的值为flex将其定义为弹性容器
弹性容器内包含了一个或多个弹性子元素

<div class="flex-container">    
<div class="flex-item">flex item 1</div>  
<div class="flex-item">flex item 2</div>   
<div class="flex-item">flex item 3</div> </div>
<style>   
.flex-container {  
display: flex;    
width: 400px;  
height: 250px;  
background-color: lightgrey;
}    
.flex-item {      
background-color: cornflowerblue; 
width: 100px;    
height: 100px; 
margin: 10px; 
}</style>

justify-content 属性定义
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
语法
justify-content: flex-start | flex-end | center
justify-content 属性定义
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
语法
justify-content: flex-start | flex-end | center

align-items 属性定义
align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
语法align-items: flex-start | flex-end | center