前端学习笔记 | CSS

一、结构伪类选择器-基本使用

• E:first-child 第一个
• E:last-child 最后一个
• E:nth-child(n) 第n个
• E:nth-child(公式) 第“公式”个（如：2n偶数，2n-1奇数，5n 5的倍数，n+5 5个以后的标签，-n+5 第5个以前的标签）

li:first-child

二、伪元素选择器 

• E::before 在E元素最前面添加一个伪元素
• E::after 在E元素最前面添加一个伪元素

必须设置content:" "，默认行内元素，权重同标签选择器。

div::before{

        content:"老鼠"

}

三、盒子模型

• 内容区域-width&height
• 内边距-padding:数字+单位
  • padding后加四值：上右下左；三值：上，左=右，下；两值：上下，左右
  • 单独某方向padding-方位名词
• 边框线-border:边框线粗细 线条样式 颜色
  • 线条样式：solid实线 dashed虚线 dotted 点线
  • 单独某方向border-top（Emmet:bdt）、border-right、border-bottom、border-left

外边距-margin

• margin后加四值：上右下左；三值：上，左=右，下；两值：上下，左右
• 单独某方向margin-方位名词
• margin左右设置auto可实现水平居中，前提：盒子需要有宽度

四、盒子模型-尺寸计算

盒子尺寸=内容尺寸+border尺寸+内边距padding尺寸

• 1、手动做减法
• 2、盒子的内减模式
  • border-sizing:border-box； 

一般在清楚默认样式通配符*{}中设置内减模式。

五、清除默认样式

很多标签都有默认的内外边距，需要先清除（未来可以严格按照设计稿设置）

*{

        margin:0;

        padding:0;

        //border-sizing:border-box；

}

li{

        list-style:none;//去掉列表的项目符号

}

 六、盒子模型-元素溢出：内容超出盒子大小

• overflow：
  • hidden 溢出隐藏（最常用）
  • auto 溢出才显示滚动条
  • scroll 无论是否溢出都有滚动条

七、外边距问题-合并和塌陷

• 合并现象
  • 【表现】垂直兄弟元素，上下margin会合并——取两个margin中的较大值生效
  • 【解决方法】
    • 只设置一个盒子的外边距
• 塌陷问题
  • 【表现】父子级标签，子级添加上外边距会产生塌陷问题——子级和父级一起往下移动
  • 【解决方法】
    • 取消子级margin，父级设置padding（推荐，规避问题）
    • 父级设置overflow:hidden（原理：让浏览器找到正确的盒子边缘）
    • 父级设置border-top属性（原理：让浏览器找到正确的盒子边缘）

八、行内元素

• 行内元素垂直方向padding不生效，仅水平可以改变
• 垂直方向修改，加行高line-height

 九、盒子模型-圆角

• border-radius：数字+单位

        圆角从左上角顺时针赋值，没有取值与对角取值同

• 应用：正圆形
  • 属性值 宽高的一半（50%）
• 应用：胶囊形状
  • 属性值 盒子高度的一半

 十、盒子模型-阴影

• box-shadow:x偏移量 y偏移量 模糊半径 扩散半径 颜色 内外阴影

给元素设置阴影效果

十一、写盒子模型CSS的顺序

• 1、盒子模型属性
• 2、文字样式
• 3、圆角、阴影等修饰属性

十二、标准流（了解）

标签：默认显示模式叫标准流

非标准显示模式：Flex布局

• 浮动-float
  • left
  • right

将标签内顶对齐，具备行内块显示模式，浮动的盒子会脱标

• 清除浮动
  • 1、额外标签法：在父元素最后加一个块级元素类名为clearfix，并设置CSS属性clear:both（了解）
  • 2、单伪元素法：给父元素内容的最后添加一个块级元素，设置CSS属性clear:both(到时候直接复制粘贴)
  •  3、双伪元素法：（推荐）
  • 4、父元素添加CSS属性——overflow:hidden

//单伪元素法
<div class="top clearfix"></div>
.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

//双伪元素法
.clearfix::before //before解决外边距塌陷问题
.clearfix::after{
    content:"";
    display:table;
}
.clearfix::after{  //清除浮动
    content:"";
    clear:both;
}

 父级无高，子级浮动会使页面错乱

十三、Flex布局

1、什么Flex

弹性布局，适合结构化布局

flex不存在脱标现象

2、Flex组成

设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸

组成部分：

• 弹性容器：父级元素
• 弹性盒子：放在父级元素的盒子
• 主轴
• 侧轴

3、主轴与侧轴对齐方式

（1）主轴对齐方式

justify-content:

• flex-start 左侧对齐
• flex-end 右侧对齐
• center 居中
• space-between 弹性盒子之间的间距相等（左侧无间距）
• space-around 间距出现在盒子两侧-盒子之间的间距是两端间距的2倍
• space-evenly 间距出现在盒子两侧-盒子之间的间距都相等

（2）侧轴对齐方式

align-items：给容器设控制所有

• scretch 无高度尺寸默认垂直拉伸，有高度则无效
• center 居中
• （了解）flex-first 上侧对齐
• （了解）flex-end 下侧对齐           

align-self：控制某个盒子

• 搭配nth-child(n)伪元素

（3）修改主轴方向

主轴默认水平方向

flex-direction：

• row 主轴为垂直方向（默认）
• column 主轴变垂直方向

（4）弹性伸缩比

flex：

• 整数数字（占用父级剩余尺寸的份数）

（5）弹性盒子换行

flex-wrap：

• wrap  父级宽度不够换行显示
• nowrap 不换行（默认）

（6）行对齐方式

跟主轴对齐方式同，对单行的弹性盒子（无flex-wrap:wrap）不生效

align-content:

• flex-start 左侧对齐
• flex-end 右侧对齐
• center 居中
• space-between 弹性盒子之间的间距相等（左侧无间距）
• space-around 间距出现在盒子两侧-盒子之间的间距是两端间距的2倍
• space-evenly 间距出现在盒子两侧-盒子之间的间距都相等

技巧：

1、确定一个方案，首先要从两方面分析：标签、ul样式

2、自动创建一个ul内容为1、2、3、4

ul>li{$}*4

十四、学成在线项目

1、准备工作

新建文件夹study，包含文件：

• images文件夹：存放固定使用的图片
• uploads文件夹：非固定使用的图片，如商品
• css文件夹：
  • basic.css
  • index.css
• index.html：首页HTML文件

2、版心效果

设置一个类选择器，后面需要版心居中则使用该标签

.wrapper{
    margin:0 auto;
    width:1200px;
}

3、网页制作思路

（1）布局思路：先整体再局部，从外到内，从上到下，从左到右。

（2）CSS实现思路

        a.画盒子，设置宽高背景色

        b.调整盒子位置，flex布局、内外边距

        c.控制图片、文字内容样式

4、logo制作技巧

h1>a>网站名词（搜索关键字）

.logo a {
    display: block;
    width: 195px;
    height: 41px;
    background-image: url(../images/logo.png);
    font-size: 0;//使得a中内容不显示并达到搜索引擎优化效果
}