CSS面试复习（二）：CSS的使用

一.CSS基础 1.选择器选择器{ 属性:值: 属性:值 } 作用:用于匹配HTML元素.分类和权重.解析方式和性能.值得关注的选择器分类: 元素选择器a{} 伪元素选择器::before{} 类选择器 .link{} 属性选择器[type=radio]{} 伪类选择器 :hover{} ID选择器#id{} 组合选择器 [type=checkbox]+labei{} 否定选择器 :not(.link){} 通用选择器*{} 权重: ID选择器 #id{} +100 类属性伪类 +10…

CSS面试复习（三）：预处理器、工程化方案、三大框架中的CSS

一.预处理器 1.介绍基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 6.less mixin 7.sass mixin 8.less extend 9.sass extend 10.less loop 11.sass loop 12.less import 13.sass import 14.预处理器框架二.工程化方案 1.PostCSS介绍 2.PostCSS插…

CSS面试复习（一）：HTML强化

1. HTML常见元素和理解 head类 meta:字符集.base:路径. a[href,target] img[src,alt] table td[colspan,rowspan] form[target,method,enctype] input[type,value] button[type] select>option[value] label[for] 和body类网页结构查看:http://h5o.github.io(拖拽到书签栏,在目的网页点击打开即起作用) 2.HTML版本…

CSS基础语法(二) CSS的9种选择器

样式表的选择器 1.类选择器根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器根据HTML标签的ID属性选择样式应用的元素 #id值{ … } 3.标签选择器根据HTML标签选择样式应用的属性标签名{ … } 4.子选择器 .food>li{ border:1px solid red; } 5.包含选择器 .first span{color:red;} 6.通用选择器 * {color:red;} 7.伪类选择器 1.静态伪类(只应用于超链接)…

web前端知识大纲：系列二 css篇

web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选择器.ID选择器.后代选择器.群组选择器.伪类选择器(before/after).兄弟选择器(+~).属性选择器等等. 2.CSS Reset HTML标签在不设置任何样式的情况下,也会有一个默认的CSS样式,而不同内核浏览器对于这个默认值的设置则不尽相同,这样可能会导致同一套代码在不同浏览器上的显…

HTML&CSS面试高频考点(二)

HTML&CSS面试高频考点(一) ♥ 6. W3C盒模型与怪异盒模型标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + border + padding) + margin,即真实大小. *参考标准模式与兼容模式的区别,兼容模式下为怪异盒模型. *注意box-sizing可以改变盒模型(box-sizing:border-box即为怪异盒模型). 7. 水平垂直居中的方法 (1)定宽居中 1. absolute + 负margin…

CSS面试细节整理（二）

5.css盒模型: CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框和外边距的方式…

总结CSS面试题目的考察点及常见布局问题整理

整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试”复习.牛逼的你,也许会说:万变不离其中,把css掌握了,哪里需要担心会考什么.呵呵! 1, 多元素水平居中实现一下效果: 平常人看见题目,最初感觉实现图片中的效果不难,设置小黑框的宽高边距,字体水平垂直居中即可.其实,题目应该实际上是考察多元素水平居中,即无论元素(小黑框)基数为多少,它们都能…

web前端面试试题总结---css篇

CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(margin). 边框(border): (3)区别: IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些?哪些属性可以继承? * 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选…

HTML和CSS的复习总结

HTML(Hypertext Markup Language)超文本标记语言:其核心就是各种标记!<html> HTML页面中的所有内容,都在该标签之内:它主要含<head>和<body>两部分.<head> 头部:它通常包含抬头<title>,基本信息<meta>(内容类型content,字符集charset)等.<body> 主体:它通常包含标题<hn>,排版<br><hr>,文字&…

CSS标签选择器(二)

一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标识. 只有匹配到具体的对象之后,浏览器才能根据CSS样式声明,决定渲染的效果,并及时呈现在页面中. 1.2.CSS选择类型标签选择器 ID选择器类选择器特殊选择器 1.3.CSS基本语法二.标签选择器 2.1标签选择器概述以文档对象类型的元素作为选择器,如p.div,span等. 最常用的…

