css学习笔记
css总结
css三种引入方式
- 行内样式
- 内嵌式
- 外引式
css选择器
- 并列选择器 ，
- 后代选择器 空格
- 子代选择器 >
- 兄弟选择器 (后面的兄弟元素)~
- 后一个元素 （相邻）+
匹配规则
- 选择器从左向右匹配
css样式冲突
优先级 ：!important>行内样式>id >class（伪类 伪元素）>tag >*>继承
优先级 根据选择器的权重大小来判
选择器组合使用时 权重值相加
权重相加 不会超过他的数量级
权重相同 就近原
css三大特性
层叠性：给一个标签设置的样式发生冲突的时候几样是的覆盖
浏览器的渲染机制时从上到下的 当有冲突的时候就采用最后的那个样式优先级: 根据全冲值 如果权重相同就近原则
继承性: 一般时字体颜色 display float 等 不会继承
盒模型
盒模型 = 内容区 +内边距 +边框 +外边距
盒子的宽度 = 内容区宽度 +内容区宽度 +边框宽度怪异盒模型 =内容区+padding+border+margin
盒子宽度=内容区+padding+border区别 ：标准盒模型 设置的 width=content 的宽度
怪异盒模型 width =content+padding+border
box-sizing:border-box
padding 内边距
- 设置一个值是 上下左右四个值 ;
- 设置两个值是 上下和左右;
- 设置三个值是 上 ,左右, 下;
border 边框线
- 参数一:边框宽度
参数二:边框样式
参数三:边框颜色 - border:1px solid #000;
分别设置
border-width:1px;
border-style:solid;
border-color:red; - 边框切角
单位像素 或百分比
border-radius:20px
外边距
- margin-top:50px; (简写)上右下左
- 两个值时 ：上下 左右
三个值： 上 左右 下
四个值: 上 右 下 左
外边距穿透
1. 外边距穿透:
1.上下方向
2.父元素没有边框
3. 如何解决:
1 给父级加边框
2 使用内边距不用外边距
边框
- transparent:透明色
- 给上边框设置颜色
border-top-color:tellow; - 给四条边框分别设置颜色
border-top:200px solid #000 ;
border-right:100px solid green;
border-left: 100px solid blue;
border-bottom:100px solid red;
伪类
- :hover 悬浮状态
:active 激活状态
:link 未访问
:visited 访问过后
input:focus 获取焦点
伪元素
- 伪元素:元素的特殊位置 使用双冒号
伪元素必须要设置content 不然不会出现 - ::after 最后位置
::benfore 开始位置
::first-letter 首字母
::first-line 首行
背景
- 背景颜色:background-color:red;
- 背景图片: background-imge-url(./icons);
- 背景尺寸:background-size:100px 100px; 图片大显示左上角 图片小会平铺
- 背景是否重复:background-repeat:no-repeat;
- 背景位置:background-position:单位px 百分比 方位
雪碧(精灵图)
- 雪碧图是一种css合并技术 该方法将小图标合并在一张图片上,
- 可以减少请求服务器的次数
块的居中(安全区域)
- 定宽居中 width margin:o auto;
内敛元素(行元素 和行内块)
- 在其父元素 设置 text-align:center
元素内容溢出
overflow:hidden visible scroll auto
单行文字
- overflow :hidden;
- text-overflow:ellipsis;
- whit-space:nowrap;
元素隐藏方式
display:none;
visibility:hidden;
opactity:0-1;
复习
实体(转义字符)&
&get; > &lit: < "" &emp; " "长表格
三部分: thead tbody tfoot字体图标 以 font-awesome
- 引入
- 找到对应的class名 并添加 fa
自定义字体
- @font-face{
font_family:“自定义名字”;
src:url(“资源路径”)
}
浮动
- 浮动分为左浮动 和右浮动
- 为何使用浮动 将两个或多个块元素在同一行显示
浮动对自身的影响
- 会脱离文档流
- 会覆盖其他的文档流中元素 但不会覆盖文字
- 行元素和行内块元素 会变成块元素(默认高度撑开)
浮动对兄弟元素之间的影响
- 浮动元素上方有块元素 浮动元素会在块元素的下方
- 浮动元素在上方 限免的块元素 可以通过清除浮动 保持位置 clear:both;
浮动对父元素的影响
- 会引起高度塌陷
如何解决 - 给父元素设置高度
- 添加overflow:hidden;
- 给父元素也设置浮动
- 添加一个空的块级元素 并清除浮动
- 统一写法 在开启浮动的父级元素添加
clearfix .clearfix::after{
content:“”;
display:black;
clear:both;
}
定位
<!-- position:static 默认定位 ： relative 相对定位 ： absolute 绝对定位 ：fixed 固定定位 ： sticky 粘性定位 -->相对定位:
相对定位 1. 参考点： 文档流中自身的位置 2. 默认位置在原来文档流中 可以是 left top bottom right 3. 没有脱离文档流 4 .层级会提高 可以使用z-iindex 来调整层级 5. 使用场景： 一般用于对元素位置微调绝对定位
1 .参考点： 对于最近的以定位祖先元素 ，如果元素没有已定位的祖先元素 ，那么它的位置相对于最初的包含块
2. 默认位置在原来文档流中 可以是 left top bottom right
3. 脱离文档流
4 .层级会提高 可以使用z-iindex 来调整层级
5.行元素和行内块元素会变成块元素 默认宽高内容撑开
5. 使用场景： 、一般是 子绝父相
固定定位
1 .参考点： 浏览器窗口的可是区域 2. 默认位置在原来文档流中 可以是 left top bottom right 3. 脱离文档流 4 .层级会提高 可以使用z-iindex 来调整层级 5. 行元素和行内块元素 会变成块元素 默认宽高 内容撑开 6. 使用场景： 想让元素相对于窗口进行定位（侧边栏 小广告等）粘性定位
- 粘性定位:相对定位和固定定位的组合