简介
编写位置
行内样式
内部样式
外部样式
编写位置的展示优先级
代码风格
CSS选择器
通配选择器
元素选择器
类选择器
id选择器
总结
优先级
交集选择器
并集选择器
后代选择器
子代选择器
兄弟选择器
两个都是不包括那个最开始的div+p ,不包括div
属性选择器(类似正则表达式)
伪选择器
动态伪类
顺序不能变
结构伪类
伪元素选择器
优先级
CSS三大特性
层叠性
继承性
优先级
CSS常用属性
颜色表示
字体属性
字体大小
字体族
字体风格
字体粗细
字体复合
文本属性
文本颜色
文本间距
文本修饰
文本缩进
文本对齐水平
行高
文本对齐垂直
vertical-align
列表属性
表格属性
背景属性
鼠标属性
盒子模型
长度单位![](https://i-blog.csdnimg.cn/direct/cefe662f6efa4653b30f8e9d943bbe35.png)
元素的显示模式
总结显示模式
修改元素的显示模式
盒子模型的组成
盒子模型的内容区
内容区的默认宽度
盒子内边距padding
盒子边框border
盒子的外边距margin
处理内容溢出
隐藏元素的方式
样式的继承
布局技巧
元素之间的空白问题
行内块的幽灵空白问题
浮动
相关属性
浮动产生影响
页面练习
<!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: 0px;
psdding: 0px;
}
.leftfix{
float: left;
}
.rightfix{
float: right;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container{
width: 960px;
height: 200px;
/* background-color: gray; */
margin:0 auto;
text-align: center;
}
.logo{
width: 200px;
line-height: 80px;
}
.banner1{
width: 540px;
margin: 0 10px;
line-height: 80px;
}
.banner2{
width: 200px;
line-height: 80px;
}
.banner1,
.banner2,
.logo{
height: 80px;
background-color: #ccc;
}
.menu{
height: 30px;
background-color:#ccc;
margin-top: 10px;
line-height: 30px;
}
.item1,
.item2{
width: 368px;
height: 198px;
border: 1px solid black;
margin-right: 10px;
line-height: 198px;
}
.content{
margin-top: 10px;
}
.item3,
.item4,
.item5,
.item6{
width: 178px;
height: 198px;
border: 1px solid black;
line-height: 198px;
margin-right: 10px;
}
.bottom{
margin-top: 10px;
}
/* .top{
margin-bottom: 10px;
} */
.item7,
.item8,
.item9{
width: 198px;
height: 128px;
border: 1px solid black;
line-height: 128px;
}
.item8{
margin-top: 10px;
margin-bottom: 10px;
}
.foot{
/* width: 960px; */
background-color: #ccc;
height: 60px;
line-height: 60px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="page-heard clearfix">
<div class="logo leftfix">logo</div>
<div class="banner1 leftfix ">banner1</div>
<div class="banner2 leftfix ">banner2</div>
</div>
<!-- 菜单 -->
<div class="menu">菜单</div>
<!-- 内容 -->
<div class="content clearfix" >
<!-- 左侧 -->
<div class="left leftfix">
<div class="top clearfix">
<div class="item1 leftfix">栏目一</div>
<div class="item2 leftfix">栏目二</div>
</div>
<div class="bottom clearfix">
<div class="item3 leftfix" >栏目三</div>
<div class="item4 leftfix">栏目四</div>
<div class="item5 leftfix">栏目五</div>
<div class="item6 leftfix">栏目六</div>
</div>
</div>
<!-- 右侧 -->
<div class="right leftfix">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
<!-- 页脚 -->
<div class="foot">页脚</div>
</div>
</body>
</html>
定位
相对定位
绝对定位
固定定位
粘性定位
定位层级
定位的特殊应用
布局
版心
常用布局名词
重置默认样式
CSS3
私有前缀
常见浏览器私有前缀
新增长度单位
新增颜色设置方式
新增选择器
新增盒模型相关属性
新增背景属性
新增边框属性
新增文本属性
新增渐变
web 字体
文字为矢量图,放大也不失真
阿里图标官网三种使用方式
2D变换
缩放,display变成行内快才可以
3D变换
过渡
动画
多列布局
伸缩盒模型
宽度大的话会有缝隙,平均分布在侧轴