二.css介绍

一.三种引入样式1.内嵌样式:写在html中 style标签里面2.行内样式:写在具体的标签的style属性3.引入外部样式表:可以将样式规则写在外部文件,再引入到html中 <link type="text/css" rel="stylesheet" href="../css/theme.css"> 二.样式选择器1.html选择器:该样式规则的名字和html标签一致,作用域当前网页中的该标签2.类选择器:每个标签都可以写一个cla…

css部分复习整理

CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔.当有多条声明时,中间可以英文分号“;”分隔,如下所示: p{font-size:12px;color:red;} 注意: 1.最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号. 2.为了…

前端面试整理(HTML&CSS)

1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他行内元素:其中img是行元素块级元素:总是在新行上开始,高度.行高及外边距和内边距都可控制,可以容纳内敛元素和其他元素:行元素转换为块级元素方式:display:block: 2.将多个元素设置为同一行?清除浮动有几种方式? 将多个元素设置为同一行:float,inline-block清除浮动的方式:方法一:添加新的…

Java秋招面试复习大纲(二)：Spring全家桶+MyBatis+MongDB+微服务

前言对于那些想面试高级 Java 岗位的同学来说,除了算法属于比较「天方夜谭」的题目外,剩下针对实际工作的题目就属于真正的本事了,热门技术的细节和难点成为了面试时主要考察的内容. 这里说「天方夜谭」并不是说算法没用,不切实际,而是想说算法平时其实很少用到,甚至面试官都对自己出的算法题一知半解.这里总结了 70 道 Spring 相关面试题,有的很基础,有的很细节,大家可以评估一下自己掌握的情况. 由于答案文字过多,这些资料都以整理成了PDF文档免费分享给大家,如果有需要获取到这个群里面的文档的…

基于webpack实现多html页面开发框架二 css打包、支持scss、文件分离

本节主要介绍webpack打包的时候CSS的处理方式一.解决什么问题 1.CSS打包 2.CSS处理浏览器兼容 3.SASS支持 4.CSS分离成单独的文件二.创建目录结构创建项目目录结构:参照上图创建即可三.需要安装的包 style-loader:将 JS 字符串生成为 style 节点: css-loader: 将 CSS 转化成 CommonJS 模块; 这两个合到一个命令:npm install --save-dev styl…

css进阶之二：flex弹性布局

布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度更高,可以让容器有能力改变子项目的宽高以及排序,以要求的方式填充可用空间,而且其方向有这不可预知性,使用非常灵活. 本文的最佳实践:twibo-vue 基础知识方向:主轴与交叉轴(侧轴) useragent沿着伸缩容器的主轴配置伸缩项目,从容器的主轴起点边开始往终点边结束.交叉轴的方向与主轴垂直.…

HTML&CSS面试高频考点(三)

