CSS学习笔记

最新推荐文章于 2023-10-20 12:40:31 发布

沉淀技术这十年

最新推荐文章于 2023-10-20 12:40:31 发布

阅读量504

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_37023928/article/details/106159960

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、CSS盒子模型

1.1盒子模型的一些问题

1.1.1叠加问题

<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
<style>
    #box1{width:200px;height: 200px;background: red;margin-bottom: 30px}
    #box2{width:200px;height: 200px;background: blue;margin-top: 30px}
</style>

运行效果：
在这里插入图片描述
上面的界面并没有产生60px的间距，发生了重叠。

如何解决上面的问题呢？让一个盒子给出margin即可，别两个盒子一起给值。

1.1.2margin传递问题

margin传递问题只出现在嵌套结构中，且只有margin-top有传递的问题，其它三个方向不存在这个问题

<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
<style>
    #box1{width:200px;height: 200px;background: red;}
    #box2{width:50px;height: 50px;background: blue;margin-top: 30px}
</style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6x8VwgbW-1589631720646)(C:\Users\TangLiPing\AppData\Roaming\Typora\typora-user-images\1589615184519.png)]

父元素跟随距离了30px.

解决方式：

1、添加边框

#box1{width:200px;height: 200px;background: red;border: 1px solid}

2、使用padding

#box1{width:200px;height: 170px;background: red;padding-top: 30px}
#box2{width:50px;height: 50px;background: blue;}

3、BFC规范(暂时没有讲解)

1.2左右自适应

<body>
    <div id="box1"></div>
</body>
<style>
    #box1{width:500px;height: 200px;background: red;margin: auto}
</style>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lhIpTf2m-1589631720647)(C:\Users\TangLiPing\AppData\Roaming\Typora\typora-user-images\1589616074587.png)]$

上下自适应(后面的学习过程讲解)

1.3宽度设置问题

<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
<style>
    #box1{width:500px;height: 200px;background: red;}
    #box2{width:100%;height: 100px;background: blue;padding-left: 50px;border-left: 20px black solid}
</style>

div嵌套：子元素的宽度大于父元素(padding-left: 50px)，撑开了

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Y0HOHnM-1589631720648)(C:\Users\TangLiPing\AppData\Roaming\Typora\typora-user-images\1589616691048.png)]$
怎么解决呢？

将width:100去掉即可。

1.4盒子模型练习

1.5标签分类

1.5.1按照类型划分

block：

div p ul li h1

1、独占一行

2、不写宽度的时候，与父的宽度相同

3、支持所有的样式

4、是一块矩形

inline:

span a em image strong

1、挨在一起

2、有些元素不支持 width、height、margin、padding

3、所占的区域不一定是矩形

4、不写宽的时候，宽度由内容决定

布局一般用块标签，修饰文本一般用内联标签。

inline-block:

input select

挨在一起，但是支持宽高

它有内联和块的特性。

1.6display显示

<body>
    <div id="box1">块1</div>
    <div id="box2">块2</div>
</body>
<style>
    div{width:500px;height: 200px;background: red;display: inline}
</style>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TI5R0any-1589631720650)(C:\Users\TangLiPing\AppData\Roaming\Typora\typora-user-images\1589618800669.png)]$

上面将块级元素显示成了行级元素。

display：

none、block、inline、inline-block

注意：

display=node,是不占用空间的隐藏

visibility=hidden,占用空间的隐藏

1.7溢出

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存失败,源站可能有防盗链机制,建议将图片保存下来直接上传下上传(iBQsuVYgS-158963172b651)(C:\Users\TangLiBing\AppData\Roaming\Typora\typora0user-images\PO-1519438963135.png)(C:\Users\TangLiPing\AppData\Roaming\Typora\typora-user-images\1589619433135.png)]$

在这里插入图片描述

可以设置滚动：

在这里插入图片描述

1.8透明度选择

在这里插入图片描述
rgba只对指定的样式透明，例如上面只对背景进行透明，文字不影响

在这里插入图片描述

1.9最大最小宽高

在这里插入图片描述
设置了最大或者最小宽高，会自适应。

自适应屏幕的高：

在这里插入图片描述

1.10CSS默认样式

没有默认样式的：div span

有默认样式的：body、p、h1、li、a

1.11重置css样式

在这里插入图片描述

二、Photoshop切图

三、float浮动

3.1浮动的基本概念

<body>
    <div id="box1">块1</div>
    <div id="box2">块2</div>
</body>
<style>
    #box2{width:500px;height: 200px;background: red;}
    #box1{width:200px;height: 100px;background: yellow;float: left }
</style>

box1浮起来了：

在这里插入图片描述

如果将box2也进行浮动，那么它们就并列起来了：

#box2{width:500px;height: 200px;background: red;float: left}

在这里插入图片描述

3.2浮动的注意事项

1、浮动只会影响后面的元素

2、内容默认提升半层

3、默认宽度根据内容决定

4、多个浮动放不下时，换行排列

3.3清除浮动

沉淀技术这十年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录