一.架构分析
页面 => div的层级结构 => 具有采用哪些功能标签显示内容
结构层 > 位置层(布局层) > 内容层
二.css引入
- 行间式 <!-- 简单直接,针对性强 -->
<div style="width: 100px; height: 100px"></div>
- 内联式 <!-- 解耦合了,可读性强 -->
<head><style>
选择器 {width: 100px;height: 100px;}
</style></head>
- 外联式 /* 适合团队高效率开发, 耦合性低, 复用性强 */
<link rel='stylesheet' type='text/css' href='./index.css'>
三.三种引入"优先级"分析
1.没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3.行间式一定是逻辑最下方的样式
四 选择器
选择器:css连接html标签的桥梁,建立连接后就可以控制标签样式
* | div | . | #
标签: 一般用于最内层样式修饰
类:使用范围最广,布局的主力军
id:唯一标识的布局,不能重复
优先级:!important> id >类[属性] >标签> 通配 (优先级:同一标签同一属性)
<style>span{font-size:20px!important;}</style>(尽量不要使用!important)
组合选择器 权重(同类型个数比较)
伪类选择器
1.组合选择器
- 群组选择器
/* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */
div, #div, .div {color: red}
- 后代(子代)选择器
.sup .sub {
后代,sup一定是sub的父代(不一定是父集,sub就是被sup直接嵌套)
}
.sup > .sub {子代}
- 兄弟(相邻) 选择器
.up ~ .down {兄弟}
.up + .down {相邻}
- 交集选择器
section.ss#s {标签类名id名综合修饰}
2.复杂选择器的优先级
1. 越靠近标签的优先级越高(就近原则)
2. 权重的计算
1. 内联样式1000
2. ID选择器100
3. 类选择器10
4. 元素选择器1
div#d1(101)/div.c1(11)/div .c1
3.伪类选择器
a链接标签四大伪类
:link 初始状态
:hover(鼠标悬浮!!!!!!)
:active(鼠标点击中)
:visited
:focus(input标签获取光标焦点)
位置相关
:nth-child() | :last-child |:first-child先确定位置再匹配类型
:nth-of-type() 先匹配类型再确定位置
取反
选择器:not(修饰词) | div:not(:nth-child(2))
伪元素
:before (盒子渲染前)
:after (盒子渲染后)
:focus (表单标签获取焦点)
:blur
五 CSS属性
0. 高度和宽度,标签的分类
1. 标签的分类(标签默认是否独占一行)
1. 块级标签
div p h1~h6 hr ul>li table>tr
2. 行内标签
span a input img i...
2. 块级标签才能设置宽和高
3. max-width: 100%
- max-width --> 最大的宽度
- 100% --> 所有涉及到%都是指占父标签的百分比
1. 字体相关
1. 字体 --> font-family： “”
/*字族*/ font-family: "STSong", "微软雅黑";
/*STSong作为首选字体, 微软雅黑作为备用字体*/
2. 字体大小 --> font-size: 40px;
3. 字体粗细 --> font-weight: 900;
4. 字体颜色 --> color
- red 直接写英文名字
- #FFFFFF
- rgb(255,255,255)
- rgba(255,255,255,0.6)
2. 文本属性
1. text-align:center 对齐方式
2. text-indent: 28px 首行缩进
3. line-height：父标签的高度 （实现单行文本的垂直居中）
4. text-decoration 装饰 (去除a标签的下划线(text-decoration: none))
3. 背景background
1. background-color:red
2. background-image 背景图片(九宫格涮葫芦娃) url() no-repeat 50% 50%
3. background: url() no-repeat center
4. background-attachment: fixed 背景不动的实例
4. 边框
1. border-width (边框宽度)
2. border-style (边框样式)
3. border-color (边框颜色)
简写:border: 1px solid red;
border-radius: 50%; --> 画圆
5. CSS盒子
内容(content)-->内填充(padding)-->边框(border)-->外边距(margin)
1. content (内容) 提供给内容(文本,图片,子标签整个盒子)的显示区域
2. padding (内填充) 介于border与content之间的区域
想让标签撑起来（内容和边框之间的距离变大）设置padding
3. border (边框) 宽度 颜色自身定义,padding和content颜色有背景色填充
4. margin (外边距) 多用于调整调整标签之间的距离 (注意两个挨着的标签margin取最大值)
控制盒子位置==>盒模型布局,不参与盒子显示,其他都参与盒子显示
注意:
当两个标签之间的外边距有重叠的话，会按照最大的外边距来显示
要习惯看浏览器console窗口那个盒子模型
# 整体设置 padding: 上 右 下 左 (无值边取对边)
# 整体设置 border: 10px solid black;
边界圆角: border-radius:50%; 圆形
坑1:父子联动;
解决方案1:子级里放个浮动 ,后再margin布局
float:left;
margin-top:30px;
解决方案2:position:relative;
top:30px;
坑2:上兄弟下margin和下兄弟上margin重叠取大值
6. 显示效果display
脱离文档流 ,其中就是产生了BFC
display:
- none 不显示(不让标签显示,不占位)
- block 按照块级标签来显示
- inline 按照行内标签来显示
- inline-block 既有块级又有行内的效果
/* inline */
/*1.同行显示, 就相当于纯文本, 当一行显示不下, 如就是一个字显示不下,那么显示不下的那一个字就会自动换行,和纯文本的区别就是有标签整体的概念,标签与标签间有一个空格的隔断*/
/*2.支持部分css样式, 不支持宽高 | 行高(行高会映射到父级block标签) | margin上下*/
/*3.content由文本内容撑开*/
/*4.inline标签只嵌套inline标签*/
/* inline-block */
/*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/
/*2.支持所有css样式*/
/*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/
/*4.inline-block标签不建议嵌套任意标签*/
/* block */
/*1.异行显示, 不管自身区域多大, 都会独占一行*/
/*2.支持所有css样式*/
/*3.width默认继承父级,height由内容(文本,图片,子标签)撑开, 当设置自定义宽高后,一定采用自定义宽高*/
/*4.block可以嵌套任意标签*/
7. float(浮动)
1. 多用于实现布局效果
1. 顶部的导航条
2. 页面左右分栏 (博客页面:左边20%,右边80%)
2. float取值:
1. left
2. right
3. none
3. 浮动的特点
1. 任何标签都可以浮动
2. 一个标签浮动之后都变成块级标签（可以设置宽和高）
a标签float之后就可以设置高和宽
3. 浮动的标签脱离文档流（它的位置会被下面的标签挤占）
8 .overflow
/*overflow: 处理内容超出盒子显示区域*/
overflow: auto | scroll | hidden
/*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/
/*scroll: 一直采用滚动方式显示*/
/*hidden: 隐藏超出盒子显示范围的内容*/
9. clear 清除浮动
--> 清除浮动的副作用(内容飞出,父标签撑不起来)
1. 定义一个用于清除浮动的工具样式类,结合伪元素来实现
.clearfix:after {
content: "",
display: "block",
clear: both;
}
2. clear取值:
1. left
2. right
3. both
10. 溢出
1. 标签的内容放不下(溢出)
2. 取值:
1. hidden --> 溢出的部分隐藏起来
2. scroll --> 出现滚动条
3. auto 根据内容自行调整
4. scroll-x
5. scroll-y
例子:
圆形头像的例子
1. overflow: hidden
2. border-radius: 50% (圆角)
11. 定位postion
0. static(默认)
1. 相对定位---相对自己本来应该在的位置
布局后不影响自身原有位置,不脱离文档流
postion: relative;
left: 100px;
2. 绝对定位---相对已经定位过的父标签
父级必须自己设置宽高,完全脱离文档流
position：absolute;
left: 100px;
3. 固定定位---相对浏览器窗口
相对于页面窗口是静止的,完全脱离文档流
postion: fixed;
right: 50px;
bottom: 50px;
补充:
脱离文档流的3种方式
float
absolute
fixed
12. opacity (不透明度)
1. 取值0~1
2. 和rgba()的区别:
1. opacity改变元素\子元素的透明度效果
2. rgba()只改变背景颜色的透明度效果
13. z-index
1. 数值越大,越靠近你
2. 只能作用于定位过的元素
3. 自定义的模态框示例
14. 精灵图:
<head>
<style type="text/css">
.lt1 {
width: 155px;
height: 48px;
background: url('img/bg.png') no-repeat;
background-position:0 0;
}
.lt1:hover {
cursor: pointer;
background: url('img/bg.png') no-repeat 0 -48px;
}
/*1.显示区域一定要与精灵图目标小图大小一致*/
/*2.通过背景图片定位方式将目标小图移至显示位置*/
background-position里通常是写负值
</style>
</head>
<body>
<!-- 精灵图: 各种小图拼接起来的一张大图 -->
<!-- 为什么使用精灵图: 减少请求次数, 降低性能的消耗, 二次加载图片资源时极为迅速(不在需要发送请求) -->
<div class="box"></div>
<div class="lt1"></div>
</body>
REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/7999532.html
15 流式布局思想
1. 百分比
2. vw | vh => max-width(height) | min-width(height)
3. em | rem