11. CSS隐藏元素的方式 /*占据空间,无法点击*/ visibility: hidden; position: relative; top: -999em; /* 不占据空间,无法点击 */ position: absolute; top: -999em; display: none; position: absolute; visibility: hidden; height: 0; overflow: hidden; /*可以点击*/ opacity: 0; filter:Alpha(…

2022 跳槽涨薪必不可少面试通关宝典 —— css 篇

生于忧患死于安乐!已经居家隔离 23 天了,解封以后估计就得找工作了,提前准备起来!需要的赶紧收藏起来一.谈谈你对 BFC 的理解及作用. BFC 是 Block Formatting Context 格式化上下文的缩写,就是页面上一个隔离的独立容器,容器内的子元素不会影响到外面的元素.有一个独立的块级渲染区域,该区域有一套渲染规则来约束盒子的布局,与外部的区域没有关系. 1.1.如何创建 BFC float 的值不为 none position 的值为 absolute 或 fixed o…

[css]我要用css画幅画(二)

接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是为了兴趣画画, 何必理会兼容性呢,是吧? html如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Css Pa…

CSS技巧（二）：CSS hack

什么是CSS hack CSS hack由于不同的浏览器,比如IE6,IE7,Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. CSS hack分类 hack主要分为CSS选择器hack.CSS属性hack.IE条件注释hack. CSS选择器hack:比如 IE6能识别*html .class{},IE7能识别…

CSS 简单了解(二)

我们第一天说了简单的HTML,第二天说了简单的CSS.那么今天.咱们就来说一说他们的结合如何使用吧! 首先说引用方式,和使用方法吧! 1.内部样式表.(放入<head>中) <head> <style> div{ 4 color:red: 5 } </style> <head> [提示]:红色区域是样式,和元素选择器 2.内联样式表(写在标签里的样式) <p style="color: red;"></p&g…

HTML+CSS基础课程二

1.border为系统加边框<style type="text/css"> table tr td,th{border:1px solid #000;} </style>2.<table summary="表格简介文本">给表格加上题目 <caption>标题文本</caption>3.<a href="目标网址" title="鼠标滑过显示的文本">链接…

html和css入门（二）

CSS基础什么是CSS 简单来说,层叠样式表(Cascading Style Sheet)是一种专门用来控制界面外观风格的文档. CSS发展历史 1996年 CSS 1.0 规范面世,其中加入了字体.样色等相关属性. 1998年 CSS 2.0 规范推出,这个版本的 CSS 也是最广为人知的一个版本. 2004年 CSS 2.1 规范推出,对 CSS 2.0 进行了一些小范围的修改,删除了一些浏览器支持不成熟的属性. 2010年 CSS 3.0 规范推出,将 CSS3 分成了不同的模块,例如盒…

任务五：零基础HTML及CSS编码（二）

面向人群: 零基础或初学者难度: 简单重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的方案,同样也可以帮助我们学到很多知…

复习HTML+CSS（9）

n CSS简介 CSS:Cascading Style Sheets 层叠样式表 CSS的主要目的:是给HTML标记添加各种各样的表现(格式.样式).比如:文字样式.背景.文本样式.链接样式. 提示:CSS是给HTML标记加的样式:JS是给HTML标记加的行为.HTML标记是最先出现的. HTML超文本标注语言:各种HTML标记. CSS层叠样式表:给HTML标记加的样式. JavaScript脚本程序:给HTML标记加的程序. n CSS语法格式一个CSS规则,有“选择器”和“格式声明语…

HTML5学习笔记之二CSS基础

一般来说,CSS都存储为一个文件.然后各个html page能够指定使用哪个CSS文件.这样这些html页面就能够保持一致的风格. 通常能够通过在head中加上一行指定CSS的链接. <!DOCTYPE html> <html> <head> <metacharset="utf-8" /> <title>MyPage</title> <link href="css/style.css" r…

html&css面试笔记

1.CSS选择器有哪些?它们的优先级是怎样的? 选择器类型: id选择器 ( # myid) 类选择器 (.myclassname) 标签选择器 (div, h1, p) 相邻选择器 (h1 + p) 子选择器 (ul > li) 后代选择器 (li a) 通配符选择器 ( * ) 属性选择器 (a[rel = "external"]) 伪类选择器 (a:hover, li:nth-child) 选择器优先级:就近原则,同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准…

2018.1.15复习_ css+js

[1]几个常见的css标签:--------------------------------------------------background-color; 设置背景颜色background-position:10px,-100px; 设置背景位置(背景位置起始值)background-image:url(./ 1.png); 设置背景图片backgroung-attachment:scroll; 背景跟着页面向下滚动background-attachment:fixed; 背景固定bac…

CSS学习（二）：背景图片如何定位？

我们都知道background-position属性用来指定背景图片应该出现的位置,可以使用关键字.绝对值和相对值进行指定.在CSS Sprites中,这个属性使用比较频繁,使用过程中,我常混淆,经常切不到自己想要的效果,于是决定好好理解其工作机制,这篇文章就是介绍background-position属性是如何指定背景图片和背景区域的位置关系. 注意:segmentfault对CodePen嵌入支持度不是很好,为使文章整洁,我将嵌入代码全部删除,完整体验请猛戳此处! background-po…

【CSS面试复习（二）：CSS的使用】的更多相关文章