CSS层叠样式表
css添加方式
三种添加样式的情况
- 元素内嵌式样式表
<h1 style="color:#ff0000;">你好世界</h1>- 文档内嵌式样式表
<style type="text/css">
h1 {
font-size:50px;
}
</style>- 外部样式表
<link rel="stylesheet" type="text/css" href="/css.css" >多重样式的优先级：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
css选择器
- 通用选择器（*）
选择所有元素
* {
}- 元素(类型)选择器
选择标签
p {
}- 类选择器
选择所有class1类的标签
.class1 {
}- 属性选择器
[herf] {
}- 伪类
p:hover {
}- ID 选择器
#id {
}- 内联样式
<h1 style="color:#ff0000;">你好世界</h1>优先级：
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
更多查看：css选择器
权重为：
- 内联样式表的权值最高 1000；
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
多类名的方式
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网页名称</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.bule {
background-color: blue;
}
</style>
</head>
<body>
<div class="box red">
nihao
</div>
<div class="box bule">
nihao
</div>
</body>
</html>css字体属性
- font-family: 设置字体系列
- font-size: 设置字体大小 （标题标签需单独修改）
- font-style：值（intalic 斜体 oblique 斜体） 设置字体样式
- font-weight： 设置字母粗细 400：normal 700加粗
- 复合属性：
body {
font: font-style font-weight font-size/line-height font-family;
}其中size和family属性必须要 其他可以省略
css文本属性
- color:#fff; 文本颜色
- text-align:三个值（left right center） 水平对齐方式
text-decoration: 文本装饰
- underline下划线
- overline上划线
- line-through删除线
- none 删除文本装饰
- text-indent： 首行缩进 （em单位 一个文字大小的单位）
- line-height: 行间距
css显示模式
块元素：
- 独占一行
- 高度、宽度、内外边距都可设置
- 宽度默认是容器的（父级宽度）的100%
- 是一个容器盒子，里面可以放行内或者块级元素
- 文字类的标签不能放块级元素
行内元素
- 相邻行内元素在一行上，一行可以显示多个
- 高，宽直接设置无效
- 默认宽度就是本身内容宽度
- 行内元素只能容纳文本或其他行内元素
- a标签可以放块级元素
- 行内元素的内边距对左、右、下起作用。
- 行内元素的外边距只对左、右起作用。
行内块元素
- 几个特殊标签：img、input、td
- 和相邻行内元素在一行上 会有空隙
- 默认宽度就是它本身的宽度
- 高度 行高 内外边距可以控制
元素显示模式的转换
- display：block；（inline，block，inline-block）
css背景
- background-color: transparent/color;透明或颜色
- background-image: url();背景图片
- background-repeat:repeat/no-repeat/repeat-x/repeat-y;背景平铺
- background-position: x y;背景位置
- background-attachment：fixed/scroll；背景固定/滚动
- background：背景颜色 背景图片 背景平铺 背景滚动 背景图片位置；复合写法
css三大特性
层叠性：
- 样式冲突：就近原则
- 样式不冲突，不会层叠
继承性：
- text- font- line- color可以被继承
- 行高不跟单位是当前元素文字大小的倍数
优先级：
- 选择器相同 执行层叠性
选择器不同，根据选择器权重执行
- 内联样式表的权值最高 1000；
- ID 选择器的权值为 100
- Class 类或伪类选择器的权值为 10
- HTML 标签选择器的权值为 1
- 继承的权值为0
- ！important:最重要的无穷大
- 权重叠加：复合选择器有权重的叠加
css盒子模型
边框（border）
- border-width:1px; 边框粗细
- border-color:#00ffff;边框颜色
- border-style:solid;边框样式
- border-radius：10px/10px 设置圆角 水平/垂直
- border：border： 边框粗细 样式 颜色 复合写法
- border-collapse: collapse; 合并相邻边框
- 边框会影响盒子实际大小
内边距（padding）
- padding:上下左右
- padding：上下 左右
- padding： 上 左右 下
- padding： 上 右 下 左
- 内边距会影响实际盒子的大小
padding不会撑高盒子的情况
- 如果盒子本身没有指定width、height属性则此时padding不会撑开盒子大小，否则会撑开
外边距（margin）
- margin:上下左右
- margin：上下 左右
- margin： 上 左右 下
- margin： 上 右 下 左
盒子水平居中
- 盒子必须指定宽度
- 左右外边距设置为auto
行内元素和行内块元素的水平居中
- 给父元素添加text-align：center；
相邻块元素垂直外边距的合并
- 当上下相邻的两个块元素相遇时如果上面元素有下外边距下面元素有上外边距 则它们的垂直间距为：取两个值中的较大者
- 尽量只给一个盒子margin值
嵌套块元素垂直外边距塌陷问题
- 对于两个嵌套关系的块元素，父元素有上外边距的同时子元素也有上外边距，此时父元素会塌陷较大的外边距值
解决方案
- 为父元素定义上边框
- 为父元素定义上内边距
- 为父元素添加overflow：hidden；
清除内外边距
* {
padding: 0;
margin: 0;
}注意行内元素尽量只设置左右内外边距
圆角、盒子阴影、文字阴影
- border-radius：10px/10px 设置圆角 水平/垂直
- box-shadow: 水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 颜色 inset（内部阴影）
- text-shadow：水平位移 竖直位移 模糊程度 颜色；
浮动
- 标准流：标签按规定好的默认方式进行排列
- 浮动：可以改变标签默认的排列方式
- 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
- float：（none left right）属性用于创建浮动框，将其移动到一边指导左或者右边缘及包含块或者另一个浮动框边缘
浮动的特性：
浮动的元素会脱离标准流
- 脱离标准流控制移动到指定位置
- 浮动盒子不在保持原来的位置
- 浮动的元素会一行显示并且顶部对齐
浮动的元素具有行内块元素的特性
- 如果块级元素没有设置宽度，默认和父级一样宽，但是加了浮动后 大小由内容决定
浮动两个注意点：
- 浮动通常搭配标准流的父级元素使用
- 一个元素浮动了，理论上其余的兄弟元素也要浮动
- 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
为什么清除浮动：
- 父元素不方便给高度的时候，如果父元素不给高度会造成高度塌陷
清除浮动的本质
- 清除浮动元素造成的影响
- 清除浮动后父级会根据子盒子的高度进行检查
- 策略是闭合浮动
清除浮动的方法
额外标签法
- 在末尾添加一个额外块级元素标签在css属性中设置 clear：left right both 左 右 全
父级添加overflow法
- 给父元素添加overflow属性
- 缺点：无法显示溢出部分
- 父级添加after伪元素法
.clearfix:after {
content: "";
display: block;
height :0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}- 父级添加双伪元素法
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}css属性书写顺序
- 布局定位属性：
- 自身属性；
- 文本属性
- 其他属性
定位
- 定位可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置并且可以压住其他盒子
定位的组成
- 定位：将盒子定在某一个位置，按照定位的方式移动盒子
- 定位=定位模式+边偏移
- 定位模式：position：（absolute relative static fixed）
- top botto left right 边偏移
- 静态定位：默认定位方式即标准流
相对定位：
- 相对于原有位置进行偏移
- 原来的标准流的位置继续占有 即不脱标
绝对定位：
- 相对于祖先元素进行定位的
- 如果没有父元素或者祖先元素没有定位 则相对于浏览器来进行定位
- 祖先元素有定位（相对 绝对 固定）则以最近一级有定位的祖先元素进行移动
- 绝对定位不再占有原来位置
固定定位（fiexd）；
- 固定于浏览器可视区域的位置
- 和父元素无关
- 不占有原来位置
粘性定位：（sticky）
- 以浏览器窗口为参照
- 占有原来位置
- 必须添加 top left right bottom其中的一个才有效
定位的叠放顺序（z-index：）
- 如果层级相同 根据书写顺序 后来居上
- 只有定位才有
定位的特殊性
- 行内元素添加了绝对或固定定位，可以直接设置高度或宽度
- 块元素添加了绝对或固定定位，高度和宽度由内容决定
- 浮动和绝对定位的元素不会触发外边距合并的问题
- 浮动不会压住标准流的文字，定位会
元素的显示与隐藏
display属性用于设置显示模式
- none：隐藏对象 不占原有位置
- block：显示对象
visibility 可见性
- inherit：默认继承
- visible：元素可视
- hidden：元素隐藏 占有原有位置
overflow：溢出
- 针对溢出的问题
- visible：默认显示显示
- hidden：隐藏溢出部分
- scroll：加滚动条
- auto：超出自动加滚动条 不超出不加
- 在定位下慎用
css高级
精灵图
- 用background-position：x y;
- 复合写法：background：url on-repeat x y；
字体图标
- iconfont
- 看上去是图标 本质是文字
优点：
- 轻量级
- 灵活性
- 兼容性
字体图标的下载
字体图标的引入
- 将字体文件夹放入根目录
- 通过引入css文件
<link rel="stylesheet" type="text/css" href="./fonts/iconfont.css">后使用 <span class="iconfont icon-xxxy"></span>使用
用户界面样式
- 更改用户鼠标样式cursor：属性
- 取消表单的轮廓线：outline：0（none）；
- 防止文本域拖拽：resize：none；
vertical-align属性的应用
- 常用于设置图片或者表单（行内块）和文字的垂直对齐
- baseline：默认 基于父元素的基线上
- top：把元素的顶端于行中最高元素的顶端对齐
- middle：把此元素放在父元素的中部
- bottom：把元素的顶端于行中最低元素的顶端对齐
- 图片底片默认空白缝隙用bottom对齐方式或者转为块级元素
溢出文字用省略号代替
单行文本：
- 强制一行显示文本：white-space: nowrap;
- 超出部分隐藏：overflow: hidden;
- 文字用省略号代替：text-overflow: ellipsis;
多行文本：
- 超出部分隐藏：overflow: hidden;
- 文字用省略号代替：text-overflow: ellipsis;
- 弹性伸缩盒子模型显示：display: -webkit-box;
- 限制再在一个块元素显示的文本行数：-webkit-line-clamp: 2;
- 设置或检索伸缩盒对象的子元素的排列方式；-webkit-box-orient:vertical;
css3
伪元素选择器：
- :before p:before 在每个
<p>元素内之前插入内容 - :after p:after 在每个
<p>元素内之后插入内容 - 创建的元素属于行内元素
- 必须有content属性：
- 权重为1
- :before p:before 在每个
css3 盒子模型
- box-sizing来指定盒模型，两个值：（默认）content-box,border-box，这样我们计算盒子大小方式发生了改变
- border-box：大小为width宽度
calc函数计算宽度
- width: calc(100%-80px);
css3 过度
transition: 要过度的属性 花费时间 运动曲线 何时开始；
- 属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间:单位是秒(必须写单位）比如0.5s
- 运动曲线:默认是ease（可以省略）linear默认 ease先快后慢 ease-in 加速 ease-out 减速 ease-in-out 扩大ease
- 何时开始∶单位是秒(必须写单位）可以设置延迟触发时间默认是Os（可以省略）
- 谁过度给谁加
css2D转换
移动：
- transform：translate(x,y);
- translateX(n)
- translateY(n)
- 不会影响其他元素的位置
- 其中百分比单位是相对于自身元素translate(50%,50%）
- 对行内标签没效果
旋转
- transform:rotate(度数);
- 单位：deg（度数）
- 正值顺时针 负值逆时针
- 默认中心是元素中心点
设置旋转中心点
- transform-origin:x y;
缩放
- transform:scale(x,y);
- x宽y高放大倍数
- 只写一个相当于x=y=n
复合写法
- transform:translate(x,y) scale(x,y)...;
- 书写顺序会影响效果
- 旋转会改变坐标轴方向
- 位移应放前面
css动画
- 先定义动画
- 在调用动画
@keyframes 动画名称 {
0%/(from) {
width:100px;
}
100%/(to) {
width:200px;
}
}调用动画
- animation-name: 动画名称；
- animation-duration: 持续时间（s）;
简写：
- animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反向 起始或结束状态；
css3D转换
3D移动：
- transform：translate(x,y,z);\
透视：
- perspective: xxpx; 写给父亲
旋转
- transform:rotateX(度数);
- transform:rotateY(度数);
- transform:rotateZ(度数);
- transform:rotate3D(x,y,z,deg);xyz矢量
- transform-sytle:flat(默认不开启3d) preserve-3d;控制子元素开启三维立体空间
浏览器私有前缀
- -moz-:firefox浏览器私有前缀
- -ms-：ie浏览器私有前缀
- -webkit-：代表 safari chrome浏览器私有前缀
- -0-：Opera浏览器私有前缀
移动布局
移动端兼容性
- 主流是webkit内核的浏览器
- 分辨率碎片化严重，尺寸较多
视口
- 视口（viewport）是浏览器显示页面内容区域 分为布局视口 视觉视口 理想视口
- meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-acsle=1.0,minimum-acsle=1.0">width：设置viewport宽度，可以设置device-width特殊值
initial-scale=1.0 初始缩放比 大于0 的数
maximum-acsle=1.0 最大缩放比 大于0 的数
minimum-acsle=1.0 最小缩放比 大于0 的数
user-scalable:on(yes) 用户是否可以缩放
物理像素&物理像素比
- 物理像素是屏幕最小颗粒比 是真实存在的
- 开发的时候的1px不一定等于物理的像素
- 一个px能显示的物理像素的个数 成为物理像素比
二倍图
- 移动端采用的是二倍图的方法来解决放大带来的图片模糊的问题
背景缩放background-size: 宽度 高度;
- cover 覆盖盒子全部 等比放大覆盖盒子
- contain: 将宽度或高度和父盒子一样
移动端主流方案
- 单独制作
- 响应式制作
移动端特殊样式
-webkit-tap-highlight-color: transparent;去除点击高亮 完成透明-webkit-appearance: none;在移动端默认外观加这个属性才能自定义样式img,a {-webkit-touch-callout: none; }禁用长按页面时的弹出菜单
流式布局
- 通过盒子的宽度设置百分比来根据屏幕的宽度进行缩放 不受固定像素限制 内容向两边填充
- 流式布局方式是移动web开发使用的比较常见的布局方式
min(max)-width:盒子最小（最大）宽度
- 写百分比时 是相对于父亲来说的 父亲必须有宽高
flex布局
- 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
采用Flex布局的元素，称为Flex容器(flex container)，简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目( flex item )，简称"项目"。
- 体验中div就是flex父容器。
- 体验中span就是子容器flex项目
- 子容器可以横向排列也可以纵向排列
总结flex布局原理∶
- 就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
常见父属性： 菜鸟教程flex布局
flex-direction:设置主轴的方向
属性：
- row 默认值从左到右
- row-reverse 从右到左
- column 从上到下
- column-reverse 从下到上
- 在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有∶行和列、x轴和y轴
- 默认主轴方向就是×轴方向，水平向右
- 默认侧轴方向就是y轴方向，水平向下
justify-content:设置主轴上的子元素排列方式
- 使用这个属性之前一定要确定好主轴是哪个
- flex-start 默认值从头部开始如果主轴是x轴，则从左到右
- flex-end 从尾部开始排列
- center 在主轴居中对齐（如果主轴是x轴则水平居中）
- space-around 平分剩余空间
- space-between 先两边贴边再平分剩余空间(重要）
flex-wrap:设置子元素是否换行
- nowrap（默认）：不换行
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
align-content:设置侧轴上的子元素的排列方式(多行）
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
align-items :设置侧轴上的子元素排列方式(单行）
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
- flex-flow :复合属性，相当于同时设置了flex-direction和flex-wrap
常见子属性：
- flex:属性 定义子项目分配剩余空间 表示占多少份数
.item {
flex: <number>;
}其他
order属性
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item { order: <integer>; }
- order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item { flex-grow: <number> /* default 0 */} - 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item { flex-shrink: <number>; /* default 1 */} - 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
- 负值对该属性无效。
- flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性
- flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性
- flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性
- align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
rem 媒体查询布局
- em是相对于父元素元素的字体大小
- rem是相对于HTML元素的字体大小
@media mediatype and|not|only (media feature) { CSS-Code; } mediatype ：媒体类型
- all 适用于所有设备。
- print 适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅分页媒体。）
- screen 主要用于屏幕。
- speech 主要用于语音合成器。
media feature ：媒体特性
- 详细查看
- 例子
/* 精确宽度 */
@media (width: 360px) {
div {
color: red;
}
}
/* 最小宽度 */
@media (min-width: 35rem) {
div {
background: yellow;
}
}
/* 最大宽度 */
@media (max-width: 50rem) {
div {
border: 2px solid blue;
}
}