首页 前端知识 【CSS】CSS入门笔记第二弹~_css 父元素(1)

【CSS】CSS入门笔记第二弹~_css 父元素(1)

2024-08-08 22:08:07 前端知识 前端哥 283 958 我要收藏
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.边框会影响盒子实际大小

💡💡 解决方法:

  1. 测量盒子大小的时候,不量边框
  2. 如果测量时包含边框,则需要用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.外边距合并
  1. 相邻块元素垂直外边距的合并
    💡💡解决方案:
  • 尽量只给一个盒子添加 margin 值。
  1. 嵌套块元素垂直外边距的塌陷
    💡💡解决方案:
  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距。
  • 可以为父元素添加 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;

六、浮动
6.1.传统网页布局的三种方式
  • 普通流(标准流)
  • 浮动
  • 定位

标准流:

标准流: 就是标签按照规定好默认方式排列

6.2.为什么需要浮动

有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

💡💡
浮动典型应用:可以让多个块级元素一行内排列显示

​ 网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

6.3.什么是浮动

float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

 选择器 { float: 属性值; }
 属性值:none left right

6.4.浮动特性
  • 浮动元素会脱离标准流(脱标)(脱标:浮动的盒子不再保留原先的位置)
  • 浮动的元素会一行内显示并且元素顶部对齐

浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。

  • 浮动的元素会有行内块的特性
6.5.浮动元素经常和标准流父级搭配使用

💡💡为了约束浮动元素位置, 网页布局一般采取的策略是:

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准则·

七、网络布局注意点
7.1.浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

7.2.一个元素浮动了,理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动,以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

八、清除浮动
8.1.为什么需要清除浮动

由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子。

8.2.清除浮动本质

💡💡本质:

  • 清除浮动元素造成的影响:浮动的子标签无法撑开父盒子的高度
  • 清除浮动的本质是清除浮动元素脱离标准流造成的影响

如果父盒子本身有高度,则不需要清除浮动

8.3.清除浮动样式
 选择器{clear:属性值;} 

  • 用 clear: both;比较多
  • 清除浮动的策略是: 闭合浮动.
8.4.清除浮动之额外标签法

额外标签法也称为隔墙法,是 W3C 推荐的做法。

💡💡方法:

额外标签法会在浮动元素末尾添加一个空的标签
如 <div style="clear:both"></div>,或者其他标签(如<br />等)

  • 优点: 通俗易懂,书写方便
  • 缺点: 添加许多无意义的标签,结构化较差
  • 注意: 要求这个新的空标签必须是块级元素
8.5.清除浮动之父级添加 overflow 属性

可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll

💡💡

overflow:hidden | auto | scroll;

  • 优点:代码简洁

img
img

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

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

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

级元素

8.5.清除浮动之父级添加 overflow 属性

可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll

💡💡

overflow:hidden | auto | scroll;

  • 优点:代码简洁

[外链图片转存中…(img-2fvcpbRc-1714430707209)]
[外链图片转存中…(img-Vr4UNG3j-1714430707210)]

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

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

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14992.html
标签
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!