阅读量:0
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选择器优先级
- 选择器写的越准确（越长）优先级越高
- id选择器 > class选择器 > 元素选择器
- 同级别同长度下，css按照顺序执行，后写的覆盖前面的
- 自行测试
弹性盒子模型
<!-- 横向布局 弹性盒子模型 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 以视口的高度，宽度最大的为参考维度
