- * + [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 属性将阴影应用于文本
💡💡
text-shadow: h-shadow v-shadow blur color;
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
hadow blur spread color inset;
###### 5.3.文字阴影
>
> CSS3 中,我们可以使用 text-shadow 属性将阴影应用于文本
>
>
>
💡💡
text-shadow: h-shadow v-shadow blur color;
[外链图片转存中...(img-kYiYdwHC-1714685036482)]
[外链图片转存中...(img-awji9EzW-1714685036482)]
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**