能通过
<div id="" class="">布局
控制样式漂亮的排版方式——css
重要的 point
<div>是块级元素，一个<div>就是一行<span>是行内元素，每个<span>中间空一格
内联样式
div：
style:
color:
border-style:`solid实现` `dashed虚线`
border-color:
>>>精简：宽度 线体样式 颜色
border：1px dashed skyblue;外部引用
demo.html:
html>head:
link:
rel:"stylesheet"
href:"demo.css"
内部样式表
demo.html:
html>head>style:
<!--常见标签选择器-->
#divid{border：1px dashed skyblue;}`id选择器`
div{}`标签选择器`
.divclass{}`类选择器`
#divid span{color:red;}
#divid .inner-span{color:yellow;} 中间有空格
p.con{}交集选择器 中间没有空格
a,#id{}b并集选择器 用，
*{}通配符选择器 一般用于全局去边距
a:hover{}伪类选择器 鼠标放上去才有反应
<!--常见文字属性-->
.font-size{
font-style:italic
font-weight:`字体粗度区间100-900`默认值：400 bold 700
font-size:16px 最小12px
font-family:"新宋体"
>>>精简： {font-style} {font-weight} font-size font-family
font: 600 20px "新宋体"
text-align:right; 文本对齐
text-indent:2em; 首行缩进
line-height:50px 行高
}
<!--去除超链接下划线-->
a{text-decoration:none}
<!--去<ul>的小黑点-->
ul{list-style:none}
<!--div可以设置宽高，span随着字体撑大变大-->
.showdiv{
width:500px
height:500px 给定div块的大小 生效
background-color: #fff;
display: block; div默认的显示模式 宽高都有效
display: inline; 宽高失效，需要随着字体撑大变大
display: inline-block;又在一行，宽高又有效
}
.showspan{
width:500px
height:500px 给定span块的大小 无效
background-color: #fff;
}
html>body:
div:
id="divid"
class="divclass class-red border-color"
span:
class="inner-span"
div:
class="font-size"
div:
class="showdiv"
span:
class="showspan"小例子
美化前
美化后
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="democss.css">
</head>
<body>
<div class="nav">
<ul>
<li><a class="inner-a-1" href="">小学生</a></li>
<li><a class="inner-a-2" href="">初中生</a></li>
<li><a class="inner-a-3" href="">高中生</a></li>
</ul>
</div>
</body>
</html>democss.css
*{/*消除整体元素与元素之间的内外边距*/
margin: 0;
padding: 0;
}
.nav {
width: 1050px;
height: 65px;
margin: auto;/*让整个nav 块级元素自动居中*/
}
li {
display: inline-block;/*又在一行，宽高又有效*/
list-style: none;/*清除小黑点*/
float: left;/*解决li与li之间有缝隙*/
}
a {
width: 350px;
height: 65px;
display: inline-block;/*又在一行，宽高又有效*/
text-decoration: none;/*去掉下划线*/
font-size: 20px;
font-weight: bold;
text-align: center;/*字体左右居中*/
line-height: 65px;/*字体上下居中*/
color: #ffffff;
}
.inner-a-1 {background-color: #69639a;}
.inner-a-2 {background-color: #9385f5;}
.inner-a-3 {background-color: #754311;}三大特性
1.继承性
font-size
color
2.层叠性
3.样式的优先级
/*！important>行内样式>id选择器>类选择器>标签选择器>通配符>继承*/
width:500px !important;bgimage的属性
background-repeat: repeat repeat-x repeat-y no-repeat;/*no-repeat不重复*/
background-image: url();/*图片地址*/
background-position: 100px 50px;/*图片距离上一层的相对位置XY*/
>>>>连写
background：url() no-repeat 40px 50px;精灵图
获取精灵图一个小图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1 {border: 1px solid lawngreen;}
#div {
width: 35px;
height: 30px;
background: url("sprites.jpg") no-repeat -16px -83px;
}
</style>
</head>
<body>
<div id="div" class="div1"></div>
</body>
</html>三大重点
1.盒子模型
| 盒子 | 说明 |
|---|---|
 |
padding 内边距 border 边框 margin 外边距 |
| 表格坍塌属性 | border-collapse:collapse;用在<table>属性中使表格间隔距离消失 |
| 盒子相邻 | margin 取最大的盒子的margin值 |
| 盒子嵌套 | 父盒子没有设置padding和border子盒子的margin-top会和父盒子合并并且选择大margin的盒子解决办法 要么给父盒子加border或者overflow：hidden 溢出隐藏 |
2.浮动
| 浮动 |
|---|
display:inline-block;两个盒子之间有个缝*{ margin: 0;padding: 0;}并不能解决缝解决办法： 浮动 float:left; |
| 子盒子随着父盒子margin值改变而移动 |
| 子盒子挤出父盒子之外，与父盒子同级盒子再写的话会与子盒子重叠 解决办法 浮动 float:left;或者在父元素定义一个class .clearfix:after { content:"";display:block;height:0;clear:both;visibility:hidden;} |
3.定位
定位position: |
说明 |
|---|---|
绝对定位absolute |
给它一个left top相对浏览器跑如果子盒想相对父盒子跑，子盒子为 relative父盒子不设值或者子盒子设置 absolute，父盒子是relative（子绝父相） |
相对定位relative |
给它一个left top相对父盒子跑 |
固定定位fixed |
固定在屏幕某个地方 |