CSS常见面试题(持续更新)
文章目录
- div高度永远是宽度的一半
- 大小为父元素宽度一半的正方形
- 实现单行文字、多行文字的垂直居中
- 1.利用line-height和vertical-align
- 2.利用display:table-cell
- 3.利用flex布局align-items:center;
- CSS常见布局的几种实现方式
- Flex(弹性布局)实现五大常用布局
- html标签分类
- 闭合标签和空标签(闭合标签和空标签)
- 位置特性(块级元素,行内元素,行级块元素)
- 块级元素(block)
- 行级元素(inline)
- 行内块元素(inline-block)
- 元素之间的转化
- 浮动以及清除浮动
- 属性继承性
- 一、无继承性的属性
- 1、display:规定元素应该生成的框的类型
- 2、文本属性:
- 3、盒子模型的属性
- 4、背景属性
- 5、定位属性
- 6、生成内容属性
- 7、轮廓样式属性:
- 8、页面样式属性
- 9、声音样式属性
- 二、有继承性的属性
- 1、字体系列属性
- 2、文本系列属性
- 3、元素可见性:visibility
- 4、表格布局属性
- 5、列表布局属性
- 6、生成内容属性:quotes
- 7、光标属性:cursor
- 8、页面样式属性
- 9、声音样式属性
- 三、所有元素可以继承的属性
- 四、内联元素可以继承的属性
- 五、块级元素可以继承的属性
- CSS盒子模型
- W3C盒子模型(标准盒子模型)
- IE盒子模型(怪异盒模型)
- 盒模型相互转换(box-sizing)
- CSS中 a标签的4个伪类
- CSS实现单行文本、多行文本溢出显示省略号(…)
- 单行
- 多行
- CSS选择器
- 权重计算规则
- 选择器
- 优先级
- display:none和visibility:hidden两者的区别
- 渲染机制
div高度永远是宽度的一半
<h1>高度永远为宽度一半</h1>
<div class="height-half-width-wrap"><div class="outer"><div class="inner"><div class="box">hello</div></div></div>
</div>
.height-half-width-wrap .outer {width: 400px;height: 100%;background: blue;margin: 0 auto;display: flex;align-items: center;
}.height-half-width-wrap .inner {position: relative;width: 100%;height: 0;padding-bottom: 50%;background: red;
}.height-half-width-wrap .box {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;
}
- margin-top、margin-bottom、padding-top、padding-bottom的百分数值是相对于父元素内容区的宽度计算的。
- 将height设置为 0,这是为了将元素高度完全交给padding负责。
- 元素的height为 0,导致该元素里面再有子元素的时候,就无法正常设置高度。所以我们需要用到position: absolute。
- 据W3C文档,当子元素使用absolute定位时,宽高设定百分比的参考量是其第一个非static祖先元素的padding box宽高,即width/height + padding
大小为父元素宽度一半的正方形
<div class="half-square-wrap"><div class="outer"><div class="inner"></div></div>
</div>
.half-square-wrap .outer {width: 400px;height: 600px;background: red;
}.half-square-wrap .inner {width: 50%;padding-bottom: 50%;background: blue;
}
- padding-bottom的百分数值是相对于父元素内容区的宽度计算的
实现单行文字、多行文字的垂直居中
1.利用line-height和vertical-align
<div class="word-vertically-center1"><div><span>测试文字测试文字</span></div><div><span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span></div>
</div>
.word-vertically-center1 div {float: left;width: 200px;height: 200px;margin: 10px;border: 1px solid #000;line-height: 200px;
}.word-vertically-center1 span {display: inline-block;vertical-align: middle;line-height: 22px;
}
2.利用display:table-cell
<div class="word-vertically-center2"><div><span>测试文字测试文字</span></div><div><span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span></div>
</div>
.word-vertically-center2 div {display: table-cell;width: 200px;height:150px;border:1px solid blue;vertical-align: middle;
}
3.利用flex布局align-items:center;
<div class="word-vertically-center3"><div><span>测试文字测试文字</span></div><div><span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span></div>
</div>
.word-vertically-center3 div{float: left;width: 200px;height:150px;border: 1px solid #000;display: flex;align-items:center;
}
CSS常见布局的几种实现方式
- 两栏布局(左边固定右边自适应)
- 三栏布局(左右固定中间自适应)
- 流体布局(浮动)
- BFC三栏布局
- 双飞翼布局
- 圣杯布局
- flex
- table布局
- 绝对定位布局
- 网格布局(Grid布局)
具体文章见:https://blog.csdn.net/qq_39903567/article/details/114751532
Flex(弹性布局)实现五大常用布局
上中下布局、左侧定宽右侧自适应、顶部栏固定、左侧固定可滚动等
具体文章见:https://blog.csdn.net/qq_39903567/article/details/114754898
html标签分类
闭合标签和空标签(闭合标签和空标签)
HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签,其他少数为空标签,常见的空标签有
<input />、 <img />、 <area />、 <base />、 <link />等。
位置特性(块级元素,行内元素,行级块元素)
位置特性进行分类的,它将元素分为三类:块级元素,行内元素,行级块元素(也称块级行元素)。
块级元素(block)
**特点: **
- 可以设置宽高、内、外边距;
- 独占一行(即前后均有换行);
- 块级元素如果不设置宽度和高度,则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。
常见的块级元素:
div、p、h1、h2…hn,ol、ul、dl、li、form、table
行级元素(inline)
特点:
- 不可设置宽高、上下内、外边距。(左右内、外边距设置有效)
- 其宽度和高度由其内容自动填充。
- 其他行级元素共处一行 ;
常见的行级元素:
- a(锚点)
- b(加粗)
- i(斜体)
- span(常用内联容器,定义文本内区块)
- lable(input 元素定义标注(标记))
行内块元素(inline-block)
特点:
- 可以设置宽高、内外边距;
- 可以与其他行内元素、内联元素共处一行;
常见的内联元素:
input、img
元素之间的转化
可以在行内样式或css样式中改变元素的display将三种元素进行转换。
- display:block;(将元素变为块级元素)
- display:inline; (将元素变为行级元素)
- display:inline-block;(将元素变为行级块元素)
浮动以及清除浮动
浮动特征,清除浮动的方法:clear清除浮动、BFC清除浮动等。
具体文章见:https://blog.csdn.net/qq_39903567/article/details/114946607
属性继承性
一、无继承性的属性
1、display:规定元素应该生成的框的类型
2、文本属性:
vertical-align:垂直文本对齐
text-decoration:规定添加到文本的装饰
text-shadow:文本阴影效果
white-space:空白符的处理
unicode-bidi:设置文本的方向
3、盒子模型的属性
:width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left
4、背景属性
:background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位属性
:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成内容属性
:content、counter-reset、counter-increment
7、轮廓样式属性:
outline-style、outline-width、outline-color、outline
8、页面样式属性
:size、page-break-before、page-break-after
9、声音样式属性
:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
二、有继承性的属性
1、字体系列属性
font:组合字体
font-family:规定元素的字体系列
font-weight:设置字体的粗细
font-size:设置字体的尺寸
font-style:定义字体的风格
font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
font-stretch:对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust:为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
word-spacing:增加或减少单词间的空白(即字间隔)
letter-spacing:增加或减少字符间的空白(字符间距)
text-transform:控制文本大小写
direction:规定文本的书写方向
color:文本颜色
3、元素可见性:visibility
4、表格布局属性
:caption-side、border-collapse、border-spacing、empty-cells、table-layout
5、列表布局属性
:list-style-type、list-style-image、list-style-position、list-style
6、生成内容属性:quotes
7、光标属性:cursor
8、页面样式属性
:page、page-break-inside、windows、orphans
9、声音样式属性
:speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation
三、所有元素可以继承的属性
1、元素可见性:visibility
2、光标属性:cursor
四、内联元素可以继承的属性
1、字体系列属性
2、除text-indent、text-align之外的文本系列属性
五、块级元素可以继承的属性
1、text-indent、text-align
CSS盒子模型
W3C盒子模型(标准盒子模型)
在标准盒子模型的情况下,元素的内容占据的空间是由width属性设置的,而内容周围的padding和border值是另外计算的,即在标准模式下的盒模型,盒子实际内容(content)的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。
标准模式下总宽度=width+margin(左右)+padding(左右)border(左右)
IE盒子模型(怪异盒模型)
在怪异盒模型的情况下,浏览器的width属性不是内容的宽度,而是内容,内边距和边框的宽度的总和,即使在怪异模式下的盒模型,盒子的(content)宽度+内边距padding+边框border 宽度= 我们设置的width(height也是如此)。盒子总宽度/高度=width/height +margin = 内容区宽度/高度+padding+border+margin.
怪异模式下总宽度=width+margin(左右)(就是说width已经包含了padding和border值)
盒模型相互转换(box-sizing)
在css3中新增了box-sizing属性
box-sizing : content-box || border-box || inherit;
当为content-box时,将采取标准模式进行解析计算
当为border-box时,将采取怪异模式解析计算
CSS中 a标签的4个伪类
有时候在浏览一些网站时会发现,当你把鼠标放在链接上时,它的颜色就会变,这就是用了css控制了它的四种状态,
大家都知道a标签可以用来实现超链接,
- 第一种状态: link (默认)正常状态(初始状态,不用鼠标去触碰)
- 第二种状态: hover 鼠标放上去的时候(但不点击)
- 第三种状态: active 点击的时候(鼠标还没放开)
- 第四种状态: visited 点击之后()
使用时注意:
- active 一般不必写
- 四种状态控制一定要按照 LVHA 的顺序写
- link 可以省略
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>css 伪类</title><meta http-equiv="Content-Type" content="text/html; charset= utf8" /><style>a:link{color: black;}a:visited{color:blue;}a:hover{color: orange;}a:active{color: pink;}</style></head><body><a href="http://www.baidu.com/">ffff</a></body></html>
CSS实现单行文本、多行文本溢出显示省略号(…)
<div class="word-long"><div class="one-line"><span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span></div><div class="lines"><span>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字1 <br /></span></div>
</div>
单行
如果实现单行文本的溢出显示省略号用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。
实现方法:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行
实现方法:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
-webkit-line-clamp CSS 属性 可以把 块容器 中的内容限制为指定的行数.
CSS选择器
1、ID #id
2、class .class
3、标签 p
4、通用 *
5、属性 [type=“text”]
6、伪类 :hover
7、伪元素 ::first-line
8、子选择器、相邻选择器
权重计算规则
特等: !important
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为0100。
第三等:代表类,伪类和属性选择器,如.content,权值为0010。
第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- .father>son (直接后代)
- .brother1+brother2(紧跟后面的兄弟)
- 继承的样式没有权值。
选择器
- * 选择所有元素
- p 选择所有 <p> 元素。
- div,p 选择所有 <div> 元素和所有 <p> 元素。
- div p 选择 <div> 元素内部的所有 <p> 元素。
- div>p 选择父元素为 <div> 元素的所有 <p> 元素。
- div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
优先级
常用选择器权重优先级:!important > id > class > tag
!important可以提升样式优先级,但不建议使用。如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被应用上!important。 例如:background: blue !important;
如果两条样式都使用!important,则权重值高的优先级更高
在css样式表中,同一个CSS样式你写了两次,后面的会覆盖前面的
样式指向同一元素,权重规则生效,权重大的被应用
样式指向同一元素,权重规则生效,权重相同时,就近原则生效(就近指的是标签之间),后面定义的被应用
样式不指向同一元素时,权重规则失效,就近原则生效,离目标元素最近的样式被应用
!important > 行内样式 > 内联样式 and 外联样式(内联样式和外联样式的优先级和加载顺序有关)
display:none和visibility:hidden两者的区别
display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。
其他隐藏操作:
background: transparent;//设置为透明
css3中
opacity:0;//设置不透明度为0,透明
渲染机制
1、HTML的加载
HTML是一个网页的基础,下载完成后解析
2、其他静态资源加载
解析HTML时,发现其中有其他外部资源链接比如CSS、JS、图片等,会立即启用别的线程下载。
但当外部资源是JS时,HTML的解析会停下来,等JS下载完执行结束后才继续解析HTML,防止JS修改已经完成的解析结果
3、DOM树构建
在HTML解析的同时,解析器会把解析完成的结果转换成DOM对象,再进一步构建DOM树
4、CSSOM树构建
CSS下载完之后对CSS进行解析,解析成CSS对象,然后把CSS对象组装起来,构建CSSOM树
5、渲染树构建
当DOM树和CSSOM树都构建完之后,浏览器根据这两个树构建一棵渲染树
6、布局计算
渲染树构建完成以后,浏览器计算所有元素大小和绝对位置
7、渲染
布局计算完成后,浏览器在页面渲染元素。经过渲染引擎处理后,整个页面就显示出来
构建DOM树->构建渲染树->布局渲染树:计算盒模型位置和大小->绘制渲染树
后续将持续更新…
本文链接:https://blog.csdn.net/qq_39903567/article/details/114951168
CSS常见面试题(持续更新)相关推荐
- HTML/CSS常见面试题
HTML/CSS常见面试题 一.HTML篇 1.1.c/s架构和b/s架构分别是什么,有什么优缺点 BS:(Browser/Server,浏览器/服务器模式),web应用 可以实现跨平台,客户端零维护 ...
- 分享 :CSS常见面试题
CSS基础 2.1 link和@import都可以为页面引入CSS文件,其区别是? 将样式定义在单独的.css的文件里,link和@import都可以在html页面引入css文件.有link和@imp ...
- css使两个盒子并列_CSS常见面试题
阅读本文约需要9分钟 大家好,我是小蔡,接下来开始今天的技术分享!上段时间跟大家分享了Vue 之响应式系统的知识,今天跟大家分享下CSS常见面试题的知识. 1 介绍一下标准的CSS的盒子模型?与低版本 ...
- 对于一个html元素,有几种方法修改样式方法的优先级,HTMLCSS常见面试题及疑难解答...
HTML&CSS常见面试题及疑难解答 HTML篇 对web标准以及W3C的理解与认识? WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现( ...
- HTMLCSS常见面试题
HTML和CSS常见面试题 src 和 href 的区别 src表示引用资源,表示替换当前元素,用在 img.srcipt.iframe上,src是页面内容不可或缺少的一部分. href表示超文本引用 ...
- 面试1:Java、微服务、架构常见面试题(持续更新中)
Java.微服务.架构常见面试题(持续更新中) 文章目录 Java.微服务.架构常见面试题(持续更新中) ==**Java**== 1.Java概述 (1)JVM.JRE和JDK (2)Java特点 ...
- 「高级java工程师」常见面试题及其答案(持续更新)
「java工程师」常见面试题及其答案请见: 「java工程师」常见面试题及其答案(持续更新)_好人老李的博客-CSDN博客 目录 java基础 常用的 jvm 调优方法? OOM的常见场景及其原因.解 ...
- 「java工程师」常见面试题及其答案(持续更新)
「高级java工程师」常见面试题及其答案: 「高级java工程师」常见面试题及其答案(持续更新)_好人老李的博客-CSDN博客 目录 java基础 面向对象与面向过程的区别? JRE.JDK.JVM的 ...
- 2021年JAVA 精心整理的常见面试题-附详细答案【持续更新~~】
先罗列本篇文章包含的Java 常见面试的主题: 一.Java基础面试题 二.Java 集合框架 三.Linux常用指令 四.MySQL基础面试 多线程与多进程面试 常见设计模式 JVM 底层 关注我们 ...
- Java常见面试题(持续更新)
文章目录 transient 关键字作用 final 关键字作用 封装的作用 HashMap,HashTable,ConcurrentHashMap HashMap不是线程安全的示例 HashMap常 ...
最新文章
- 2017年4月25日(日志库glog)
- 火狐不支持event.keyCode,用jquery中的event.which轻松解决。
- solr crud_Spring Data Solr教程:CRUD(差不多)
- visual studio 使用快捷方法2
- 苹果终端date命令_苹果M1 Mac电脑关闭SIP方法
- python字体大小颜色_在matplotlib中使用单词作为标记的“干净”方式?使字体大小和颜色不同?...
- 致我唯一的kiyoumi
- QtCreator 编译时提示 warning C4819 的解决办法
- 声音采集播放以及I2S接口
- Ubuntu18.04安装HP laser 1020打印机
- centOs安装 ruby环境
- java 音频 网络传输_如何流式传输音频?
- 1-7 Burpsuite 爬虫介绍
- 【经典面试题】小程序与H5、APP、公众号的区别到底是什么?
- 云呐|医院医疗的IT设备信息化资产盘点管理系统
- 函数渐近界与算法性能分析
- 硬件堡垒机、软件堡垒机、云堡垒机品牌怎么选?
- 求助 MOR-Tales of seafaring
- RK3568平台开发系列讲解(安卓篇)理解Android系统的编译
- winbox 菜单介绍
热门文章
- NOD 32 企业版远程管理服务器病毒库更新失败_七夕小子_新浪博客
- 基于STM32CUBEMX的淘晶驰串口屏通讯入门
- CAD 残留文件和注册表如何完全彻底卸载删除干净【转载】
- 储能系统双向DCDC变换器蓄电池充放电仿真模型有buck模式和boost模式,依靠蓄电池充放电维持直流母线电压平衡
- FishC《零基础学习python》笔记-- 第014讲、15讲、16讲:字符串:各种奇葩的内置方法、格式化;序列
- 联想微型计算机扬天s711怎么拆,如何优雅的拆掉一体机电脑 Lenovo 联想 扬天S5250...
- PC微信防撤回多开补丁 v0.6
- 常用UCI数据集(已处理)
- 产业互联网周报:博通610亿美元收购VMware;阿里云财报13年来首次年度盈利;华为:对所有供应商提出碳减排要求...
- java工程师英文简历_java软件工程师英文简历模板