选择器指的是，在标签中的
hello-world
你好
伪类标签还可以这样用：
/*当鼠标移动到应用menu样式的标签上时，它下面应用b的标签应用一下样式*/
.pg-head .menu:hover .b{
color: red;
}
注意：必须是标签内的子标签才可以应用，如果改成
五、CSS优先级和继承
CSS优先级：
应用的优先级，按照选择器的权重规则来决定。当权重相同时，按照就近原则：style内联 > 书写距离近 > 书写距离远。
内联样式权重为 1000
ID选择器权重为 100
class选择器权重为 10
元素选择器权重为 1
权重计算永不进位
例如：
wooohoo
CSS的继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如body中定义了字体颜色，它也会应用到字标签的文本中。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。因此任何显示申明的规则都可以覆盖其继承样式。
此外，CSS继承也是有限制的，有一些属性不能被继承，如：border，margin，padding，background等。
另外：!important 声明方式强制样式生效，不推荐使用，因为大量使用 !inportant 的代码是无法维护的。如果!important声明冲突，则比较优先权。
基本样式
标签大小
高度： height
宽度： width
最小宽度： min-width
字体文本
字体： font-famliy: "Microsoft Yahei", "微软雅黑", "Arial"; 如果系统不支持第一个字体，会尝试下一个。
文本大小： font-size：20px / 50% / 1rem；
字体粗细： font-weight 取值：normal(默认值)，bold粗体(700)，bolder(更粗)，lighter(更细)，设置具体值(100-900)
字体颜色： color 取值：①十六进制值：＃FF0000；②颜色名称：red；③RGB值：rgb(255,0,0)；④RGBA值：rgba(255,0,0,0.5)
水平对齐： text-align 取值：left(默认)，right，center，justify(两端对齐)
行高： line-height 可以调整水平居中：标签多高，这里就要设置多高
垂直对齐： vertical-align 设置元素的垂直对齐方式，只对行内元素有效。常用值：top，text-top，bottom，text-bottom，middle，像素值，百分比。
文字装饰： text-decoration 取值：none(默认)，underline(文本下划线)，overline(文本上划线)，line-through(穿过文本的一条线)
字体的风格：font-sytle 取值：normal，italic(斜体)，oblique(倾斜)
首行缩进： text-ident 取值：像素值，百分比。
字符间距： letter-spacing 取值：normal，像素值。
字间距： word-spacing 取值：normal，像素值。
控制文本大小写：text-transform 取值：none(默认)，capitalize(单词首字母大写)，uppercase(全部大写)，lowercase(全部小写)
文本阴影效果：text-shadow 取值：h(必需)水平阴影的位置，v(必需)垂直阴影的位置，blur模糊的距离，color阴影的颜色。例：text-shadow: 1px 3px 5px #FF0000;
换行： word-break 取值：normal(浏览器默认的换行规则)，break-all(允许在单词内换行)，keep-all(只能在半角空格或字符处换行)
word-wrap 取值：normal(浏览器默认的换行规则)，break-word(允许长单词或url地址内部换行)
浏览器默认换行规则：中文自动换行，英文数字以单词为最小单位(空格间隔)自动换行，如果一连串字符没有空格，浏览器认为它是一个单词不予换行。
关于RGB(A)色彩模式：rgba(red,green,blue,alpha) ，其中alpha取值0~1，表示透明度。red，green，blue三个参数取值0~255，也可用百分比。色彩模式与RGB相同（通过对红绿蓝三个颜色通道的变化和他们相互之间的叠加来得到各式各样的颜色。（0，0，0）表示黑色，（255，255，255）表示白色）
背景 background
background 分为以下几类：
background-color 背景颜色设置为红色 如：background-color:red;
background-image 设置背景图片 如：background-image::url("image/4.jpg");
background-size 设置背景图片的尺寸，有三类可选的值：宽高（px值或百分比，1或2个值）、cover、contain。如：background-size:10px 10px;
background-repeat 如果设置了背景图片，这个属性则可以设置重复平铺。默认是no-repeat不平铺。还可以设置repeat表示背景图片横向纵向都平铺。 repeat-x表示只在横向平铺，repeat-y表示只在纵向平铺。
background-position 设置背景图片的起始位置。如：background-position：center | right bottom | top center | left bottom | 10% 20% | 50px 60px 。
background-origin 规定background-position属性相对什么来定位。值：padding-box | border-box | content-box ，分别表示相对于内边距框定位、相对边框定位、相对内容框定位。
background-clip 规定背景的绘制区域，值：border-box | padding-box | content-box ，分别表示背景被剪裁到边框、内边距框，内容框。
background-scroll 规定背景图像是否固定或随页面滚动。 值：scroll(默认)随着滚动，fixed图像不会移动。
注意：如果将背景图片加在body上，要设置body的高度，否则无法撑起背景图片。
边框 border
样式：border: 宽度 样式 颜色 。样式中：dotted表示点线，dashed表示虚线，solid表示实线
如：border：2px dotted red;
可以拆分成：border-width :2px；border-style :dotted；border-color :red；
border-radius:50%
列表属性
针对ul，ol的设置，list-style 是一个简写属性，包括了list-style-type，list-style-position，list-style-image
list-style-type：设置列表项标记的类型。none(无标记)，disc(默认，实心圆)，circle(空心圆)，square(方块)，decimal(数字)......等等。
list-style-position：设置在何处放置列表项标记。inside(放在文本内)，outside(默认值，放在文本的左侧)
list-style-image：使用图像来替换列表项的标记。（请始终规定一个list-style-type属性以防图像不可用）URL(图像的路径)，none(默认，无图像)
display
可以将标签设为行内或块级属性。设置 inline 为行内，设置 block 为块级。
如果设置 inline-block 则同时具有：
inline的属性：默认自己有多少空间占多少空间
block的属性：可以设置高度，宽度，边距 （ 行内标签不能设置高度和宽度，而块级标签可以）
值为none，则隐藏标签，不显示也不占据页面空间。
※ inline-block的间隙
111
222
333
(1) 我们可以通过margin:-3px来解决，但是
1.我们布局肯定很多元素，不可能每个都添加margin负这样维护成本太大了
2.我们线上代码如果压缩，那么我们就不存在哪个4px的问题了，那么我们的margin负就回造成布局混乱！
(2)我们可以给几个标签加一个父级div，然后：
div{word-spacing: -5px;} 设置字间距
visibility
该属性可设置元素是否可见，与display：none不同的是，visibility：hidden会不可见，但占据页面空间。
值：visible 默认值，可见的。
hidden 隐藏
内边距和外边距（margin padding）
外边距 margin 用于控制元素与元素之间的距离。当margin值增加时，与父标签上左右距离增加，标签本身的大小被强制变化。但如果多带带设置某一边距时，标签大小不会变化（margin-top 上边距，margin-left 左边距，margin-right 右边距，margin-bottom 下边距。）
内边距 padding 用于控制内容与边框的距离。当padding值增加时，将会改变本身的大小（padding-top，padding-left，padding-right，padding-bottom是常用的方法）。
※ 重要：当指定一个标签的宽高度时，设置的只是内容区的大小。实际标签的大小，还要加上边距和边框。
margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下 右左
margin:10px; ---------------------上右下左
常用： margin: 0 auto; 表示与父标签上边距为0，左右居中。
下面的例子中的元素的总宽度为300px：
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
※ 思考：边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下，body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，解决方法：body{ margin:0; }
※ 思考：边界重叠（margin collapse）
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场。
兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值。
父子div：如果父标签没有设置内边距padding、边框border、文本内容inline content。子标签与父标签之间将不会体现外边距(即使设置)，字标签的margin将会一直向上找，直到找到某个标签有padding、border、inline content中的任何一个，将外边距体现在这里。
例子：
Title
解决方法：
父子div： 1.父标签设置透明边框 border:1px solid transparent;
2.父标签设置内边距 padding:1px;
3.在父标签内加文本内容
4.给父标签设置overflow:hidden
兄弟div：1.float浮动 2.display:inline-block
浮动 float
首先了解块级元素和行内元素在文档流中的排列方式
block块级元素：
block元素独占一行，每个块级元素会各自新起一行，默认块级元素宽度会填满父标签宽度。
block元素可以设置宽高、内外边距。
inline行内元素：
行内元素不会独占一行，多个行内元素会共同存在一行。
不能设置宽高，可以设置水平方向padding、margin，不能设置垂直方向padding、margin。
文档流，指的是元素排版布局过程中，元素会自动从左向右，从上到下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位
只有绝对定位position：absolute/fixed和浮动float才会脱离文档流。
部分无视和完全无视的区别？
需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
浮动的表现
定义：浮动的框可以向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的标准流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（float只对块级元素起作用）
注意 当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。
清除浮动 clear
语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
上面的定义非常容易理解，但是读者实际使用时可能会发现不是这么回事。 定义没有错，只不过它描述的太模糊，让我们不知所措。
案例：先写一个大方块背景灰色，里面有三个小方块
从左到右背景分别是红、绿、蓝。如果不浮动，三个方块分别占三行。现在给三个小方块都加上样式 float:left; 它们会依次从左到右排列，并且共占一行。
如果我现在想要使红色方块右边的方块清除掉，按照我们的想法就是给红色设置 clear:right; 然而却并没有任何效果。正确的用法是给绿色设置 clear:left;
所以一定要牢记：对于CSS的清除浮动规则，只能影响使用清除元素的本身，不能影响其它元素。
我们明白了如何用，那它的独特之处在哪里？如果现在有需求：要求绿色不浮动，它的上下都有标签要浮动，怎么实现呢？
如果直接删除绿色的float:left;代码，会发现，绿色被蓝色覆盖了。是因为块级标签一旦浮动，会脱离标准流，位于标准流的上层。解决办法是，在删除绿色的float代码后加上clear:left;即可。看上去三个方块一次纵向排列，好像没有设置什么属性，实际上红色和蓝色可以和其他标签浮动堆叠，绿色不可以。
还有一个场景非常实用：在刚才的示例基础上，把灰色块的高度设置删掉，界面上灰色会消失，此时的需求是：使父标签包裹住所有子标签。怎么做呢？ 只需要在父标签内最底部再写一个标签，样式设置 clear:both; 即可。
父标签紧紧包裹住字标签且不需要设置父标签高度（清除浮动）
清除浮动方式2（推荐）：
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以用它，是因为我们不必在html文件中写入大量无意义的空标签，又能清除浮动。 话说回来，第一种方式的代码不利于维护。 只要在需要清浮动的元素中添加 clearfix 类名就好了。
如：
清除浮动方式3：
overflow:hidden;
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。
位置 position
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1965.html
-
摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。
欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...
UCloud
评论0
收藏0
-
摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。
欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...
-
摘要：欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面不仅仅是代码作为现代应用，的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板。我们今天就来聊聊，拼装与渲染模板的那些事儿。一改俱改，一板两用。
欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog...
褰辩话
评论0
收藏0
-
摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。
前端开发者手册2019
Cody Lindley 编著 原文地址
本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。
下载：PDF ...
church
评论0
收藏0
-
摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。
前端开发者手册2019
Cody Lindley 编著 原文地址
本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。
下载：PDF ...
-
摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。
前端开发者手册2019
Cody Lindley 编著 原文地址
本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。
下载：PDF ...
邹立鹏
评论0
收藏0
男|高级讲师
-
阅读 716·2023-04-25 19:43
-
阅读 3912·2021-11-30 14:52
-
阅读 3788·2021-11-30 14:52
-
阅读 3856·2021-11-29 11:00
-
阅读 3786·2021-11-29 11:00
-
阅读 3872·2021-11-29 11:00
-
阅读 3560·2021-11-29 11:00
-
阅读 6111·2021-11-29 11:00
<
