CSS笔记小结

最新推荐文章于 2021-12-17 09:08:54 发布
最新推荐文章于 2021-12-17 09:08:54 发布
阅读量197 收藏
点赞数 1
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43405946/article/details/113101363
版权

CSS选择器权重计算：

  • !important > 内联样式 > id选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器

一侧顶宽/一侧自适应

  • float + margin
  • float + overflow
  • flex

对BFC/IFC的理解

  • BFC：块级格式上下文，可以理解成一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干

  • 触发BFC的条件是：

    • 根元素或其它包含它的元素

    • 浮动元素，float不是none

    • 绝对定位元素。元素position：absolute / fixed

    • display的值是inline-block，table-cell，flex，table-caption或者inline-flex

    • 具有overflow不为visible的块元素

    • 弹性盒：flex

  • BFC的布局规则

    • 内部的Box会在垂直方向，一个接一个的放置
    • Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的Box的margin会发生重叠
    • BFC的区域不会与float box重叠

  • BFC约束规则：

    • 内部的盒会在垂在方向一个接一个排列
    • 浮动盒区域不叠加到BFC上
    • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
    • 处于同一个BFC中的元素相互影响，可能会发生外边距重叠

  • BFC可以解决的问题

    • 清除浮动
    • 自适用两列布局
    • 垂直外边距重叠问题

IFC：内联格式化上下文，IFC高度由包含行内元素中最高的实际高度计算而来，

  • IFC触发条件：块级元素仅包含内联级别元素

  • 形成条件非常简单，需要注意的是当IFC有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC，

  • IFC布局规则

    • 子元素水平方向横向排列，并且垂直方向起点为元素顶部
    • 子元素只会计算横向样式空间，垂直方向样式空间不会被计算
    • IFC中的元素会在一行中从左到右排列
    • 在一行上的所有元素会在该区域形成一个行框
    • 行框的元素遵循text-algin 和 vertical-aligin
    • 行的高度为行框中最高元素的高度

  • IFC解决的问题

    • 解决元素垂直居中
    • 多个文本元素行高不一致排列混乱

水平居中有哪几种方式

  • 水平居中：行内元素：给其父元素设置text-align：center 即可实现水平居中
  • 若是块级元素，该元素设置margin：0 auto即可
  • 若是块级元素，设置父元素为flex布局，子元素设置margin： 0 auto即可
  • 使用flex，justify-content：center
  • position + transfrom

垂直居中

  • 若元素是单行文本，则可设置line-height等于父元素即可
  • 如果是块级元素，设置父元素为flex布局，子元素设置margin： auto 0即可
  • 若元素是行内块级元素，基本思想史使用display：inline-block，vertical-algin：middle和一个伪元素让内容块处于容器中央
  • 居中元素高度不定：可用vertical-algin属性，需要设置父元素display：table，子元素display：table，vertical-aligin：middle
  • flex垂直居中使用display：flex；align-items：center
  • 设置父元素相对定位，可用transform

水平垂直居中

  • Flex布局 子元素是块级元素 .box{ justify-content:center;align-items:center}
  • 绝对定位实现：

CSS—position

  1. static：静态定位
    对象遵循标准文档流中，top right bottom left 等属性失效
  2. relative：相对定位
    对象遵循标准文档流，依赖top right left bottom 等属性相对于该对象在标准文档流中的位置进行偏移，同时可通过z-index定义层叠关系，相对该对象处于标准文档流中的位置依据left top进行定位
  3. absolute：绝对定位
    对象脱离标准文档流，使用top bottom left right 等属性进行绝对定位（相对于static定位以外的第一个父元素进行绝对定位），同时可通过z-index定义层叠关系
  4. fixed 固定定位
    对象脱离标准文档流，使用top left right bottom等属性进行绝对定位i，同时可通过z-index定义层叠关系，相对于浏览器窗口进行绝对定位
