CSS
快捷键 control +？ 是
html css JavaScript
结构 样式 行为 相分离
如何引入css
1.行间样式
例子：
<div style="
width: 100px;
height: 100px;
background-color: brown;">
</div>
2.页面级css
<head>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
3.外部css文件
<head>
<link rel="stylesheet" type="text/css" href="">
</head>
另一个CSS文件
div{
width:100px;
height:100px;
border-radius:50%;
background-color:black;
}
同步与异步
异步：同时进行
同步：不同时进行
选择器
id选择器
id是一一对应关系
<div id="only">
123
</div>
#only{
background-color:red;
}
class 选择器
关系多对多
<div class="demo">
123
</div>
.demo{
background-color:yellow;
}
标签选择器
<div>
123
</div>
div{
background-color:red;
}
通配符选择器
用上它了后，所有的标签都生效
<span>123</span>
<div>
234
</div>
<strong>111</strong>
*{
background-color:red;
}
属性选择性
<div id="only" class="demo">123</div>
[id]{
background-color:red;
}
选择器优先级
important>行间样式>id>class=属性选择器>标签选择器>通配符选择器
css 权重
important infinity
行间样式 1000
id 100
class/属性/伪类 10
标签/伪元素 1
通配符 0
中间是256进制
复杂的选择器
父子选择器/派生选择器
<div>
<strong>
<em>234</em>
</strong>
</div>
div strong em{
background-color:red;
}
查看的时候是从右到左查看：em----->strong------>div
直接子元素选择器
<div>
<em>1</em>
<strong><em>2</em></strong>
</div>
div > em{
background-color: green;
}
1变色，2不变色
并列选择器
<div>
1
</div>
<div class="demo">
2
</div>
<p class="demo">
3
</p>
div.demo{
background-color:red;
}
标签需要放前面
分组选择器
<em>1</em>
<strong>2</strong>
<span>3</span>
em,
strong,
span{
background-color:red;
}
css 属性
div{
font-size:50px; //变换的是字体的高
font-weight:bold; //加粗 lighter normal bold bolder
font-style:italic;//斜体
font-family:arial;//字体样式
color:#ff4400;
border:1px solid black;//宽粗颜色
属性文本
text-align:right; //文字对齐方式，right,left ,center
line-height:16px; //单行文本高度，行间距，单行文本垂直居中的方法是----》height和line-height一样高
text-indent：2em; //首行缩进
text-decoration:underline;//给文本装饰 line-through/none/overline/
cursor:pointer;//光标，会出现一个小手点击
}
可以利用border画三角形
单位
相对单位 1em=1*font-size=16px
相对单位
伪类选择器
a:hover{
background-color:orange;
} 鼠标一移上去就会变色，也可以加其他的值
元素分类
1.行级元素（inline）
内容决定元素所占位置，不可以通过css改变宽高
span，strong，em，a，del
2.块级元素（block）
独占一行，可以通过css改变宽高
div，p，ul，li，ol，form，address
3.行级块元素（inline-block）
内容决定大小，可以改宽高
img
所有的带有inline的标签，都是有文字的特性，如果有空格或者回车，他就会自己空出一点间隙
企业开发经验
1.先定义功能css，后挑样式html；
2.标签选择器一般是 自定义标签的作用
3.通配符选择器一般都是初始化标签
盒子模型
盒子三大部分
盒子壁 border
内边距 padding
盒子内容 width+height
margin+border+padding+(content=height+width)
padding:0px 100px 0px：上下，100px左右
marin：0px
层模型
绝对定位
position -absolute
1.脱离原来位置进行定位（不会保留出原来的位置）
2.相对最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位
postion-- relative
1.保留原来位置进行定位
2.相对于自己原理的位置进行定位
一般使用relative当作标杆，absolute用于定位
body天生带有margin 8px
如何使“广告”永远在页面居中
div{
position:absolute;//相对于文档定位
left:50%;
right:50%;
width:100px;
height:100px;
background-color:red;
marin-left:-50px;
margin-top:-50px;
}
position:fixed ------------------------固定，相对于可视窗口固定
圆环制作方法：
div{
width:100px;
height:100px;
border:10px solid black;
border-radius:50%;
}
小练习（制作一个奥运五环）：
原理就是画出五个相同的⚪，利用position调整各自的位置
.plat{
position: absolute;//原先是relative（因为i把他当成父级），但是他会保留原先的位置，不方便定位，所以改成absolute
top: 50%;
left: 50%;
margin-left: -153px;
margin-top: -130px;
height: 180px;
width: 380px;
border: 10px solid green;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
height: 100px;
width: 100px;
border: 10px solid black;
border-radius: 50%;
position: absolute; //写完absolute，脱离原来的位置进行定位，并且是相对于父级进行定位的，这里没有父级，我们就要给他设置一个盒子，让他们随着盒子一起移动到中间
}
.circle1{
left: 0;
top: 0;
}
两栏布局
两个要点：
1.定位
2.出现被覆盖的区域
*{
margin: 0;
padding: 0;
}
.right{
position: absolute;//原本是块元素的，就会换行，所以设置position
right: 0;
width: 100px;
height: 100px;
background-color: green;
}
.left{
margin-right: 100px;
height: 100px;
background-color: hotpink;
}
两个bug
1.margin塌陷：margin-top不会移动（用css解决）
2.margin合并：同一子级的margin，margin-bottom和margin-top是合并（一般不解决）
如何触发一个盒子的BFC
position:absolute
display:inline-block;
float:left/right;
overflow:hidden;//溢出部分隐藏
浮动模型
float：left/right
浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们
产生了bfc的元素和文本类属性的元素以及文本都能看到浮动元素
clear：bot h;清除浮动流(必须应用于块级元素)
<div class="wrapper">
<div class="content1">1</div>
<div class="content2">2</div>
<div class="content3">3</div>
<p class="clear"></p>
</div>
.wrapper{
（float：left/postion：absolute/display：inline）
border: 1px solid black;
}
.clear{
clear: both;
}
.content1,
.content2,
.content3{
height: 100px;
width: 100px;
background-color: hotpink;
float: left;
}
伪元素
伪元素是incline元素，是行内元素
这里还是不是很理解行内元素和块级元素的区别
span::before{
position:absolute;
left:0;
top:100px;
content:"";//伪元素中独有的
display:inline-block;
width:100px;
height:100px;
background-color:red;
}
行内元素：
- 与其他行内元素并排
- 不能设置宽高，默认的宽度就是文字的宽度
块级元素：
- 霸占一行，不能与其他任何元素并列。
- 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。
tip:**position :absolute; float:left/right; 从内部把元素转换成inline-block **
清除浮动流三件套
.clear{
content:"";
clear:both;
display:block;
}
溢出容器处理
打点展示
1.单行文本
p{
white-space:nowrap ;
overflow:hidden;
text-overflow:ellipsis;
}
2.多行文本
不拿技术实现
背景图片处理
div{
background-image:url(fy.jpg);
background-size:100px 100px;
background-repeat:no-repeat;
background-position:left top;
}
如何图片代替文字
第一种方法
a{
text-indent: 200px; //首行缩进
white-space: nowrap; //不换行
overflow: hidden; //隐藏溢出的字
}
第二种方法
a{
//去除超链接的样式
display:inline-block;
text-decoration: none;
color: #424242;
//设置容器的宽度高度
width:190px
height:0px;
padding-top:90px;
overflow:hidden;//隐藏溢出的文字
border:1px solid black:
background-image:url(......);
background-size:190px 90px;
}
注意的地方
a标签不可以嵌套a标签
p标签不可以嵌套div标签
块元素可以嵌套任何元素
行内元素只能嵌套行内元素
补充的知识点
如何固定两层嵌套，留白部分可以缩小放大
<div class="wrapper">
<div class="content">
</div>
</div>
.wrapper{
height:30px;
background-color:#123;
}
.content{
margin:0 auto;
width:1200px;
height:30px;
background-color:#0f0;
}
inline inline-block 都是文本类元素
img就是inline-block，所以并排在一起的时候，中间有空格分开
css中设置：
position：absolute；
float ：left/right
时候，会自动转换为display：inline-block
行级块元素里面包含文字，外面的文字就会与他对齐
vertical-align: middle;(对齐线)
2879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
