BASE
就粗糙记录一下,不熟悉的,需要注意的,东西。
css 的学习 还是 需要懂一些很经典的布局~~~
虽然有很多框架帮你做了,你要微调呢,还是尽量更能驾驭一些吧。
- 浮动 因为 默认的div 出来是 竖着 码 ,float : left 就从左开始横着码 ,float : right 也一样。
- 外边距 margin 就是元素与元素之间的距离。
margin : 上 右 下 左
margin :上 左右 下
margin :上下 左右
- 内边距 padding 还听过一个说法啊 ,也不知道 有没有道理 。说什么能padding 解决的,不要margin 解决。
三种写法与上面的margin相同。另 padding : 上下左右 margin也相同。
注意:margin 不会使 元素的大小改变,但是padding会改变原来元素本身的大小。
- 块状元素 与 行内元素
块状元素:div 最基本的块状元素
1.支持宽高 margin、padding
2.width 默认是100% ,独占一行
行内元素:span 最基本的行内元素
1.宽高会随着内容变化而变化
2.支持margin、padding
3.不独占一行
块状元素可以随意嵌套
行内元素 只可以嵌套行内元素
- border - 边框
- background
background-position
背景坐标
放两个参数 第二个参数默认是center
第一个参数是x轴
第二个参数是y轴
支持 right/bottom/left/top/center的写法
字体
- font
font-family:"字体1","字体2","字体3","字体4","字体5","字体6"
没有字体1,就会去找字体2,以此类推。。。
- line-height 这我认为很重要
设定自己在内部的高度位置
当line-height的大小为元素的大小时,便会在元素的中间
这个东西可以控制 行内元素 ~
就是如果中间是div 块状元素 就会失效了!!!
百分比,数字是支持的,不过百分比是继承父级的。
- font-style 文字的斜体如何使用
italic => 是使用的字体的斜体
oblique => 是让字体倾斜
- font-variant (忽略吧没什么用)
- font 属性 简写( 红框部分 )
定位 灰常 灰常 灰常 重要!!!!!!
定位啊 布局啊 b站 有大量经典布局 视频 可以参照一下 传送门
- position
相对定位 (left,right, top,bottom z-index (谁能盖住谁的属性)z轴,相当于Excel里面那什么置于最上层等那种感觉,这个之前遇见过的实际项目的应用:比如就是弹出子窗口时候,给母窗口加个蒙版什么的,子窗口的z-index 大于 蒙版的 z-index 大于 母窗口的)(z轴 支持 负数)
相对定位不会影响原来的位置,显示的元素会变位置。。。。。。
- 绝对定位
脱离标准流
绝对定位 原来的位置不会留着
绝对定位是根据有定位的父节点,去定位。
但如果父节点没有定位,是父节点没有定位,不是没有父节点,注意一下,
那么就会一直找到最外层的节点,直到body节点。
- 窗口定位
<!DOCTYPE html>
<html>
<head>
<title>01 PAGE</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
#div1{
margin-top: 300px;
margin-left: 300px;
background-color: rosybrown;
height: 160px;
width: 160px;
position: relative;
float: left;
}
#div2{
margin-top: 30px;
margin-left: 30px;
background-color:saddlebrown;
height: 60px;
width: 60px;
position:absolute;
}
#div3{
margin-top: 0px;
margin-left: 0px;
background-color:seagreen;
height: 160px;
width: 160px;
position: fixed;
}
</style>
<script type="text/javascript">
</script>
</head>
<body style="height: 2000px;">
<div id="div3"></div>
<div id="div1">
<div id="div2"></div>
</div>
<!-- <div id="div3"></div> -->
</body>
</html>
当窗口出现滚动的时候,他div會移动, 但窗口定位的元素,并不会移动~~~
这个东西呢,以前项目里遇见过这个实际应用,就是
这种 需要 窗口怎么 滚动 ,也还预留出来一个可以弹出用来修改检索商品 条件的 子窗口的按钮。
一直可以定位在画面某个位置。
课程老师举例说的是,那种广告,在画面某处一直会处于悬浮状态的某条广告。。。。。。
- 父级定位: 父级是什么定位,自己就是什么定位。
inherit 嵌套在某个div中的子div,如果使用了inherit这中定位方式,那么他的父级div的定位是什么方式,他就是什么方式。
eg:父是窗口,不随着滚动,他就也是窗口,不会滚动。
父是绝对,会跟着滚走,他就也是绝对,会跟着滚走。
如果父级也是inherit,那么就需要再看父级。
- 默认值 是没有定位 static
display
float 可以 把行内元素变成块状元素!!!~~~
另 display:block 也可以把行内元素编程块状元素。
变块状元素就是,你设置的行宽,行高的将会有效果。
- 行内块 不明觉厉哈 又能行内 又能块状哈 全干工程师哈
- 所以 有没有 既可以横着摆,有支持宽高。
- 红绿是div 有宽高,但不能横着放
- 黄灰是span行内元素,能横着放,但不支持宽高 (下图是加上inline-block后的效果,没加的时候是不支持宽高的)
- 于是 inline-block 横空出世 ,既能横着放 又能 支持宽高。
初识元素百分比单位
再啰嗦一句:块状元素 默认啊 width 默认是百分之百所以才会独占一行,但是高度默认是0,于是不设置的时候,你都看不见他。比如这个时候你在body下,直接写了一个div,还把他的高度设置成了百分之50什么的,你就看不见他,但是如果这时候,你把html,body的高度设置成100%,就能看到你刚才那个50%的div了。这点一定要注意一下。
以上
CSS 练习的小DEMO
left : 100 % 的意思 就是 <div id = “outer”><div id = “inner”></div></div>
inner的位置,在outer的最右边。。。