（根据项目回答） 请解释一下 CSS3 的 Flex box（弹性盒布局模型），以及适用场景？ 用纯 CSS 创建一个三角形的原理是什么？ 一个满屏品字布局如何设计?...width:auto 和 width:100%的区别 绝对定位元素与非绝对定位元素的百分比计算的区别 简单介绍使用图片 base64 编码的优点和缺点。...浏览器是怎样解析 CSS 选择器的？ 在网页中应该使用奇数还是偶数的字体？为什么呢？ margin 和 padding 分别适合什么场景使用？ 抽离样式模块怎么写，说出思路，有无实践经验？...如何让去除 inline-block 元素间间距？ 有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。...隐藏元素的 background-image 到底加不加载？ 如何实现单行／多行文本溢出的省略（…）？ 常见的元素隐藏方式？ css 实现上下固定中间自适应布局？ css 两栏布局的实现？
元素选择符：1 class选择符：10 id选择符：100 元素标签：1000 !important声明的样式优先级最高，如果冲突再进行计算。 如果优先级相同，则选择最后出现的样式。...p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child...浮动带来的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...解决办法：给橙色块添加overflow: hidden（生成了一个BFC）。浮动元素父元素还存在高度塌陷问题，解决方法：父元素生成一个BFC。 absolute布局的有点是简单直接，兼容性好。...缺点是它是对TABLE标签的不正规使用，一直以来被大家所诟病。当需要内容高度不一致时并不适应。 grid布局优点，是第一个基于二维方向的布局模块。它是第一个基于网格的原生布局系统。
2.3.5 保证after伪元素清浮动的方法在reset当中 3 移动端与PC端的特殊性 3.1 移动端 3.1.1 全新的选择器以及大部分的CSS3属性都得到了很好的支持 3.1.2 视口的设置...，对新标签的兼容处理 3.2.2 需要测试各个浏览器（HTML5学堂提示：保证在IE6~7的低端浏览器中，布局与功能正常） 3.2.3 对于子代选择器、CSS3新增选择器等能否使用取决于具体开发兼容要求...值 6.4 数据图需要限制宽高 6.5 背景图需要进行合并 6.6 对于需要超出隐藏的需求，单行文本隐藏或显示为省略号（……），比如在模块标题需要进行设置，多行文本如果显示区域高度固定，需要设置超出隐藏...6.7 img标签需要浮动或设置display:block，以防止img元素下的3像素空隙 6.8 a标签的指触区需要注意 6.9 合理使用群组和后代选择器 7 最后不可缺少的相关工作 7.1 CSS...主动思考很重要~ 最后想送亲爱的孩纸们~ 主动思考，总结积累，是你们未来前行的利器 —— 刘国利
2.伪类选择器 指定元素列表中第一个元素:first-child 语法：li:first-child{} 示例： li:first-child...css3巩固 结果：第一个li的文字变为红色 指定元素列表中最后一个元素:last-child 语法：li:last-child{} ...巩固 css3巩固 css3巩固 结果：最后一个元素内文字变为红色。...选择器用于选取指定选择器的首行 ：first-line 伪元素像文本的第一个字母添加特殊样式:first-letter 选择器匹配被用户选取的选择部分：：selection 示例： ...选择器匹配非指定元素/ 选择器的每个元素：not(selector) 示例： p{color: blue}
: none; } 而当导航hover时显示： .user:hover + .menu{ display: list-item; } 注意这里使用了一个相邻选择器，这也是上面说的为什么要写成相邻的元素...把hover的目标和隐藏的对象当作同一个父容器的子元素，然后hover写在这个父容器上面就可以了，不用像上面那样，隐藏元素也要写个hover： .marker-container .detail-info...但是这样需要自己去写逻辑控制，例如radio只能选一个的功能，另一个是没有办法使用change事件。就是没有用原生的方便。...这个主要是借助了CSS3提供的一个伪类:checkd，只要radio/checkbox是选中状态，这个伪类就会生效，因此可以利用选中和非选中的这两种状态，去切换不同的样式。...li的第一个元素，并且它是倒数第二个元素，第6行的意思是选择前面有是第一个且是倒数第二个li的所有li，第一行是选择了第一个，第二行选择除第一个外的其它所有元素。
+ .menu{ display: list-item; } 注意这里使用了一个相邻选择器，这也是上面说的为什么要写成相邻的元素。...第二种场景，使用子元素，这个更简单。...把hover的目标和隐藏的对象当作同一个父容器的子元素，然后hover写在这个父容器上面就可以了，不用像上面那样，隐藏元素也要写个hover： .marker-container .detail-info...但是这样需要自己去写逻辑控制，例如radio只能选一个的功能，另一个是没有办法使用change事件。就是没有用原生的方便。...li的第一个元素，并且它是倒数第二个元素，第6行的意思是选择前面有是第一个且是倒数第二个li的所有li，第一行是选择了第一个，第二行选择除第一个外的其它所有元素。
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 p:last-of-type 选择属于其父元素的最后 元素的每个 元素。...absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。...有什么解决办法？...:only-of-type ::selection 选择被用户选取的元素部分 :first-line 选择元素中的第一行 :first-letter 选择元素中的第一个字符 请列举几种隐藏元素的方法...visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在 opacity: 0; CSS3属性，设置0可以使一个元素完全透明 position
， :lang() 选择带有lang属性元素 :not() CSS3排除某类元素 :root CSS3选择根元素 :first-child 第一个元素 :last-child CSS3最后一个子元素 :...only-child CSS3仅有的一个子元素 :last-of-type 最后一个指定选择器的子元素 :nth-child() CSS3第n个子元素 :nth-last-child() CSS3倒数第...n个子元素 :first-of-type CSS3第一个同级兄弟元素 :last-of-type CSS3最后一个同级兄弟元素 :only-of-type CSS3唯一的一个同级兄弟元素 :nth-of-type...只读状态的元素 :read-write CSS3能编辑的元素 :optional CSS3选择非必填元素 :required CSS3选择必填元素 :in-range CSS3选择有限定范围的元素 :indeterminate...:last-child的匹配规则 查找 el 选择器匹配元素的所有同级元素（siblings） 在同级元素中查找最后一个元素 检验最后一个元素是否与选择器 el 匹配 匹配指定类型的最后一个元素，last-of-type
CSS3 选择器——属性选择器 CSS3 选择器——伪类选择器 css选择器支持一览表 CSS选择器查阅 伪元素（::before, ::after） 我会告诉你，下面的retina 1px大多数都是采用伪元素来生成的...伪元素 伪元素的content使用 百分比 据说百分之八十的人入门移动端重构的第一个问题就会问：是不是所有的当要用百分比单位啊。...接上第一个问题，第二个问题是：那是不是要用rem？...首先css3的transform等给我们带来了fixed的相对定位问题，其次虚拟键盘的弹出也给fixed制造出各种bug（有的虚拟键盘会改变窗口大小，而有些非默认的虚拟键盘则是以弹层的形式覆盖在上面的，...给图片提供一个容器，设置高度为0，根据宽度按照图片的比例使用paddin-top得到一个高度值，然后图片绝对定位设置宽高为100%即可，如图片尺寸为200*100（则高度为宽度的二分之一）： .img-wrap
p:first-of-type 选择该p元素是其父元素的首个 元素； p:last-of-type 选择该p元素是其父元素的最后 元素； p:only-of-type 选择该p元素是其父元素唯一的...，不是单独p元素排序)；p:nth-child(odd) 匹配所以奇数行;p:nth-child(even) 匹配所有偶数行，元素的第一个子元素索引为“1”。...（2）与浮动元素同级的非浮动元素会跟随其后。 （3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。 清除浮动的方式： 1）使用空标签清除浮动。...目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？ 可以通过css3里面的动画属性scale进行缩放。 18、使用 CSS 预处理器吗？喜欢那个？...关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）； 如果规定拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。
说说隐藏元素的方式有哪些？ 1.display: none;：将元素完全从页面中隐藏。它不会保留空间，且无法通过页面布局获取该元素。...6.clip-path: inset(100%);：使用 clip-path 属性将元素裁剪为不可见。设置为 inset(100%) 可以将整个元素隐藏。...8.使用负的外边距或内边距：通过将外边距或内边距设置为负值，使元素超出父容器边界并隐藏起来。 说说你对页面中使用定位(position)的理解？...b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。...第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。 (4)、fixed 固定定位，与absolute一致，但偏移定位是以窗口为参考。
元素选择符： 1 class选择符： 10 id选择符：100 元素标签：1000 !important声明的样式优先级最高，如果冲突再进行计算。 如果优先级相同，则选择最后出现的样式。...p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素 p:only-of-type 选择属于其父元素唯一的元素 p:only-child...无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断： 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个...浮动带来的问题： 父元素的高度无法被撑开，影响与父元素同级的元素 与浮动元素同级的非浮动元素（内联元素）会跟随其后 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。...解释一下这2个伪元素的作用 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。
在日常开发当中，如果想要开发多边形，一般都需要多个盒子或者伪元素的帮助，有没有一直办法能只使用一个盒子实现呢？...但是其实clip并不是CSS3的新属性，很早就开始出现了。CSS裁剪的这一概念最早是在CSS 2.1时代由clip属性引入，但该属性的限制非常多。裁剪初期只能应用于绝对定位的元素，并且只能裁剪成矩形。...而在CSS3中，提供了强大的clip-path属性，突破了clip属性的众多限制。clip-path能够让你指定一个网页元素的显示区域，而不是显示全部。...clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。...clip-path是一个css3新属性 , 一般用在svg元素上 , 但是也可以作为普通元素裁剪使用。
p:last-of-type 选择属于其父元素的最后 元素的每个 元素。 p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。...absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。...无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断： （1）若此元素为 inline 元素，则containing block 为能够包含这个元素生成的第一个和最后一个...目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？ 可以通过css3里面的动画属性scale进行缩放。 22、移动端的布局用过媒体查询吗？...包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。 CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。
举例： p:first-of-type 选择属于其父元素的首个 元素的每个 元素。 p:last-of-type 选择属于其父元素的最后 元素的每个 元素。...absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。 fixed （老IE不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。...无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断： 1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个...有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。 png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？...因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。
领取专属 10元无门槛券
手把手带您无忧上云
