【前端】相信你会用到的一篇笔记---CSS篇(1)
个人博客:smile小站
欢迎来访,欢迎互换友链
1.什么是 CSS ? CSS有什么用?
css 是层叠样式表,用于改变网页的布局。例如字体,颜色,大小,间距等
2. CSS语法
CSS是一种基于规则的语言,您可以定义规则来指定应应用于网页上特定元素或元素组的样式组
选择器 {属性名1: 属性值1;属性名2: 属性值2;
}
css 声明包括:选择器和属性组(属性名:属性值)
3. CSS 是如何工作的?
- 浏览器加载HTML
- 将HTML转换为DOM
- 浏览器将获取HTML文档链接的大多数资源,例如嵌入式图像和视频…以及链接的CSS
- 浏览器解析提取的CSS,并根据选择器类型将不同的规则分类为不同的“存储桶”,例如元素,类,ID等。根据找到的选择器,它确定应将哪些规则应用于DOM中的哪些节点,并根据需要向其附加样式(此中间步骤称为渲染树)。
- 将渲染树放置在规则应用到其后应出现的结构中
- 页面的视觉显示在屏幕上显示(此阶段称为绘画)
4. CSS 如何使用
CSS应用于文档的三种方法:使用外部样式表,内部样式表和内联样式。
5. CSS 选择器
CSS选择器是CSS规则的第一部分。它是元素和其他术语的一种模式,它告诉浏览器应选择哪些HTML元素以将规则内的CSS属性值应用于它们。
选择器类型:
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [属性名=“属性值”]
6、伪类 :hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
选择器权重:
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表元素选择器和伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
6.什么是 CSS 盒子模型
完整的CSS盒模型适用于块盒,内联盒仅使用盒模型中定义的某些行为。该模型定义了框的不同部分(边距,边框,填充和内容)如何共同创建一个可以在页面上看到的框。
盒子组成:
- 内容框 content
- 填充框 padding
- 边框 border
- 边距框 margin
标准盒子模型: 实际宽/高 = width/height + padding + border
IE盒子模型: 实际宽/高 = width/height
7. CSS 浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
元素浮动的特性:
- 浮动的元素脱离了标准文档流,摆脱块级元素和行内元素的限制
- 浮动的元素存在相互贴靠的效果,当宽度不够的时候,会出现自动换行
- 浮动的元素虽然脱离了标准文档流,但是没有脱离文本流,可以出现被字包围的效果
- 浮动之后的元素会存在收缩的效果,当一个块级元素没有设置宽度的时,当块级元素浮动之后,就会失去高度
- 当父元素不设置高度的时候,多个子元素的高度和撑起了父元素的高度;当设置浮动后,子元素最高的高度撑起了父元素的高度。
- 浮动元素能挡住盒子,但挡不住盒子里面的文字
浮动的弊端:
- 导致高度塌陷,当子元素同时设置浮动后,父元素失去支撑,父元素的高度消失,缩成一条线。
- 解决办法:在父元素失去高度,发生塌陷之后,可以给父元素添加高度或者设置overflow:hidden的方法进行解决高度塌陷的问题。
- 页面结构的不稳定性,子元素浮动,导致标准文档流出现空白区域。
- clear:both; 去进行解决,这也是称之为隔墙法。
清除浮动:
- 父级添加overflow: hidden;
- 子元素浮动了,会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性,就可以解决浮动带来的影响。
- 通过属性clear:both;达到清除浮动的目的;
- 元素浮动后,只需要在浮动元素添加多一个块级元素,并添加clear: both;属性,便可以达到清除浮动的目的。
- 通过给父级元素添加伪类after,达到清除浮动的目的;
- 这种方式也是使用clear: both;的方式达到效果,只是变相的使用了伪类after,使得页面结构更简洁,也是常用的清理浮动的方式。
- 给父级元素加高度(不推荐使用,它只适合高度固定的布局,一般父盒子都是为由内容撑起来)
- 给父级元素添加overflow:auto(缺点:内部宽高超过父级div时,会出现滚动条,不推荐)
- 给父级元素添加浮动(缺点:会产生新的浮动问题,不推荐)
- 给父级元素添加display:table;(不推荐)
【前端】相信你会用到的一篇笔记---CSS篇(1)相关推荐
- 前端面试分享:秋招总结(html和css篇)
今年秋招结束了,虽然拿到的offer不多,不能和大佬们相比,但是自己已经满足了.秋招的过程中一直在总结面试遇到的一些问题,今天按照知识板块做一个整理,希望能有助于要求职的各位. 一. Html相关 ...
- 前端面试笔记-CSS篇
目录 选择器的权重和优先级 盒模型 标准盒模型和替代模型(IE) 块级盒子与内联盒子 隐藏一个元素 Position 文档流 定位 z-index 浮动 如何清除浮动 包含块与控制框 BFC 外边距折 ...
- 前端学习 课堂笔记 CSS篇(四)浮动
使用结构伪类选择器在HTML中定位元素 1.作用与优势: 作用:根据元素在HTMIL中的结构关系查找元素 优势:减少对于HTML中类的依赖,有利于保持代码整洁 场景:常用于查找某父级选择器中的子元索 ...
- 【前端重构技能天赋】(二)——Javascript、CSS篇
少叙闲言 承接上一篇,这篇是关于JS.CSS的一些优化,相信很多大家都非常了解了,并且实际上也都在这么做,但我想,很多人和我一样,只知道规范这么做,并不太了解到底为啥这么做,到底好处在哪了? Abou ...
- 前端计划——面试题总结-CSS篇
前端面试之CSS篇 1.三种基本引入方式 外部样式表 <link rel="stylesheet" type="text/css" href=" ...
- 前端代码标准最佳实践:CSS篇
上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...
- java程序员 css_好程序员Web前端分享前端CSS篇
今天好程序员跟大家分享的文章是CSS篇.Web前端技术由html.css和javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很 ...
- 互联网公司2014前端笔试面试题:HTML/CSS篇
Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...
- 前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
最新文章
- epoch如何设置_使用TFRecordDataset时如何设置epoch计数器?
- python3 hmac算法简介
- hdu1024Max Sum Plus Plus
- 第一步:Axure 使用svn多人协作产品开发(提交文件)
- C# 操作Sqlite
- 记一次神奇的sql查询经历,group by慢查询优化(已解决)
- Pytorch squeeze() 和 unsqueeze() 方法区别
- java day05【数组】
- js 跨域访问 找了好长时间
- 流媒体技术笔记(DarwinStreamingServer相关)
- linux系统live管理界面,live-系统爱好者
- win10专业版开机画面模糊_为什么win10有些软件显示模糊_win10软件界面模糊的解决办法...
- 2022年广东省安全员A证第三批(主要负责人)考试题及广东省安全员A证第三批(主要负责人)复审模拟考试
- 【Internet Explorer】IE11卸载不干净导致无法安装IE10
- 什么是安全测试?一文教会你如何开展系统安全测试…
- Objective中调用Swift代码
- WebService接口调试如此简单
- OA的意思就是办公自动化的意思,OA系统的英文全称是:Office Automation System
- 什么是电源域(power domain)
- 2021.12.11 烹饪