盒模型

/* 红色区域的大小是多少?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

  1. link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS
  2. link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载
  3. link无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持
  4. link支持使用Javascript控制DOM去改变样式;而@import不支持

BFC理解

BFC触发条件:

  1. 根元素,即html
  2. float的值不为none(默认)
  3. position的值为absolute或fixed
  4. overflow的值不为visible(默认)
  5. display的值为inline-block、table-cell、table-caption

BFC特性:

  1. 内部的Box会在垂直方向上一个接一个放置。
  2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. 每个元素的margin box 的左边,与包含块border box的左边相接触。
  4. BFC的区域不会与float box重叠。(可用于清浮动)
  5. BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
  6. 计算BFC的高度时,浮动元素也会参与计算。

2019前端面试系列——CSS面试题

2019前端面试系列——JS面试题

2019前端面试系列——JS高频手写代码题

2019前端面试系列——Vue面试题

2019前端面试系列——HTTP、浏览器面试题

2019前端面试系列——CSS面试题的更多相关文章

  1. 2019前端面试系列——JS面试题

    判断 js 类型的方式 1. typeof 可以判断出'string','number','boolean','undefined','symbol' 但判断 typeof(null) 时值为 'ob ...

  2. 2019前端面试系列——Vue面试题

    Vue 双向绑定原理        mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...

  3. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  4. 2019前端面试系列——HTTP、浏览器面试题

    浏览器存储的方式有哪些 特性 cookie localStorage sessionStorage indexedDB 数据生命周期 一般由服务器生成,可以设置过期时间 除非被清理,否则一直存在 页面 ...

  5. 前端Html和Css面试题

    前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...

  6. 前端面试之CSS权重问题!

    前端面试之CSS权重问题! 下面的权重按照从小到大来排列! 1.通用选择器(*) 2.元素(类型)选择器 权重1 3.类选择器 权重10 4.属性选择器 5.伪类 6.ID 选择器 权重100 7.内 ...

  7. 前端面试之CSS常用的选择器!

    前端面试之CSS常用的选择器! 标签选择器 <style> /* <!-- 标签选择器 :写上标签名 -->*/ p { color: green; } div { color ...

  8. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

  9. 前端基础系列——CSS规范(文章内容为转载)

    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...

随机推荐

  1. mysql查询出所有重复的记录

    假如我们有如下一张数据表(很简单,只是举例而已),表名为student.现在我们要取出其中重复记录.重复是以name相同为判定标准. ID name phone age 1 张三 10086 15 2 ...

  2. shell脚本exercise2

    通过文件里面的网址,判断是否访问成功网址 #!/bin/bash check(){ code=`curl -I -m -o /dev/null -s -w %{http_code} http://$u ...

  3. JavaScript新手经常遇到的问题(一)

    1.:before和:after,position: absolute;才可以调节高宽 2.判断背景颜色 2.1.$(this).css("background-color")== ...

  4. Leecode_137_singleNumberII

    参考: http://blog.csdn.net/jocyln9026/article/details/19397477

  5. 鲲鹏凌云,并行科技Paramon通过华为云鲲鹏云服务兼容性认证

    随着Cloud2.0时代到来,5G技术开始应用普及,超算云服务需求不断升级,业务多样性.数据多样性不断延伸.2019年7月,华为召开鲲鹏计算产业发展峰会,依托在联接领域坚实的基础,华为未来将着力打造智 ...

  6. 基于webpack实现多html页面开发框架一 准备工作

    本系列主要介绍如何基于webpack实现多html页面开发框架,这里不讲webpack的基本概念,废话不多说,直奔主题! 前置条件: 1.安装node环境,自己去官网下载安装 2.新建文件夹webpa ...

  7. request获取路径

    1.request.getRequestURL() 返回的是完整的url,包括Http协议,端口号,servlet名字和映射路径,但它不包含请求参数. 2.request.getRequestURI( ...

  8. 转:MySQL下载安装、配置与使用(win7x64)

    1 第一大步:下载. a.俗话说:“巧妇难为无米之炊”嘛!我这里用的是 ZIP Archive 版的,win7 64位的机器支持这个,所以我建议都用这个.因为这个简单嘛,而且还干净. 地址见图 拉倒最 ...

  9. use dict in bash

    declare -A animals=(["moo"]="cow" ["woof"]="dog") for sound ...

  10. luogu P1102 A-B 数对 |二分查找

    题目描述 出题是一件痛苦的事情! 题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的 A+B Problem,改用 A-B 了哈哈! 好吧,题目是这样的:给出一串数以及一个数字 C,要求计算出所有 A- ...