css面试题
时间:2019-07-20
本文章向大家介绍css面试题,主要包括css面试题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
盒模型
/* 红色区域的大小是多少?200 - 20*2 - 20*2 = 120 */
.box {
width: 200px;
height: 200px;
padding: 20px;
margin: 20px;
background: red;
border: 20px solid black;
box-sizing: border-box;
}
/* 标准模型 */
box-sizing:content-box;
/*IE模型*/
box-sizing:border-box;
如何实现一个最大的正方形
用 padding-bottom
撑开边距
section {
width:100%;
padding-bottom: 100%;
background: #333;
}
一行水平居中,多行居左
<div><span>我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。我是多行文字。</span></div>
<div><span>我是一行文字</span></div>
<style>
div{text-align: center;}
div span{display: inline-block;text-align: left;}
</style>
水平垂直居中
贴上腾讯大佬的一篇文章:16种方式实现水平居中垂直居中
两栏布局,左边固定,右边自适应,左右不重叠
flex做自适应布局很容易,但兼容性不好,这里统一不用flex布局
.left{
float:left;
width:300px;
margin-right: 10px;
background: red;
}
.right{
overflow: hidden; /* 创建BFC */
background: yellow;
}
如何实现左右等高布局
table
布局兼容性最好,当然flex
布局的align-items: stretch;
也行
<div class="layout">
<div class="layout left">left</div>
<div class="layout right">center</div>
</div>
<style>
.layout{
display: table;
width: 100%;
}
.layout div{
display: table-cell;
}
.layout .left{
width: 50%;
height: 200px;
background: red;
}
.layout .right{
width: 50%;
background: yellow;
}
</style>
画三角形
.shape {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid blue;
background: white;
}
link @import导入css
- link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
- link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
- link无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持
- link支持使用Javascript控制DOM去改变样式;而@import不支持
BFC理解
BFC触发条件:
- 根元素,即html
- float的值不为none(默认)
- position的值为absolute或fixed
- overflow的值不为visible(默认)
- display的值为inline-block、table-cell、table-caption
BFC特性:
- 内部的Box会在垂直方向上一个接一个放置。
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box 的左边,与包含块border box的左边相接触。
- BFC的区域不会与float box重叠。(可用于清浮动)
- BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时,浮动元素也会参与计算。
持续更新...
原文地址:https://www.cnblogs.com/chenwenhao/p/11217590.html
- JavaScript Window - 浏览器对象模型
- 纯CSS实现的圆角折叠菜单特效代码
- MySQL和Oracle中的半连接测试总结(一)(r10笔记第31天)
- 【Go 语言社区】关于select和channel数组的配合使用--转
- Java基础-day09-代码题-对象;类;封装
- MySQL replace into的使用细则(r10笔记第48天)
- Win10下用Anaconda安装TensorFlow
- 【Go 语言社区】跨域问题解决方案:jsonP客户端和服务器代码
- 图;代码轻松理解,代理
- 巧用闪回数据库来查看历史数据 (r10笔记第47天)
- 【Go 语言社区】Golang内存分配
- 小白也能懂的手写体识别
- 【Go 语言社区】浅析javascript的间隔调用和延时调用
- 说说JSON和JSONP,也许你会豁然开朗-转
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- [干货]再见,Android JNI 封装
- Redis如何让你加到了附近的人
- JVM调优调的是什么?是寂寞吗?
- 如何做攻击溯源自动化
- Java多线程相关知识点扩展实例分析
- 巧用 Nsenter 调取宿主机工具调试容器内程序
- 如何在 Kubernetes 集群中集成 Kata
- Pytest实战
- Native 与 Weex 交互通用解决方案
- 20个MySQL运维案例,请查收!
- Unity3D中使用Joystick Pack实现摇杆控制
- Unity3D使用Timeline实现过场动画
- Oracle中ascii为0的陷阱
- VBA解析VBAProject 05——提取模块代码
- VBA解析VBAProject 06——清除VBA工程密码