rem和em学习笔记及CSS预处理

【rem和em学习笔记及CSS预处理】的更多相关文章

rem和em学习笔记及CSS预处理（未完待续）

以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟,收获满满! 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html{f…

rem和em学习笔记及CSS预处理

1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 parent-div中的em-div的font-size为2rem,他的基准就是html的字体大小10*2=20,并不受父元素的影响.width:10em;就是20*10,即宽度为200px; 2.重点理解: 有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小. 事实上,它们是相对于使用em单位的元素的字体大小. 父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因…

HTML+CSS学习笔记 (7) - CSS样式基本知识

HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文字是红色.</p> 注意要写在元素的开始标签里,下面这种写法是错误的: <p>这里文字是红色.</p…

前端学习：学习笔记（CSS部分）

前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <div style="…

Webpack4 学习笔记二 CSS模块转换

前言此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要特定的 loader去解析它们. css-loader: 解析css文件并且支持@import()等引入css模块 style-loader: 通过插入 <style> 标记将CSS添加到DOM中 webpack 处理loader的是 module{}, 不要写成 loader: {} rules…

Head First Html and CSS学习笔记之CSS

第七章 CSS入门元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/css" rel = "stylesheet" href = "lounge.css"> CSS包含一些简单的语句,称之为规则.典型的规则包括一个选择器,以及一个或者多个属性和值.选择器将制定规则将应用于哪些元素.记住,每个属性声明要以分号结束. 可以使…

HTML+CSS学习笔记 (12) - CSS布局模型

标签:HTML+CSS css布局模型清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型: 1.流动模型(Flow) 2.浮…

HTML+CSS学习笔记 (11) - CSS盒模型

元素分类在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<address>.<blockquote> .<form> 常用的内联元素有: <a>…

前端新人学习笔记-------html/css/js基础知识点

即将毕业的软件工程大学生一枚,秋季招聘应聘的是Android,今年来到公司实习,要求做前端开发,所以一切只有现学,现在根据视频来学习,然后开这个博客记录一下自己的学习过程,废话不多说,开写. 4月6日学到的知识点: 一:<!DOCTYPE HTML> ! 声明,注意的意思: doc document 文档的意思: type 类型的意思: html就不用解释了: 连在一起的意思就是:注意,文档的类型是HTML.也就是声明你写的文件的文档类型,方便浏览器解析. 二:<meta ch…

2、前端学习笔记之——css

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS-learning-note</title> <style type="text/css"> h1{color:red} p{font-size:20px;color:blue;font-family:"华文行…