CSS布局精要
css
一、css的引入
1.内联式：
<!--从左到右依次是：颜色，字体大小，字体种类，行高-->
<div style='color:red;font-size:18px；font-family:"微软雅黑"；line-height:30px'>
一段文字
</div>
2.嵌入式：
<!--用这种方式，下面所有的div都会被渲染成该风格-->
<head>
<style type='text/css'>
div{
color:red;
font-size:18px；
font-family:"微软雅黑"；
line-height:30px;
}
</style>
</head>
3.外联式：
<head>
<!--先把整个样式封装成css文件，然后通过link导入-->
<link rel='stylesheet' type='test/css' href='文件路径'>
</head>
二、常用文本样式
font-style: 设置字体是否倾斜，参数有normal/italic
font-weight: 设置字体是否加粗，参数有 bold/normal
font: 同时设置几个属性，例如：
#需要按照是否加粗，字体大小/行高,字体种类 的顺序书写
font:normal 12px/36px 'Microsoft Yahei'；
text-decoration: 设置下划线，常用于a标签，把该项设置为none
text-indent: 设置首行缩进，一般设为二倍font-size
text-align: 设置文字水平对齐，有left/center/right 三种参数
margin:外边距，一般设为0px
padding:内边距,一般设为0px
三、css选择器
1、标签选择器，影响所有同名的标签
#id 选择器，几乎不用
#只作用于特定名字的元素
<style>
#div2{
color:gold;
}
</style>
<body>
<div id='div2'>测试文字</div>
</body>
2、类选择器，使用广泛
#可以作用于多个不同元素，通过class调用
<style>
.red{
color:red;
}
.bold{
font-weight:bold;
}
</style>
<body>
<div class='red'>测试文字1</div>
<div class='red bold'>测试文字2</div>
</body>
3、层级选择器
主要应用在选择父元素下的子元素，或者子元素下的子元素，可与标签
元素结合使用减少命名，同时也可以通过层级，防止命名冲突。
4、组选择器
.box1,.box2,.box3{
font-size:14px;
text-indent:28px;
}
.box1{
color:red;
}
.box2{
color:gold;
}
.box3{
color:pink;
}
5、伪类选择器
#hover
.list a{
test-decoration:none;
color:333;
}
#<!--鼠标放上去时变色-->
.list a:hover{
color:gold;
}
#before/after
.box1{
color:red;
}
#content中信息会显示在对应内容之前，且不可被选中
.box1:before{
content:'在前面的文字 '；
color:blue;
}
四、表格样式
#定义线宽，实线，颜色；下一行让线合并
.list{
border:1px solid #333;
border-collapse:collapse;
}
.list td{
border:1px solid #333;
text-align:center;
}
<table class='list'>
<tr>
<td></td>
</tr>
</table>
五、盒子模型
1、从内层到外层依次是：内容，padding,border,margin
.box{
width:200px;
height:100px;
background-color:gold;
border-top-width:10px;
border-top-color:#000;
<!--实线：solid 虚线：dashed 点线：dotted>
border-top-style:solid;
<!--从12点钟方向，顺时针设置，也可以只有3,2,1个值，对称补值>
padding:20px 30px 40px,50px;
<!--注意：垂直方向的两个盒子margin会自动合并，合并值为较大的一方>
<!--定义方式与padding类似,下面的auto可以让盒子水平居中>
margin:100px auto;
}
2、盒子的尺寸：
盒子的宽度：width+左右的padding的值+左右border的值
盒子的高度：height+上下的padding的值+上下border的值
3、margin-top 塌陷
在两个盒子嵌套的时候，内部盒子设置的margin-top会加到外面的盒子上
导致内部的margin-top设置失败，解决方式：
1、外部盒子设置一个边框（麻烦，而且边框本身会暴露出来）
2、外部盒子设置 overflow：hidden
3、使用伪元素类,在外边框盒子处调用
.clearfix:before{
content:'';
display:table;
}
4、元素溢出：
子元素的尺寸超过父元素尺寸时，会产生元素溢出，可以设置父元素：
overflow设置项：
visible：不去处理
hidden：隐藏超出的部分
scroll：产生一个滚动条,无论是否发生溢出
auto:发生溢出时，才产生滚动条
inherit:从父元素继承overflow 属性的值
5、块元素，内联元素，内联块元素：
a. 块元素：如div,p,ul,li,h1~h6,dl,dt,dd等
1). 支持全部样式
2). 如果未设置宽度，会默认使用父元素的宽度
3). 盒子占据一行，即使设置了宽度
b. 内联元素：也叫行内元素，如：a,span,em,b,strong,i 等
1).支持部分样式（不支持宽，高，margin上下，padding上下）
2).宽高由内容决定
3).盒子并在一行
4).代码换行，盒子之间会产生间距
可以不换行
或者把父级font-size设为0，然后把子级font-size设为想要的大小（常用）
5).子元素是内联元素，父元素可以用text-align属性设置水平对齐，
用line-heignt设置垂直对齐
c. 内联块元素：
#可以用display属性将块元素或内联元素转化为这种元素
1).支持全部样式
2).如果没有设置宽高，宽高由内容决定
3).盒子并在一行
4).代码换行，盒子会产生间距
5).子元素是内联块元素，父元素可以用text-align属性设置水平对齐，用line-heignt设置垂直对齐
#display属性
1).none：元素隐藏且不占位置
2).block：元素以块元素显示
3).inline：元素以内联元素显示
4).inline-block：元素以内联块元素显示
#应用例子
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>首页标签</title>
<style>
.all{
width:700px;
height:50px;
margin:200px auto;
<!--消除子元素间隙-->
font-size:0px;
}
.box{
display:inline-block;
border:1px solid gold;
width:98px;
height:48px;
color:pink;
text-decoration:none;
font-size:16px;
line-height:48px;
text-align:center;
<!--这里设为-1可以让边框合并，而非叠加-->
margin-right:-1px;
}
.box:hover{
color:blue;
background-color:gray;
}
</style>
</head>
<body>
<div class='all'>
<a href='#' class='box'>首页</a>
<a href='#' class='box'>公司简介</a>
<a href='#' class='box'>解决方案</a>
<a href='#' class='box'>公司新闻</a>
<a href='#' class='box'>行业动态</a>
<a href='#' class='box'>招贤纳才</a>
<a href='#' class='box'>联系我们</a>
</div>
</body>
</html>
六、浮动：
1.浮动元素有float:left;和float:right;两种
2.浮动元素会向左或右浮动，碰到父元素边界或其他浮动元素时会停止。
3.浮动行内元素或块元素自动转化成行内块元素
4.浮动元素无法撑开父元素
5.可以用于文字环绕效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字绕图</title>
<style>
.con{
width:400px;
height:400px;
border:1px solid #000;
margin:100px auto;
}
.pic{
width:80px;
height:80px;
background-color:gold;
float:left;
}
.news{
width:400px;
background-color:green;
height:200px;
color:#fff;
}
</style>
</head>
<body>
<div class='con'>
<div class='pic'></div>
<div class='news'>测试文字测试文字测试文字测试文字
测试文字测试文字测试文字测试文字测试文字测试文字测
试文字测试文字测试文字测试文字测试文字测试文字测试
文字测试文字测试文字测试文字测试文字测试文字测试文
字测试文字
</div>
</div>
</body>
</html>
6.清除浮动：
1).在父元素中加入overflow:hidden;
2).在最后一个子元素后面加一个空的div,并赋予样式属性clear:both;(不推荐)
3).使用清浮动样式类，与处理塌陷类似，也从父元素样式类处直接调用clearfix：
.clearfix:after{
content:'';
display:table;
clear:both;
}
#扩展：既能清除浮动也能处理塌陷：
.clearfix:before,.clearfix:after{
content='';
display=table;
}
.clearfix:after{
clear:both;
}
<!--这句为了兼容IE>
.clearfix{
zoom:1;
}
七、定位
#绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
#当存在元素重叠时，可以通过设置z-index(高值在上层)来决定层级
1、相对定位：
#以原位置为起点，与左边界、上边界的距离增加50px。
#原位置依然被占用。
.box{
position:relative;
left:50px;
top:50px;
}
2、绝对定位：
#会在其父元素上寻找定位属性，找到后按该元素位置定位。
#元素脱离文档流（即解放原位置）
position:absolute;
3、固定定位：
#相对于浏览器窗口进行定位
#解放原位置
position:fixed;
八、背景
1. 放背景图片：
background-image:url(路径);
2. 设置图片横向/纵向平铺，默认是repeat铺满背景
#也可以设为no-repeat;即不重复
background-repeat:repeat-x/y;
3. 背景位置,一般配合no-repeat使用
#方位设置：后面跟两个值，一个水平方位，一个垂直方位
background-position:left/center/ritht top/center/bottom;
#像素设置：两个值分别代表图片与左边框的距离 和 与上边框的距离，可以设负值
background-position:30px 50px;
#缩写整句写法
background:url(路径) 位置 颜色 no-repeat;
4. 设置背景固定(即不随滚动条变化而变化)：
background-attachment:fixed;
九、重置文档：
#使用时在头部用link引用
#<link rel='stylesheet' type='test/css' href='路径/文档名.css'>
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{
margin:0px;
padding:0px;
}
<!--让h标签继承body内设置的字体大小-->
h1,h2,h3,h4,h5,h6{
font-size:100%;
}
ul{
list-style:none;
}
em{
font-style:normal;
}
a{
text-decoration:none;
}
img{
border:none;
}
.clearfix:before,.clearfix:after{
content:'';
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
.fl{
float:left;
}
.fr{
float:right;
}
十、权重等级：
1.!important,加在样式属性之后，权重值为10000
2.内联样式，如style，权重值为1000
3.ID选择器，如#content，权重值为100
4.类、伪类、属性选择器，如content、hover，权重值为10
5.标签选择器和伪元素选择器，如div、p、before 权重值为1
6.通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~），权重值为0
十一、圆角，阴影，透明度，rgba
1、设置圆角：
border-radius:半径/百分比（半径为50%）
2、设置阴影：
类名-shadow:水平偏移值，垂直偏移值，羽化大小，扩展大小，颜色，（inset是否内阴影）
3、设置透明度：
opacity：0.5;
filter:alpha(opacity=50);#兼容IE
4、rgba表示法：
color:rgba(r,g,b,透明度);
十二、transition动画
#设置四种属性：针对哪种属性、过渡时间、过渡运动方式、动画延迟时间
#一般结合hover使用
transition:property duration timing-function delay
#过渡方式：
linear:匀速
ease：开始和结束时慢速
ease-in:开始时慢速
ease-out:结束时慢速
cubic-bezier(n,n,n,n):曲线设置
曲线设置网站：https://matthewlein.com/ceaser/
#实现图片动态提示框
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片动态提示</title>
<link rel='stylesheet' type='text/css' href=''>
<style>
.box{
width:500px;
height:300px;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.image_size{
width:500px;
height:300px;
}
.box:hover p{
top:100px;
color:gold;
}
.box:hover{
cursor:pointer;
}
.box p{
background-color:rgba(0,0,0,0.5);
font:30px/50px 'Microsoft Yahei';
color:rgba(0,0,0,0.5);
margin-top:0;
width:500px;
height:200px;
position:absolute;
left:0;
top:300px;
transition:all 1s ease;
text-align:center;
}
</style>
</head>
<body>
<div class='box'>
<img src='image/1.jpg' class='image_size'>
<p>这是一张壁纸图片<br />代表着love and peace<br />非常棒棒哦！</p>
</div>
</body>
</html>
十三、变形：transform
1.translate(x,y):设置盒子位移
translateX、translateY、translateZ 设置三维移动
2.scale(x,y):x,y可以使用小数，设置盒子缩放
scaleX、scaleY、scaleZ 设置三维缩放
3.rotate(deg):设置盒子旋转,默认基于z轴旋转，注意设置初始状态防止bug
rotateX、rotateY、rotateZ 设置三维旋转
4.skew(x-angle deg,y-angle deg):设置盒子斜切
5.perspective(800px):设置透视距离，一般设为800px即可
6.transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7.tranform-origin 设置变形的中心点，设置的值可以是方位或偏移值，默认是center center
8.backface-visibility 设置盒子背面是否可见，设置hidden即不可见
#翻面效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style>
.box{
width:500px;
height:300px;
margin:200px auto 0;
position:relative;
transform-style:preserve-3d;
transform:perspective(800px) rotateY(0);
}
.image_size,.info{
width:500px;
height:300px;
position:absolute;
left:0;
right:0;
backface-visibility:hidden;
transition:all 2s ease;
transform:perspective(800px) rotateY(0);
}
.info{
background-color:gold;
font:50px/300px 'Microsoft Yahei';
color:white;
float:left;
text-align:center;
transform:rotateY(180deg);
}
.box:hover img{
transform:rotateY(180deg);
}
.box:hover .info{
transform:rotateY(0deg);
}
</style>
</head>
<body>
<div class='box'>
<div class='info'>这是一张图片</div>
<div><img src='image/1.jpg' class='image_size'></div>
</div>
</body>
</html>
十四、动画效果
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction
normal 默认动画结束不返回
alternate 动画结束后原路返回
8、animation-play-state 动画状态
paused 停止
running 运动
9、animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，
在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
#loading:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>loading</title>
<style>
.box{
width:400px;
height:150px;
border:1px solid black;
margin:100px auto 0;
}
.box div{
float:left;
background-color:gold;
width:40px;
height:85px;
margin:13px;
border-radius:20px;
}
.box p{
margin:0;
padding:0;
float:left;
font:20px/40px 'Microsoft Yahei';
width:400px;
text-align:center;
}
.box div:nth-child(1){
background-color:green;
animation:loading 1s ease 0s infinite alternate;
}
.box div:nth-child(2){
background-color:blue;
animation:loading 1s ease 100ms infinite alternate;
}
.box div:nth-child(3){
background-color:pink;
animation:loading 1s ease 200ms infinite alternate;
}
.box div:nth-child(4){
background-color:black;
animation:loading 1s ease 300ms infinite alternate;
}
.box div:nth-child(5){
background-color:gray;
animation:loading 1s ease 400ms infinite alternate;
}
.box div:nth-child(6){
animation:loading 1s ease 500ms infinite alternate;
}
@keyframes loading{
from{
transform:scaleY(1);
}
to{
transform:scaleY(0.3);
}
}
</style>
</head>
<body>
<div class='box'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>loading...<p>
</div>
</body>
</html>
十五、流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，
流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设
置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
#calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
#box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
十六、响应式布局
响应式布局就是使用媒体查询的方式，
通过查询浏览器宽度，不同的宽度应用不同的样式块，
每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。
响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
#相应布局的伪代码如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
十七、基于rem的布局
靠导入js插件时间，且需要转换视口。
首先了解em单位，em单位是参照元素自身的文字大小来设置尺
寸，rem指的是参照根节点的文字大小，根节点指的是html标签
，设置html标签的文字大小，其他的元素相关尺寸设置用rem，
这样，所有元素都有了统一的参照标准，改变html文字的大小，
就会改变所有元素用rem设置的尺寸大小。
十八、弹性盒模型布局
1、容器属性
display : flex
声明使用弹性盒布局
flex-direction : row | row-reverse | column | column-reverse
确定子元素排列的方向
flex-wrap : nowrap | wrap | wrap-reverse
元素超过父容器尺寸时是否换行
flex-flow : flex-direction | flex-wrap
同时设置flex-direction 和 flex-wrap
justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸确定之后，用此属性来设置flex-direction定义水平方向上的分布方式
align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸确定之后，用此属性来设置flex-direction定义垂直方向上的分布方式
align-content : flex-start | flex-end | center | space-between | space-around | stretch
设置多行子元素在垂直方向上的对齐方式
2、条目属性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同时设置flex-grow 和 flex-shrink 以及 flex-basis
flex-grow ： number
表示的是当父元素有多余的空间时，这些空间在不同子元素之间的分配比例
flex-shrink： number
当父元素的空间不足时，各个子元素的尺寸缩小的比例
flex-basis ：length | percentage | auto | content
用来确定弹性条目的初始主轴尺寸。
align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆写父元素指定的对齐方式
order : integer
改变条目在容器中的出现顺序
扫一扫
1584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