三水草肃
关注
专栏目录
父元素高度塌陷解决问题
weixin_43514933的博客
10-24 349
父元素高度塌陷解决问题 方法1：额外标签法 在最后一个浮动标签后，新加一个标签，给其设置clear：both；（不推荐） 优点：通俗易懂，方便 缺点：添加无意义标签，语义化差 2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐） 通过触发BFC方式，实现清除浮动 优点：代码简洁 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素 3.使用after伪元素清除浮动（推荐使用） 优点：符合闭合浮动思想，结构语义化正确 缺点：ie6-7不支持伪元素：a
自学web前端笔记小结---CSS3
qq_41801762的博客
09-15 704
CSS3笔记 CSS3选择器规范地址： 问题： 1.CSS:cascading style sheets（层叠样式表） 面试常问 2.样式表及组成关系：由一条条规则（选择器+声明块）组成 笔试常考 声明：CSS属性+CSS属性值组成的键值对 3.浏览器读取编译CSS的顺序：从右往左 eg.div ul li .test{ } 为什么？有机会一次选中目标元素（算法复杂度低） 4...
【CSS】从外边距塌陷引出——BFC 是什么？
sparks42的博客
09-18 656
举个例子： 父级和子级之间，给子级上边的外边距，父级会跟着子级下来 <div class="dad"><div class="son"></div></div> .dad { width: 100px; height: 100px; background: red; border-top:1px solid; /* 这句不加就会塌陷 */ } .son { width: 50px; height: 50px; margin
父元素高度塌陷
mutouren_abc的博客
12-17 193
浮动元素使其父元素高度塌陷 情况描述： 给一个元素设置浮动之后float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。 原因： 当元素设置浮动后，会自动脱离文档流，翻译成白话就是说，元素浮动后，就不在整个文档流的管辖范围，那么它之前存在在父元素内的高度就随着浮动不复存在了，而此时父元素会默认自己里面没有任何内容（前提是未给父元素设置固定高度，如果父元素本身有固定高度，就不会出现这种情况） 解决方法： .
前端Tip-父级元素的高度塌陷问题
weixin_38271901的博客
08-12 925
一、什么是高度塌陷？ 在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的（子多高，父多高）但当子元素设置浮动之后，子元素会完全脱离文档流，父元素还在文档流中，此时父元素的高度没有子元素撑起，从而导致父元素高度塌陷。（简单说：包含有浮动元素的上一级的元素高度为0，下面的元素就会上去，这样导致页面布局混乱）如下： <!--html代码--> <div class="father"> 我是父盒子 <div class="box
“父元素高度塌陷”问题
ajaj_xiaoxiaohei的博客
09-24 356
CSS 小结笔记之变形、过渡与动画的示例
12-14
1、过渡 transition  过渡属性用法： transition :ransition-property transition-duration transition-timing-function transition-delay  可以一起指定也可以分别单独指定 transition-property: 是要过渡的...
CSS完整笔记
qq_24584471的博客
10-23 1366
1、什么是CSS 学习的路线 1、css是什么 2、css怎么用 3、css选择器（重点+难点） 4、美化网页（文字，阴影，超链接，列表，渐变…） 5、盒子模型 6、浮动 7、定位 8、网页动画（特效效果） 1.1 什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动… 1.2 发展史 CSS 1.0 CSS 2.0 DIV() + CSS, HTML与CSS结构分离的思想，网页变得简单，SEO CSS
DIV+CSS学习笔记总结篇
qianduan666a的博客
07-29 892
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML 负责外观的css（层叠样式表） 负责行为
父元素高度塌陷的原因及解决（清除浮动）
qq_40664253的博客
07-27 1179
hhhhh
父级元素未设置高度和宽度时高度塌陷问题的解决方法
12-13
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”，如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”的问题很简单： 1.浮动父级元素 如果让父级元素浮动，父级元素的高度就会扩大，直到完全包含它里面的浮动元素，虽然这个方法很奇怪，但是很有效。如果选择这种方法，一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方。 2.利用overflow:hidden,zoom:1 复制代码代码如下: { 　　overflow:hidden; 　　zoom:1; } overfl
父元素塌陷
m0_57247555的博客
11-25 135
1.什么是父元素塌陷 父元素中的子元素设置了浮动属性，会造成父元素高度塌陷，所以就有了下面那个图的效果 <div class="parent"> safasdasd <div class="child">aaa</div> </div> .parent { height: 400px; width: 400px; background-color: blue; /* overfl
解决父元素高度塌陷
jdsfui的博客
03-03 548
方法1. 给父元素添加overflower：hieder 缺点：当子元素有定位设置，定位到父元素外面，不希望溢出部分溢出隐藏时就不行了 方法2. 在最后浮动的元素下方添加空div，并给该元素添加声明： clear：both，height：0，overflow：hidder 缺点：在HTML结构文档中会形成很多冗余代码 方法3. 在父元素选择器上进行设置： div:after{content：",”...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
weixin_39825941的博客
12-21 265
一、题目：谈一谈你对CSS盒模型的认识专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面：(1)基本概念：content、padding、margin。(2)标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。(3)CSS如何设置这两种模型(即：如何设置某个盒子为其中一个模型)？如果回答了上面的第二条，还会继续追问这一条。(4)JS如何设置、...
position:fixed 绝对定后后,父元素没有高度如何解决
sunluyi的博客
03-15 1764
一种: 直接对没有高度的元素家 padding-top， 有点旁门左道的感觉。实现快。二种: 外层nav必须加高度, 用里边class来绝对定位。解决父元素没有高度的问题。更多CSS小技巧查看：孙鲁意博客网站...
学习日记——解决父元素高度塌陷问题
qq_42660453的博客
11-01 116
父元素高度不给，子元素又加了浮动，父元素就会出现塌陷问题 解决办法： 父元素div::after{ content:""; clear:both; display:block; }
解决浮动引起的父元素高度塌陷
q354636996的博客
09-01 270
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; #nav{ backgro
html中解决父元素高度问题,css中父元素高度塌陷是什么意思，如何解决？
weixin_39823269的博客
06-07 335
首先得回答什么是父元素高度塌陷：在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。一下是举例说明:.box1{border:10pxredsolid;}.box2{background-color:yellow;width:100px;height:100px...
HTML与CSS基础学习笔记
“html和css笔记，包括HTML基础、XHTML注意事项、常用标签等内容，结合了书籍、网站和知名专家的资源，以及各种网页调试工具的介绍。” HTML与CSS是构建网页设计的基础，它们分别负责网页的结构和样式。HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值