day4笔记+作业

最新推荐文章于 2024-08-23 10:40:59 发布

无奈¬_¬｀691

最新推荐文章于 2024-08-23 10:40:59 发布

阅读量106

点赞数

文章标签：笔记 css 前端

本文链接：https://blog.csdn.net/weixin_74829085/article/details/131636731

版权

这篇文章详细介绍了CSS中的盒子模型，包括div元素的宽度、高度、内边距和外边距设置。接着讨论了内边距的多种表示方式以及外边距的使用，特别提到了外边距塌陷问题及其解决方案。文章还深入探讨了flex布局，包括方向、排列方式、对齐方式等，并展示了浮动元素的影响及清除浮动的方法。最后，提到了定位、过渡、动画和媒体查询等其他重要CSS概念和技术。

摘要由CSDN通过智能技术生成

01-盒子模型

div {

width: 300px;

height: 300px;

background-color: pink;

padding-left: 4px;

border: 3px solid red;

margin: 50px;

}

02-内边框

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;

/* 上，左右，下 */

padding: 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>

03-外边距

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>

</ul>

04-外边距塌陷问题

为了防止外边线塌陷

.father {

width: 800px;

height: 800px;

background-color: aquamarine;

/* border: 1px solid red; */

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;

}

/* margin塌陷问题

父元素的第一个子元素的margin-top值会被父元素抢走

给父元素添加边框

overflow:hidden; -------偏方

/* padding: 10px 20px 40px 50xp 顺时针 */

</style>

</head>

<body>

</div>

<span>cnidsjkjcdscndskcm</span>

05-文本溢出

div {

width: 800px;

height: 800px;

background-color: pink;

/* overflow: auto; */

/* overflow: hidden; */

/* overflow: visible;s */

}

</style>

06-样式继承

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>

<span>我是经常都是</span><br>

<a href="#">；的策略模式的流程的</a>

<i>cdjckdd </i>

</div>

07-解决padding影响盒子大小问题

* {

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>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

flex

</a>

</li>

</ul>

</div>

08-flex布局

.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>

09-flex

.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>

10-定位补充

.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>

11-浮动

img {

width: 100px;

float: left;

}

</style>

li：

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.

12-float讲解

.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;

}

13-float问题解决办法

/* 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>

<p>我是完全不想动位置的</p>

</ul>

14-渐变

div {

width: 400px;

height: 800px;

background-image: linear-gradient(to right, green, pink, yellow, red);

}

15-字体图标

<!-- <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>

<use xlink:href="#icon-a-008_hanbaokuaican

"></use>

</svg>

16-媒体查询

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>

17-默认外边距

woshinsaxnsj

<ul>

<li>cnidsjkjcdscndskcm</li>

</ul>

18-2d转换

.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); */

/* transform: translateY(-60px); */

/* 旋转 */

/* transform: rotateZ(40deg); */

/* 复合写法旋转永远放在最后一个 */

/* transform: translate(100px) rotateZ(45deg); */

/* transform: rotateZ(45deg) translate(100px); */

/* transform: scale(1.5); */

/* transform: scaleX(2); */

/* transform: scaleY(2); */

/* transform: skew(40deg); */

/* 向右下移动100px 旋转45度缩放1.5 */

transform: translate(100px, 100px) scale(1.5) rotate(45deg);

}

</style>

</head>

<body>

</div>

19-3d

.father {

width: 300px;

height: 300px;

border: 1px solid black;

margin: 100px auto;

transform-style: preserve-3d;

perspective: 800px;

/* perspective-origin: 100px 200px; */

}

.son {

width: 300px;

height: 300px;

background-color: pink;

/* transform: translateZ(-200px); */

transform: rotateX(45deg);

/* transform: rotateY(45deg); */

/* transform: rotate3d(1, 1, 0, 45deg); */

backface-visibility: hidden;

transform-origin: bottom;

}

</style>

</head>

<body>

</div>

20-过渡

.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;

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>

21-动画

@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>

作业：

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<li><a href="#">小爱开放平台</a></li>

<li><a href="#">下载APP</a></li>

<li><a href="#">Select Location</a></li>

</ul>

</div>

<li><a href="#">Redmi红米</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="#">手机电话卡</a></li>

<li><a href="#">笔记本显示器</a></li>

<li><a href="#">家电插线板</a></li>

<li><a href="#">智能路由器</a></li>

</ul>

</div>

<ul>

</ul><a href="#"></a>

</div>

<ul>

</ul>

</div>

</body>

</html>

无奈¬_¬｀691

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
day4笔记+作业

<img src="images/app_btn5.png" alt="">以旧换新</a></li><li class="first6"><a href="#"><img src="images/app_btn6.png" alt="">话费充值</a></li><li class="first4"><a href="#"><img src="images/app_btn4.png" alt="">米粉卡
复制链接

扫一扫