盒子模型
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding-left: 4px; 左侧内边距
border: 3px solid red;
margin: 50px;
}
</style> padding 内边距
</head>
<body>
<div>
cfdaffshydghjgdjdnjjjjjjjjjjjjjjj
</div>
</body>
盒子大小：content内容区域+padding内边距区域+border边框宽度
例如
内边距
不建议用内边距做布局，除了水平居中
margin: 0 auto; 使盒子整体在页面中水平居中
<style>
div {
width: 600px;
height: 600px;
background-color: pink;
/* padding-top: 20px 设置 上内边距;
padding-left: 20px; 设置左内边距
padding-right: 20px; 设置右内边距
padding-bottom: 20px; 设置下内边距 */
padding: 30px;
padding: 30px 50px; 复合写法：上下，左右
padding: 10px 60px 90px; /* 复合写法：上，左右，下 */
adding: 10px 30px 60px 90px; /* 复合写法：上，右，下，左（顺时针顺序） */
}
</style>
</head>
<body>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque quae possimus temporibus! Rem, eius
voluptatibus? Veniam voluptas voluptatem inventore eaque dolorum repellat non quam. Numquam temporibus nobis
facere pariatur mollitia?
Beatae pariatur itaque at tenetur dolor nulla sapiente quam nemo! Animi praesentium labore qui esse delectus
expedita suscipit corrupti vitae, possimus est eos voluptate quos recusandae aliquid eveniet dolorem explicabo?
Vero quisquam animi reiciendis, ab velit laboriosam placeat tempore temporibus eligendi, asperiores, adipisci
molestias! Saepe modi mollitia nobis velit ipsum aspernatur accusamus perspiciatis minima nemo delectus beatae
cumque, vero voluptatem.
</div>
</body>
外边距
概念
该元素距离下一元素中间的距离是外边距
如图
margin有“边缘，页面空白”的意思
代码解释
<style>
ul li {
list-style: none;
background-color: pink;
margin-bottom: 30px;
}
span {
display: inline-block; 转化为块元素
width: 50px;
background-color: pink;
margin-right: 5px; 依次向右每两个元素间留有一定空白
margin: 40px; 盒子与页面边缘留白大小
margin: 40px 30px;
margin: 40px 30px 23px;
margin: 40px 2px 34px 40px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
<span>1</span><span>2</span><span>3</span><span>4</span>
</body>
外边距塌陷问题
<style>
.father {
width: 800px;
height: 800px;
background-color: aquamarine;
/* border: 1px solid red; 给父元素添加边框进而解决margin塌陷问题*/
padding: 5px;
}
.son {
width: 100px;
height: 100px;
background-color: pink;
/* margin-bottom: 20px; 依次向下每两个元素间留有一定空白*/
overflow: hidden;
}
一个元素可以有多个类名
.son2 {
margin-top: 10px;
}
.son3 {
margin-top: 10px;
}
.son1 {
margin-top: 300px;
} .son1并没有出现和.son2以及.son3一样的效果，反而是盒子整体与页面边缘出现了留白
/* margin塌陷问题：父元素的第一个子元素的margin-top值会被父元素抢走，进而生成边缘留白 */
解决办法：
1.给父元素添加边框
2.overflow:hidden; 偏方,无原因
/* padding: 10px 20px 40px 50xp 顺时针 */
</style>
</head>
<body>
<div class="father">
<div class="son son1">1</div>
<div class="son son2">2</div>
<div class="son son3">3</div>
</div>
<span>cnidsjkjcdscndskcm</span>
</body>
margin塌陷问题
/* margin塌陷问题：父元素的第一个子元素的margin-top值会被父元素抢走，进而生成边缘留白 */
解决办法：
1.给父元素添加边框 2.overflow:hidden; 偏方,无原因
文本溢出
<style>
div {
width: 800px;
height: 800px;
background-color: pink;
/* overflow: auto; */
/* overflow: hidden; */
/* overflow: visible;s */
}
</style>
<div>
</div>
例如
样式继承
对父元素作出样式改变，一般子元素也会随之改变
<style>
a {
text-decoration: none;
color: #807474;
}
/* div,
div span,
div a {
font-size: 40px;
} */
div {
font-size: 50px;
color: #807474;
/* padding: 13px; */
}
/* css样式的继承性
不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承
a链接最好在自身更改样式
*/
</style>
</head>
<body>
<div>
杀手锏得看懂开始<br> 利用<br>换行
<span>我是经常都是</span><br>
<a href="#">；的策略模式的流程的</a> 对父元素样式作出改变，a链接不改变
<i>cdjckdd </i>
</div>
</body>
css样式的继承性
不是所有样式都继承，只有改变之后对布局无影响的样式，才会继承 a链接最好在自身更改样式
解决padding影响盒子
box-sizing: border-box; 使得内边距和边框不影响盒子大小
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding: 40px;
border: 2px solid red;
box-sizing: border-box; 使得内边距和边框不影响盒子大小
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore quisquam aliquam dolores eligendi neque illo
velit facere deleniti nam, laboriosam quasi, ut nisi qui quae rerum. Atque ea excepturi deleniti.
</div>
</body>
效果图
flex布局
<style>
.father {
width: 800px;
height: 800px;
background-color: pink;
display: flex;
/* 排列方式 */
flex-direction: row-reverse; 从后往前排列
flex-direction: column; 从上往下竖直排列
flex-direction: column-reverse; 从下往上竖直排列
flex-direction: row; 默认从前往后排列
/* 让flex布局变为多行 */
flex-wrap: wrap;
/* flex-wrap: nowrap; 不可换行*/
/* flex-wrap: wrap; 可换行*/
/* 主轴上的布局 */
justify-content: center; 置于水平中间
justify-content: end; 置于水平尾部
justify-content: space-around;等间距排列（两边水平缘也留有一定距离，但不和内部的间距相等）
justify-content: space-evenly; 等间距排列（包括水平边缘也是等距）
justify-content: space-between; 水平边缘贴紧的平分并等距离排列
/* 侧轴方向上*/
/* align-items 单行的 align-content：多行的*/
align-items: center; 置于整体中部
/* align-items: end; 置于整体下端*/
align-items: start; 置于整体上端
align-content: start;
align-content: end;
align-content: center; 与上面三个同理，但划分为多行
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}
.son {
width: 170px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
<div class="son">3</div>
</div>
</body>
flex
设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间
<style>
.father {
display: flex; 在一行显示
width: 800px;
height: 800px;
background-color: pink;
justify-content: space-between;
}
.son {
width: 300px;
background-color: aqua;
}
.son2 {
/* order 值越小，使该元素排列在越靠前的位置 */
order: -3;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son">1</div>
<div class="son2 son">2</div>
<div class="son3 son">3</div>
</div>
</body>
定位补充
<style>
.father {
position: relative; 父相
width: 500px;
height: 500px;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
}
.son1 {
position: absolute; 子绝
/* z-index 定位中显示的优先级，决定谁先显示 */
z-index: 5;
top: 100px;
left: 50px;
background-color: aqua;
}
.son2 {
position: absolute;
z-index: 3;
top: 110px;
left: 80px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1">111</div>
<div class="son son2">222</div>
</div>
</body>
小米布局练习
<style>
* {
margin: 0;
padding: 0;
}
.goods {
display: flex;
width: 1240px;
height: 600px;
}
.left {
width: 230px;
height: 600px;
background-color: pink;
}
li {
width: 230px;
height: 275px;
list-style: none;
background-color: aqua;
}
.right ul {
display: flex;
width: 990px;
height: 600px;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
</style>
</head>
<body>
<div class="goods">
<div class="left"></div>
<div class="right">
<ul>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
<li>
<a href="#">
</a>
</li>
</ul>
</div>
</div>
</body>
浮动
<style>
img {
width: 100px;
float: left;
} 浮动会脱离文档流，不再保留原有位置
</style>
</head>
<body>
<img src="https://img1.baidu.com/it/u=3991541016,2951402135&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod consequuntur dicta illum nesciunt praesentium autem
natus deserunt odio esse, eius earum eveniet minima tempora, ipsum, ipsam sequi. Deserunt, natus et!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, ea doloribus! Autem ex error rerum nemo nostrum.
Ratione assumenda debitis quasi minus nesciunt, ex obcaecati sit atque neque. Tenetur, nostrum.
Vero voluptas dolor deserunt quas mollitia, cumque magni voluptatum non nulla ea sed, vel, dolores ex perferendis
beatae nemo accusamus consequatur totam ipsum incidunt quae inventore molestiae temporibus sit? Doloremque.
Architecto facilis sunt quas possimus eos quasi, aspernatur dolore aliquam deserunt amet quibusdam, dolores cum
beatae, ut perferendis quam esse assumenda blanditiis quis placeat ipsam repudiandae dicta. Ipsam, debitis atque.
Nemo provident unde quas iste, sunt sit, repellendus atque facere corporis, id tenetur aspernatur. Et molestiae
officiis quod tenetur vero numquam nulla in illo. Soluta quod iure ad atque quas?
Quos corrupti quaerat sint doloremque officia ullam voluptas. Distinctio maiores eaque ullam assumenda atque
asperiores officiis hic vero! Atque, doloribus unde! Vero neque mollitia nostrum minima quos praesentium, iusto
commodi.
Voluptate nam placeat dolorem facere at error exercitationem odit nihil corrupti amet neque modi enim, dolores
fugiat quos eaque! Deleniti quidem ullam sit nobis laudantium accusantium provident commodi natus dolor.
Libero, corporis. Veniam fuga laudantium, quam culpa repellat aut eius quod praesentium similique blanditiis
asperiores? Officia maiores, perferendis qui dignissimos cupiditate, unde placeat explicabo in vel repellendus non
iste aliquam?
Eligendi nulla nesciunt molestias. Consectetur quo quasi debitis magnam, nihil velit unde accusantium tempore et
error suscipit asperiores soluta ex fuga doloremque ratione vel aliquam in temporibus quidem non animi?
Ipsum molestiae fugiat sint? A amet ea eveniet. Autem deserunt nobis enim cumque ex esse facere a et commodi iste
nemo ipsam, omnis fugit suscipit sapiente dolores error dolor quo.
Laborum consequuntur voluptatum corporis cupiditate sequi? Hic non adipisci culpa natus voluptatibus neque doloribus
maiores in esse nostrum. Aperiam beatae minima ratione expedita, commodi maiores voluptate reiciendis molestias sunt
possimus.
</body>
float讲解
<style>
.father {
width: 1000px;
/* height: 1000px; */
background-color: pink;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: aqua;
}
.son2 {
background-color: blue;
float: left;
/* 浮动，会脱离文档流 不再保留原来位置 会造成在其下方的兄弟元素位置发生变化 */
/* 当子元素发生浮动时，其父元素的高度发生塌陷 */
}
.son3 {
width: 400px;
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son son1"></div>
<div class="son son2"></div>
<div class="son son3"></div>
</div>
</body>
float问题解决办法
<style>
/* ul { */
/* height: 300px; */
/* overflow: hidden; */
/* } */
ul li {
/* float: left; */
float: right;
list-style: none;
margin-right: 20px;
}
/* div {
clear: both;
} */
p {
/* clear 清除浮动 */
clear: both;
}
</style>
</head>
<body>
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<div></div>
<p>我是完全不想动位置的</p> p标签下clear:both实现清除浮动
</ul>
</body>
渐变
<style>
div {
width: 400px;
height: 800px;
background-image: linear-gradient(to right, green, pink, yellow, red); 实现颜色从左到右的渐变 不带to right，默认从上至下
}
</style>
</head>
<body>
<div>
</div>
</body>
字体图标
从阿里巴巴字体图标库下载图标至本地
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../font_3931265_h8zi8uedfw8/iconfont.css">
<script src="../font_3931265_h8zi8uedfw8/iconfont.js"></script>
<!-- <style>
span {
color: pink;
}
.icon-a-008_huoguo {
font-size: 400px;
}
</style> -->
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.icon {
font-size: 70px;
}
</style>
</head>
<body>
<span class="iconfont icon-a-008_huoguo"></span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-a-008_hanbaokuaican"></use>
</svg>
</body>
媒体查询
<style>
div {
background-color: pink;
}
/* @media only screen and (max-width:699px) and(min-width:550px){
div{
background-color: pink;
}
} */
@media screen and (min-width: 900px) {
div {
background-color: green;
}
}
@media only screen and (min-width: 320px) and (max-width: 700px) {
div {
background-color: blue;
}
}
</style>
</head>
<body>
<div>
scdscdc
</div>
</body>
默认外边距
body有默认外边距
</head>
<body>
woshinsaxnsj
<ul>
<li>cnidsjkjcdscndskcm</li>
</ul>
</body>
转换
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* 平移 */
/* transform: translate(-40px, 40px); */
/* transform: translateX(70px); 向x轴正向平移70px */
/* transform: translateY(-60px); 向y轴负向平移60px */
/* 旋转 */
/* transform: rotateZ(40deg);顺指针旋转40度 */
/* 复合写法 旋转永远放在最后一个 */
/* transform: translate(100px) rotateZ(45deg);向右平移100px，再顺指针旋转45度 */
/* transform: rotateZ(45deg) translate(100px); */
/* transform: scale(1.5); 等比例放大1.5倍*/
/* transform: scaleX(2); 沿x轴放大2倍*/
/* transform: scaleY(2); */
/* transform: skew(40deg); 扭曲效果*/
/* 向右和下移动100px 旋转45度 缩放1.5 */
transform: translate(100px, 100px) scale(1.5) rotate(45deg) ;
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
平移
左为x轴正向，下为y轴负向
transform: translate(-40px, 40px) 向x轴负向平移40px，向y轴正向平移40px
旋转
只有沿z轴旋转时才是2d的 例如 transform: rotateZ(40deg);顺指针旋转40度
复合写法 旋转永远放在最后一个
3d
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d 开启3D空间;
perspective: 800px 景深;
/* perspective-origin: 100px 200px; 设置透视点位置：观察者位置*/
}
.son {
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
transform: rotateX(45deg); X轴3D旋转
/* transform: rotateY(45deg); Y轴3D旋转*/
/* transform: rotate3d(1, 1, 0, 45deg); X轴3D旋转，Y轴3D旋转，Z轴不转 （1代表转，0代表不转）*/
backface-visibility: hidden; 背部隐藏
transform-origin: bottom; 更改当前旋转的轴线，将轴线改到底部
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
过渡
<style>
.father {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 800px;
/* perspective-origin: 100px 200px; */
}
.son {
/* transition 谁变化给谁加 */
transition: all 5s; 配合.son:hover 实现伸缩、旋转动画 all显示所有效果
width: 300px;
height: 300px;
background-color: pink;
/* transform: translateZ(-200px); */
/* transform: rotateY(45deg); */
/* transform: rotate3d(1, 1, 0, 45deg); */
/* backface-visibility: hidden; */
}
.son:hover {
width: 800px;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="father">
<div class="son">2222222</div>
</div>
</body>
动画
<style>
@keyframes myMovie {
from {
width: 200px;
background-color: pink;
}
to {
width: 800px;
background-color: aqua;
}
}
@keyframes myfirst {
0% {
width: 200px;
background-color: pink;
}
20% {
width: 400px;
background-color: green;
}
80% {
width: 800px;
background-color: red;
}
100% {
width: 1200px;
background-color: aquamarine;
}
}
div {
width: 200px;
height: 50px;
background-color: aqua;
animation: myMovie 5s infinite alternate steps(4);
animation: myfirst 5s infinite alternate steps(400);
}
</style>
</head>
<body>
<div>
</div>
</body>
