CSS基础

CSS的使用

        <!-- 行内样式 在元素内部 style=“”-->
        
        <!-- 内部样式在head里面 -->
        <style>
        .box {
           display: block; 
        }
    	</style>
    	
        <!-- 外部样式建立外部文件
            <link rel="stylesheet" herf="xxx.css">
        -->
        

三种样式优先级 ：行内 > 内部 = 外部

盒子模型

• 块级元素 display:block 举例 div ul li h p
  特征：独占一行，对宽度、高度、对齐方式等支持
• 内联级元素display:inline 举例 a span
  特征：不独占一行，对宽度、高度、对齐方式等不支持
• 内联块级元素 display:inline-block 举例 img input table
  特征：不独占一行，对宽度、高度、对齐方式等支持
• 弹性盒子模型
  特征：弹性盒子内子元素默认横着布局，子元素高度一致 display:flex

盒子内部结构：由内到外分别是内容、填充、边框、外边距

• 内容区：width、height默认是对内容区起作用
• 填充区：padding 可以放四个值，以上为开始顺时针旋转
• 边框区：border 复合属性 border-style边框的样式，border-width边框的宽度，border-color边框的颜色，solid 实线
• 外边距区：margin : auto 元素居中，横向

配套属性：
box-sizing:content-box（内容区） border-box（盒子大小的计算：内容 填充 边框）

额外补充：
浏览器中对中西文字换行规则：

• 中文可以在任意处换行

• 英文默认空格和-处换行

• 如果想改变换行规则 使用 word-break:break-all 默认keep-all（保持单词完整性）

CSS选择器

基本元素（8种），伪元素选择器，伪类选择器三大类

基本选择器

1、元素选择器 E{} 例如：body{}，*元素选择器中的特例 {margin:0;padding:0}
2、属性选择器 E[atter]{} E是元素名称，atter是属性（可以细化atter的值 ^= 前缀，$= 后缀，= 包含，= 严格等于）例如id，选中带有atter的E标签
3、id选择器 #id值{}
4、class选择器 .class值{}
5、包含选择器 selector1 selector2 …{}
6、子元素选择器 selector1>selector2>…{}
7、兄弟元素选择器 selector1~selector2{} 从selector1向下查找selector2的兄弟元素（具有共同的父级元素）
8、选择器的组合 selector1,selector2,…{}

伪元素选择器

1.首字符伪元素选择器 ::first-letter{} 使用前提：依附元素是块级元素，如果不是可以变成块display:block
2.首行伪元素选择器 ::first-line{} 使用前提：依附元素是块级元素，如果不是可以变成块display:block
3.自定义前置伪元素选择器 ::before{} 使用前提：不管需不需要自定义内容，必须要使用content属性，没有内容为空
4.自定义后置伪元素选择器 ::after{} 使用前提：不管需不需要自定义内容，必须要使用content属性，没有内容为空

伪类选择器

1.结构性伪类选择器

:nth-chlid(){} 着重点是计数 ()中可以放数字 从1开始；odd(奇数) even(偶数)；表达式 2n+1 （n从0开始，必须是+号）
:nth-child(1) 等价于 :nth-first() 找第一个
:nth-last-child(1) 【倒着数第一个】 等价于 :nth-last() 找最后一个

:nth-of-type() 着重点是类型，()中可以放数字 从1开始；odd(奇数) even(偶数)；表达式 2n+1 （n从0开始，必须是+号）
:nth-of-type(1) 等价于 :first-of-type() 找第一个
:nth-last-of-type 【倒着数第一个】 等价于 :last-of-type 找最后一个

2.UI状态伪类选择器

:hover 悬停状态
:focus 焦点状态
:checked 选中状态
:disabled 不可用状态

3.其他伪类选择器

:not() 代表过滤掉某个或者某些元素 li:not(.java) --不要 , li.java --要
li:not(.java):not(.php)连续使用

CSS选择器优先级

1. 选择器写的越准确（越长）优先级越高
2. id选择器 > class选择器 > 元素选择器
3. 同级别同长度下，css按照顺序执行，后写的覆盖前面的
4. 自行测试

弹性盒子模型

<!-- 
横向布局

弹性盒子模型 display:flex 
配套属性：
    flex-direction 作用对象：弹性盒子 设置弹性盒子内子元素的排列方向
    	其值有row（横着默认），column（竖着），column-reverse（反向竖着）row-reverse（反向横着）                            
    flex-wrap 作用对象：弹性盒子 设置弹性盒子内子元素是否换行，其值有nowrap(不换行默认)，wrap（换行）
    order 作用对象：弹性盒子内子元素 设置该子元素的排列位置 值越小越靠前
    flex 作用对象：弹性盒子内子元素 复合属性 flex-grow(拉伸因子) flex-shrink(收缩因子) flex-basis(基准宽度)
    justify-content：作用对象：弹性盒子 设置弹性盒子内子元素在排列方向上的分布方式
            flex-start 弹性的开端
            flex-end 弹性的尾端
            center 居中
            space-between 空白在中间
            space-around 空白在周围
    align-items 作用对象：弹性盒子 设置弹性盒子内子元素在排列方向上垂直方向的对齐方式
            flex-start 弹性的开端
            flex-end 弹性的尾端
            center 居中        
            baseline 弹性的开端，以元素的底部为基准对齐

    align-content 作用对象：弹性盒子 设置弹性盒子内行的分布方式
            flex-start 弹性的开端
            flex-end 弹性的尾端
            center 居中
            space-between 空白在中间
            space-around 空白在周围

object-fit:cover 图片适应

-->

定位

position
其值有：static（默认） relative（相对定位） absolute（绝对定位） fixed（固定定位）
配套属性： left right top bottom z-index（层次，值越大越靠人眼）, 前提position的值必须是relative（相对定位） absolute（绝对定位） fixed（固定定位）其中一个

场景：

• 纯使用relative 保留元素的物理空间，定位的参考位置是元素本身，随着浏览器滚动而滚动
• 纯使用absolute 不保留元素的物理空间，定位的参考位置是浏览器，随着浏览器滚动而滚动
• 纯使用fixed 不保留元素的物理空间，定位的参考位置是浏览器，不随着浏览器滚动而滚动
• 结合使用relative和absolute relative作用祖先元素，absolute作用该元素，定位参考是祖先元素，随着浏览器滚动而滚动

CSS长度单位

1.绝对长度单位

px（像素）、in（英寸）、cm（厘米）、mm（毫米）等

2.相对长度单位

• %（以父级元素的尺寸为参考维度）
• em 以父级元素字体大小为参考维度
• rem 以html元素字体大小为参考维度
• vh 以视口的高为参考维度
• vw 以视口的宽为参考维度
• vmin 以视口的高度，宽度最小的为参考维度
• vmax 以视口的高度，宽度最大的为参考维度