2024年大数据最新【CSS】CSS入门笔记第二弹~_css 父元素(1)

2401_84182428

于 2024-05-02 21:39:46 发布

阅读量670

点赞数 20

分类专栏：程序员文章标签：大数据 css 笔记

本文链接：https://blog.csdn.net/2401_84182428/article/details/138400804

版权

程序员专栏收录该内容

130 篇文章 0 订阅

订阅专栏

			+ [4.5.外边距](#45_197)
			+ [4.6.外边距合并](#46_217)
			+ [4.7.清除内外边距](#47_231)
	- [五、CSS3新增样式](#CSS3_242)
	- * + [1.1.圆角边框](#11_243)
			+ [5.2.盒子阴影](#52_258)
			+ [5.3.文字阴影](#53_267)
	- [六、浮动](#_276)
	- * + [6.1.传统网页布局的三种方式](#61_277)
			+ [6.2.为什么需要浮动](#62_287)
			+ [6.3.什么是浮动](#63_296)
			+ [6.4.浮动特性](#64_304)
			+ [6.5.浮动元素经常和标准流父级搭配使用](#65_312)
	- [七、网络布局注意点](#_320)
	- * + [7.1.浮动和标准流的父盒子搭配。](#71_321)
			+ [7.2.一个元素浮动了，理论上其余的兄弟元素也要浮动。](#72_325)
	- [八、清除浮动](#_332)
	- * + [8.1.为什么需要清除浮动](#81_333)
			+ [8.2.清除浮动本质](#82_337)
			+ [8.3.清除浮动样式](#83_345)
			+ [8.4.清除浮动之额外标签法](#84_354)
			+ [8.5.清除浮动之父级添加 overflow 属性](#85_overflow__371)
			+ [8.6.清除浮动之父级添加after伪元素](#86after_386)
			+ [8.7.清除浮动之父级添加双伪元素](#87_408)

一、元素显示模式的分类

1.1.块元素

常见的块元素
div最常用啦
💡💡

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

块级元素的特点：

自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。
文字类的元素内不能放块级元素

1.2.行内元素

常见的行内元素
💡💡

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度为自身宽度

1.3.行内块元素

常见的行内块元素
💡💡

<img />、<input />、<td>

行内块元素的特点：

和相邻行内元素在一行上，但是他们之间会有空白缝隙。
一行可以显示多个
默认宽度就是它本身内容的宽度。
高度，行高、外边距以及内边距都可以控制

1.4.元素显示模式的转换

一个模式的元素需要另外一种模式的特性

💡💡转换方式：

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

二、CSS的背景

2.1. 背景颜色

💡💡

{background-color: 定义元素的背景颜色}

background-color: 颜色值;
#  默认为透明色
background-color:transparent;

2.2. 背景图片

💡💡

background-image:none|url

2.3. 背景平铺

💡💡

background-repeat:repeat|no-repeat|repeat-x|repeat-y
#   平铺|不平铺|横向平铺|纵向平铺

2.4. 背景图片位置

💡💡

background-position:x y;
# position:  top|bottom|left|right|center  方位名词

2.5. 背景图片固定

💡💡

background-attachment:scroll|fixed
# scroll  随对象内容而滚动
# fixed  背景图形固定

2.6. 背景复合写法

💡💡

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background:pink url repeat fixed  top;

2.7. 背景色半透明

💡💡

background:rgba(0,0,0,0.3);
# z最后一个参数是alpha透明度  取值范围在0~1

三、CSS三大特性

3.1.层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

💡💡样式冲突就近原则样式不冲突，不会层叠

3.2.继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。

💡💡字标签会继承父标签的某些样式

3.3.优先级

当同一个元素指定多个选择器，就会有优先级的产生

💡💡 优先级很重要很重要要记牢

考虑选择器权重
越细分权重越大
继承的权重为0

通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为 1000, !important 无穷大.
💡💡

权重表格：

选择器	选择器权重
继承	0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式，style=‘’	1,0,0,0
！important	无穷大 =指定

四、CSS盒子模型

网页布局的核心本质：就是利用 CSS 摆盒子

4.1.边框

💡💡

border:border-width||border-style||border-color

/\*简写 无顺序\*/
border:1px solid red;
/\*分开写 这是上边框 其余同理\*/
border-top:1px solid red;

💡💡边框样式:

none 默认无
solid 单实现最常用
dashed 虚线
dotted 点线

4.2.表格的细线边框

💡💡

border-collapse:collapse;
/\*collapse合并\*/

4.3.边框会影响盒子实际大小

💡💡 解决方法:

测量盒子大小的时候，不量边框
如果测量时包含边框，则需要用width/height减去边框宽度

4.4.内边距

padding 属性用于设置内边距，即边框与内容之间的距离。

padding-top 上内边距
padding-bottom 下
padding-left 左
padding-right 右

💡💡

值的个数	表达意思
padding:5px;	1个值，上下左右都有5像素内边距
padding:5px 10px;	2个值，上下边距为5像素，左右为10像素
padding:5px 10px 20px;	3个值，上内边距为5像素，左右为10像素，下为20像素
padding:5px 10px 20px 30px;	4个值，上右下左，顺时针

4.5.外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

margin-top 上外边距
margin-bottom 下
margin-left 右
margin-right 左
💡💡
margin间写表达方式和padding一样
外边距可以让盒子水平居中


.header {width:200px;
  margin:0 auto;}
/\*块级元素水平居中\*/

行内元素或者行内块元素水平居中给其父元素添加text-align:center

4.6.外边距合并

相邻块元素垂直外边距的合并
💡💡解决方案：

尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷
💡💡解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距。
可以为父元素添加 overflow:hidden。

4.7.清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

💡💡

\* {
    padding:0;   /\* 清除内边距 \*/
    margin:0;    /\* 清除外边距 \*/
  }

五、CSS3新增样式

1.1.圆角边框

CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius 属性用于设置元素的外边框圆角

 border-radius:length;

💡💡

参数值可以为数值或百分比的形式
如果是正方形，设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性,分别代表左上角、右上角、右下角、左下角
分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

5.2.盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

 box-shadow: h-shadow v-shadow blur spread color inset;

5.3.文字阴影

CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本

💡💡

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

 box-shadow: h-shadow v-shadow blur spread color inset;