前言
1.分析布局 和组成元素
2.整体样式
3.分模块样式
1.@import
全局定义路径后,@import引入样式文件
@import '~styles/varible.styl'
~ 必须要有
2.div中的搜索框自适应
div中的搜索框自适应
重点:规定父元素的宽度,input 100%,然后display:inline-block
3.知识集合
1.css的伪元素实际运用
4.浮动元素垂直居中
5.flex布局的兼容性问题【没有完全理解和遇到】
6.css3新增伪类
7.盒模型
8.百分比
字体百分比,如果想比12px小怎么办
为什么不建议将 font-size 设置为 12px 以下?如果一定要设置为 12px 以下要怎么做?
css百分号问题
9.link 和 @import 的区别
link 是 HTML 标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等;@import 是 CSS 提供的语法,只有导入样式表的作用。
加载页面时,link 标签引入的 CSS 被同时加载;@import 引入的 CSS 将在页面加载完毕后被加载。
@import 是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link 标签作为 HTML 元素,不存在兼容性问题。
可以通过 JS 操作 DOM ,插入 link 标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import 的方式插入样式。
link 引入的样式权重大于@import 引入的样式。
但是在组件化开发的时候,就只能用@import来引入
10.css优化和提高性能
11.vue-loader源码
12.css的解析规则
LVHA
css中可以继承的属性
line-height的理解
1.可以用来设置单行文本的垂直居中
2.用图解真正理解line-hight的概念
问题:1.如果是多行文本的垂直居中,就考虑用元素的垂直居中,
2.那么能不能使用到其他元素中呢
那么这个元素的属性必须是inline或者inline-block 才有效。
3.如果没有heigjt,行高会用line-heihgt给撑起来。
4.如果牵扯到单位的计算,那么都以自身元素的fontsize为基准
如果想居中的文字在linline里面,那么就使用
5.line-height 和 height 都能撑开一个高度,height 会触发 haslayout,而 line-height 不会
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 60px;
width: 400px;
border: 1px solid red;
font-size: 14px;
line-height: 60px;
}
.font{
/* height: 35px; */
border: 1px dotted black;
line-height: 2;
/* display: inline; */
background-color: #ccc;
}
</style>
</head>
<body>
<!-- <a href="logo.jpg" download="logo.jpg">下载图片</a> -->
<div class="box">
<span class="font">
天上的星星去哪儿了abcdefjhi
</span>
</div>
</body>
</html>
css的基线和行高
css的基线和行高
1、一般默认,文字和字母都是以基线为低的。
2、包括1个内容区和两个空白边框
3、区别于行距
4、元素默认的对齐方式是沿着基线对齐
class和id的区别
1.css渲染的权重值不同,id的优先级高于class
2.id唯一,class可以重复。
3.id有锚点功能
4.id给js用,class给css用
相同点:1.他们都是dom元素的属性值。
2.
如果id重复呢呢?
也没有影响,因为浏览器容错效果好,但是
BFC
点击学习
1.如何解决外边距重叠的问题
(1)使用BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
border: 1px solid red;
padding: 10px;
width: 500px;
// overflow: hidden;
display: inline-block; //也可以实现
}
.wraper{
overflow: hidden;
}
p{
width: 100px;
height: 100px;
border: 1px solid blue;
}
p:nth-child(1){
margin-bottom: 10px;
}
p:nth-child(2){
margin-top: 20px;
}
</style>
<body>
<div class="container">
<div class="wraper">
<p>
我的
</p>
</div>
<p>
你的
</p>
</div>
</body>
</html>
2.padding-box
position的定位原点
3.z-index的堆叠上下文
(1)z-index的生效情况
总结: 只有position的值为relative/absolute/fixed中的一个,Z-index才会生效。
(2)父子元素的z-index有效果吗
没有效果,子元素永远在父元素上面
(3)当z-index是正数时,它们的子元素【不管是不是auto和z-index】与外面的元素比较时,都用父元素的比较,和兄弟用自身的比较。
(4)当z-index为auto时,如果它和它的兄弟进行比较,用父元素的z-index
(5)当z-index为auto时,如果它的儿子和外界的元素进行比较时,儿子单独创建了一个堆叠上下文。
(6)z-index: auto 不会创建新的堆叠上下文,
4.css堆叠上下文
css堆叠上下文
(1)border>background
(2)正z-index > 浮动元素 > 内联元素 > 浮动元素 > 块级元素 > border > background > 负z-index
冒泡和捕获只会在父子元素中有,在堆叠上下文中没有
5.base64有那么多的缺点,为什么还要使用base64.
6.不同移动端的兼容属性
7.0.5px的像素
浏览器不同的本质
1.浏览器内核不同
2.设备像素不同
多行文本溢出的效果
事件的冒泡和传递会受z-index影响吗
冒泡和捕获只会在父子元素中有,在堆叠上下文中没有
如果不存在父子关系,而是堆叠,那么点击高层次的元素,覆盖在地下的低层次元素事件不会被触发
常见的元素隐藏方式
1.是否占据空间位置
是:visibility:hidden , opacity:0; position:absolute【脱离文档流】,transform:scale(0,0)
否:display:none【渲染树没有渲染】
2.是否会触发绑定事件
position:absolute:和堆叠次序有关
是:visibility:hidden, opacity:0; transform:scale(0,0)
否:display:none
3.其他
z-index
12.CSS3 @font-face
先定义-》后使用
定义:指出名称和来源
:1.定义的方式类似于对象
2.定义的时候,要区分设备和浏览器
使用;font-family:名称
13.满屏品字样式
14.css画三角形
纯css画各种三角形
三角形绘制原理
css画扇形
1.主要是border
2.利用width和color,两个属性,可以绘制各种不同形状的三角形
3.带边框的三角形或者箭头:利用绝对定位和伪元素。两个三角形重叠,然后是父子元素关系,决定定位的位置是padding
4.绝对定位的定位点是padding,所以yellow的定位参考点是蓝色三角形的顶点
15.读屏器
16.css hack 原理及常用 hack
1.因为不同浏览器对CSS的支持和解析结果不一样,所以编写针对不同浏览器的css样式
2.hack本质是一个过程,就是针对不同的浏览器写css的过程。
3.
17.浏览器前缀
1.-ms-:兼容ie浏览器
2.-moz-:兼容Firefox
3.-o-:兼容opera
4.-webkiit 兼容Chrome和Safari
反过来记忆,思考什么时候有用。
18.ie浏览器兼容性问题解决
ie浏览器兼容性问题解决
解决方案2
IE6
属性级:_color:red
*color:red
19.display position float 之间的关系
display position float 之间的关系
学习链接2
20document.defaultView
21 圣杯布局
22 双飞翼布局
两边定宽、中间自适应、中间栏放在文档流前面优先渲染
calc()
使用calc()时候注意box-sizing:border-box注意