一、元素布局
http://www.w3school.com.cn/css/css_positioning.asp
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
文档流:是指文档中所有可见元素在文档中的排列顺序。
1、浮动特点
http://www.w3school.com.cn/css/css_positioning_floating.asp
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.1、排列方向改变
浮动可以使元素按照指定方向排列,直到遇到父元素的边界或者另一个浮动元素为止。
float:
1. none 不浮动(默认值)
2. left 左浮动 (从左向右排列)
3. right 右浮动(从右向左排列)
1.2、脱离文档流
- 浮动会使元素脱离文档流(元素不占位,无法撑开父元素,影响后续布局)
.wrap{border:5px solid red;}
.box1{float:left;background:green;width:200px;height:200px;}
.box2{float:left;background:blue;width:200px;height:200px;}
<div class="bg box"></div>
<div class="bg2 box"></div>
<div class="bg3 box"></div>
解决方案1:
给浮动元素的【父元素】固定高度。缺点:不够灵活
.wrap{height:200px;border:5px solid red;}//上图右侧
解决方案2:
1.在浮动元素的最后,加一个空的块元素(div)
2.该元素不浮动。
3.cleardiv{clear:both;}
缺点:代码冗余。
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
</div>
//加空快
<div style="height:100px;background:yellow;"></div>
解决方案3
上个方案的优化,浮动父元素之后使用伪元素。推荐方法:floatParents:after{content:"";display:block;clear:both;}
.wrap:after{
content:"";
display:block;
clear:both;//clear 属性规定元素的哪一侧都不允许其他浮动元素
}
解决方案4
上面方法的兼容处理
.clearfix{*zoom:1;}/*ie7及以下兼容*/
.clearfix:after{content:"";display:block;clear:both;}
1.3、层级提升,覆盖后面正常元素
- 会提升元素层级
下面.bg2的div层级提升导致.bg3的div被遮盖
.bg{background:red;}
.bg2{float:left;background:green;}
.bg3{background:blue;}
.box{width:100px;height:100px;}
<div class="bg box"></div>
<div class="bg2 box"></div>
<div class="bg3 box"></div>
1.5、可以使内联元素支持宽高
浮动可以让内联元素支持宽高,块元素没有宽度时,宽度由内容撑开(类似内联框)。
span{float:left;background:red;width:100px;height:100px;}
<span>span</span>
1.6、使块元素一行排列
浮动可以使块元素在一行排列
div{float:left;background:red;}
<div>divdivdiv</div>
<span>span</span>
1.7、浮动元素无margin叠加
div{
float: right;
width: 100px;
height: 100px;
background-color: #00F7DE;
margin: 50px
}
<div>box1</div>
<div>box2</div>
2、定位
适用定位的情况:当需要有元素覆盖的时候。
- position:static (默认值)| relative(相对定位)|absolute (绝对定位)|fixed (固定定位)
- 偏移量:left:距左 | right:距右 | top:距上 | bottom:距下
2.1、相对定位特点
1、相对于元素原来位置进行定位
2、不脱离文档流(原来位置仍然占位)
3、不定义偏移量时,对元素本身基本没有影响
4、提升元素层级
5、通常是配合绝对定位使用
.box2{
background: green;
position:relative;
}
2.2、绝对定位
特点:
1、有定位父级时
相对于【最近】的已定位父级进行定位
2、没有定位父级
相对于根元素html进行定位。
3、通常配合相对定位使用
4、脱离文档流(原来位置不在占位)
5、提升层级
6、使块元素由内容撑开(适应内容-生成内联框)
7、使内联元素支持宽高
span{
background:blue;
width:100px;
height:100px;
position:absolute;
right:0;
bottom:0;
}
2.3、固定定位
1、始终相对于窗口进行定位。
2、脱离文档流(原来位置不在占位)
3、提升层级
4、使块元素由内容撑开(适应内容-生成内联框)
5、使内联元素支持宽高
.inner{
width: 100px;
height: 100px;
background: red;
position:fixed;
right:0;
bottom:0;
}
2.4、定位元素的层级:
定位元素层级 高于 普通文档流内容元素的层级。
- 定位元素之间的层级 z-index:z轴顺序 堆叠顺序 层叠顺序
- 只对定位元素有效。
- 值越大,显示越靠前
- 值相同,由结构先后顺序决定(后写的覆盖前写的)
.box{position:fixed;z-index:1000px}
实现弹出框效果:
<style>
body{margin:0;}
.page{
height:3000px;
background:url("yk.png")
repeat-y center top;
}
.mask{ position: fixed;
left:0;top:0;width:100%;height:100%;
background:#000;
opacity: 0.3;
filter:alpha(opacity=30);
}
.loginbox{
width:760px;height:350px;
background:yellowgreen;
position:fixed;left:50%;top:50%;
margin-top:-175px;margin-left:-380px;
}
</style>
<!--
不透明: opacity:0-1;0全透明;1全不透明
IE:
filter:alpha(opacity=50) 取值:0-100
-->
<div class="loginbox"></div>
<div class="mask"></div>
<div class="page"></div>
2.5、元素定位居中:
定位元素水平垂直居中的实现方法:left:50%;top:50%;margin-left:- 盒子宽度的一半;margin-top:- 盒子高度的一半;
详情请点击跳转:绝对居中
https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/84992614
3、弹性布局
弹性布局:https://blog.csdn.net/WeiAiGeWangFeiYuQing/article/details/82990404
二、样式
引入样式的几种方式,行间样式,内部样式,外部样式。
1、行间样式
开始标签的内部:style=""
<div style="width:100px;height:100px;background:red;"></div>
2、内部样式
位置:head标签内部。格式:<style></style>
<head>
<style type="text/css">
.box{width:100px;height:100px;background:red;}
</style>
</head>
3、外部样式
三、常用字体样式
http://www.w3school.com.cn/css/css_font.asp
font-family: 字体 字体系列
font-size: 字号
font-weight: 字体是否加粗
bold加粗
normal 正常
font-style: 字体风格(字体是否以斜体显示)
italic 倾斜
normal 正常
line-height: 行高
测量:行高-> 文字高度+行间距
特点:
单行文本垂直居中
缩写顺序:font: 字体风格 字体加粗 字号/行高 字体; [空格隔开]
font:italic bold 30px/40px "宋体";
四、常用文本样式
http://www.w3school.com.cn/css/css_text.asp
text-align: 文本水平对齐方式。left|right|center|justify(两端对齐)
text-indent: 首行缩进。em相对单位|相对于当前元素的font-size值
text-decoration: 文本装饰。none 无|underline 下划线|line-through 中划线
|overline上划线
color:文本颜色。(十六进制:)#ff6600|RGB(r红:00-ff g黄 b青)
#000000黑色
#fffff 白色
#ff0000 红色
|颜色名称:(red blue yellow ...)|rgb颜色模式:rgb(r,g,b)0-255
五、背景
http://www.w3school.com.cn/css/css_background.asp
给元素设置背景,background属性
background-color:背景颜色
background-image:背景图片
background-repeat:背景重复
repeat(x,y重复)
no-repeat 不重复
repeat-x 沿x轴平铺
repeat-y 沿y轴平铺
background-position:背景定位
x y
关键字:
水平 left center right
垂直: top center bottom
px
简写:background:(空隔隔开)[背景色 背景图片 背景平铺 背景定位];
例如:
//全写
.box{
background-color:#000;
background-image: url(1.jpg);
background-repeat:no-repeat;
background-position:20px 20px;}
//简写
.box2{background:#000 url(1.jpg) no-repeat 20px 20px}
六、css选择器
选择器{ 属性名称:属性值; 属性名称2:属性值;}
6.1、选择器的优先级
!important>行间样式优先级 > >id选择器 > 类选择器 > 元素选择器 > 通配符
原则:范围越精确,优先级越高。
6.2、*通配符选择器
*{ margin:0; padding:0;}
6.3、 id选择器
#box{margin:0; padding:0;}
6.4、class选择器(类选择器)
class名称要求:不能使用中文、不能用纯数字、不能以数字开头、不能使用特殊符号(-、_除外)
.box{margin:0; padding:0;}
6.5、分组选择器(群组选择器)
将选择器与选择器之间用逗号隔开,用逗号隔开的各组选择器都具有相同的样式。
.left,.right{
float:left;
width: 150px;
height: 300px;
}
6.6、派生选择器
也叫后代选择器,包含选择器。
http://www.w3school.com.cn/css/css_syntax_descendant_selector.asp
.bottom .small{
background-color: #000;
}
.box span{background:green;}
//只有.box下的span背景颜色为绿
6.7、子元素选择器
http://www.w3school.com.cn/css/css_selector_child.asp
div>p{background:red;}
6.8 、相邻兄弟选择器
http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp
div+p{background:red;}
七、CSS3介绍
CSS3 是最新的 CSS 标准。为了提高开发速度,也为了方便各主流浏览器根据需要渐进式支持,css3按模块化进行了全新设计,这些模块可以独立发布和这实现,也为日后css的扩展奠定了基础。
其中最重要的 CSS3 模块包括:
7.1、属性选择器
7.1.1、旧的属性选择器:
- E[attr]
- E[attr=“val”]
7.1.2、新增的属性选择器
- E[attr^=“val”] 选择拥有attr属性且属性值【等于】val的E元素
- E[attr$=“val”] 选择拥有attr属性且属性值以val【结束】的E元素
- E[attr*=“val”] 选择拥有attr属性且属性值【包含】val的E元素
特例:
- E[attr=“val”]
7.2、伪类选择器
ie8及以下不支持
E:first-child{} 选择属于父元素【第一个】子元素E
E:last-child{} 选择属于父元素【最后一个】子元素E
E:nth-child(n){} 选择属于父元素【第n个】子元素E
n:数字,表达式 2n 2n+1 3n,关键词 even(偶数) odd(奇数)
E:nth-last-child(n){} 选择属于父元素的【倒数第n个】子元素E
E:enabled{} 处于可用状态的元素
E:disabled{} 处于禁用状态的元素
E:checked{} 处于选中状态的元素
7.3、伪元素选择器
单冒号(伪元素选择器)可以兼容至ie8
1. E:after{} :在元素内部最后生成内容
2. E:before{}: 在元素内部最开始位置生成内容
3. E::first-line{} 选择元素第一行内容(==适用于块元素==)
4. E::first-letter{} 选择元素第一个字符 (==适用于块元素==)
5. E::placeholder{} 设置输入提示占位符样式
7.3.1、css3:区分伪类和伪元素
伪类:单冒号
伪元素:双冒号。例如:E::after{} E::before{}
八、框模型(Box Model)
http://www.w3school.com.cn/css/css_boxmodel.asp
九、背景和边框
十、文本效果
十一、2D/3D 转换
十二、动画
十三、多栏布局
- column-count:栏目的数量(3 / auto)
- column-width:栏目的宽度(px / auto)
- column-gap:栏目间距
- column-rule:栏目的边框
- column-rule-width:
- column-rule-style:
- column-rule-color:
.box{
column-width:200px;
column-gap: 30px;
column-rule:1px dashed red;
}
<div class="box">(中间大量文字省略)</div>
效果如下:
十四、用户界面
http://www.w3school.com.cn/css3/css3_user_interface.asp
- resize
- box-sizing
- outline-offset
十五、浏览器私有前缀
浏览器私有前缀,是浏览器对于新CSS属性的一个提前支持;
加前缀是兼容老版本的写法,比较新版本的浏览器都支持直接写。
内核 | 私有前缀 | 浏览器 |
---|---|---|
Gecko内核 | css前缀为"-moz-" | 火狐浏览器 |
WebKit内核 | css前缀为"-webkit-" | chrome、safari |
28+ Blink内核 | ||
Presto内核 | css前缀为"-o-" | Opera(欧朋) |
现已改用Google Chrome的Blink内核 | ||
Trident内核 | css前缀为"-ms-" | IE |
十六、新增颜色模式
CSS的颜色:http://www.w3school.com.cn/cssref/css_colors_legal.asp
- rgba(r,g,b,a);兼容性:ie8及以下不支持。a:alpha透明度。
- hsl(h,s,l);h :色调 hue;s :饱和度 saturation ;l: 亮度 lightness;兼容性:ie8及以下不支持。
.box{
width: 200px;
height: 200px;
background: hsl(0,100%,50%);//红色
}
<p class="box"></p>
- hsla(r,g,b,a) ; a :alpha透明度,取值:0-1。0:全透明;1:全不透明; 0-1半透明。兼容性:ie8及以下不支持。
.box{
width: 200px;
height: 200px;
background: hsla(0,100%,50%,0.5);//办透明红色
}
<p class="box"></p>
这边有一个颜色转换工具,可以转换颜色。
十七、媒体查询
1样式表内
@media screen and (min-width:601px) and (max-width:1000px){
/* 600-1000*/
body{background:green;}
.box{column-count:3;}
}
@media screen and (max-width:600px){
/*小于等于600*/
body{background:red;}
.box{column-count:1;}
}
<div class="box">(文字内容省略)</box>
2 link标签
<link rel="stylesheet" href="gt1000.css"
media="screen and (min-width:1000px)">
<link rel="stylesheet" href="w600-1000.css"
media="screen and (min-width:601px) and (max-width:1000px)">
<link rel="stylesheet" href="lt600.css"
media="screen and (max-width:600px)">
3 横竖屏
布局和样式
<!--横屏-->
<link rel="stylesheet" href="gt1000.css" media="screen and (orientation:landscape)">
<!--竖屏-->
<link rel="stylesheet" href="lt600.css" media="screen and (orientation:portrait)">
<div class="box">(大量文字省略)</box>
gt1000.css文件
body{background:pink;}
.box{column-count:4;column-gap:20px;}
lt600.css
body{background:red;}
.box{column-count:1;}
效果:
十七.CSS命名规则
主流的CSS设计思想和一个最近通用的CSS设计思想:OOCSS、SMACSS、BEMCSS、METACSS。
参考文章:
- 1.如何写出一套可维护的 CSS 库?https://mp.weixin.qq.com/s/1chHiSMBjFPpvh-y5nz9Mg