您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS 常见题汇总分享

时间：12-14来源：作者：点击数：

1.盒模型

1.ie 盒模型算上 border、padding 及自身（不算 margin），标准的只算上自身窗体的大小 css 设置方法如下

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

2.margin、border、padding、content 由外到里 3.几种获得宽高的方式

dom.style.width/height：这种方式只能取到 dom 元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的 CSS 文件中设置的话，通过这种方法是获取不到dom的宽高的。
dom.currentStyle.width/height：这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。
window.getComputedStyle(dom).width/height：这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。
dom.getBoundingClientRect().width/height：这种方式是根据元素在视窗中的绝对位置来获取宽高的
dom.offsetWidth/offsetHeight：这个就没什么好说的了，最常用的，也是兼容最好的。

4.拓展各种获得宽高的方式

获取屏幕的高度和宽度（屏幕分辨率）：window.screen.height/width
获取屏幕工作区域的高度和宽度（去掉状态栏）：window.screen.availHeight/availWidth
网页全文的高度和宽度：document.body.scrollHeight/Width
滚动条卷上去的高度和向右卷的宽度：document.body.scrollTop/scrollLeft
网页可见区域的高度和宽度（不加边线）：document.body.clientHeight/clientWidth
网页可见区域的高度和宽度（加边线）：document.body.offsetHeight/offsetWidth

5.边距重叠解决方案（BFC）BFC原理

内部的box会在垂直方向，一个接一个的放置每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从做往右的格式化，否则相反）
box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发生重叠
bfc 的区域不会与浮动区域的box重叠
bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面的也不会影响外面的
计算 bfc 高度的时候，浮动元素也会参与计算创建 bfc
float 属性不为 none（脱离文档流）
position 为 absolute 或 fixed
display 为 inline-block、table-cell、table-caption、flex、inine-flex
overflow 不为 visible
根元素 demo

<section class="top">
	<h1>上</h1>
	这块margin-bottom:30px;
</section>
<!-- 给下面这个块添加一个父元素，在父元素上创建bfc -->
<div>
	<section class="bottom">
	<h1>下</h1>
	这块margin-top:50px;
	</section>
</div>

css reset 和 normalize.css 有什么区别

两者都是通过重置样式，保持浏览器样式的一致性
前者几乎为所有标签添加了样式，后者保持了许多浏览器样式，保持尽可能的一致
后者修复了常见的桌面端和移动端浏览器的 bug：包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。
前者中含有大段的继承链
后者模块化，文档较前者来说丰富

居中方法

水平方向上

针对 inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素
.text_div{
	text-align:center;
}

不定宽块状元素居中
.text_div{
    margin:0 auto;//且需要设置父级宽度
}

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
.wrap{
    float:left;
    position:relative;
    left:50%;
    clear:both;
}
.wrap-center{
    left:-50%;
}

垂直居中

单行内联(inline-)元素垂直居中 
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{
    height: 120px;
    line-height: 120px;
}

利用表布局
.father {
    display: table;
}
.children {
    display: table-cell;
    vertical-align: middle;
     text-align: center; 
}

flex布局
.center-flex {
    display: flex;
    flex-direction: column;//上下排列
    justify-content: center;
}

绝对布局方式
已知高度
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}
未知高度
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

垂直水平居中根据上方结合

flex方式
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
grid方式
.parent {
  height: 140px;
  display: grid;
}
.child { 
  margin: auto;
}

css 优先级确定

每个选择器都有权值，权值越大越优先
继承的样式优先级低于自身指定样式
!important 优先级最高 js 也无法修改
权值相同时，靠近元素的样式优先级高顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）

bfc 内容见盒模型

如何清除浮动

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

clear清除浮动（添加空 div 法）在浮动元素下方添加空div,并给该元素写 css 样式： {clear:both;height:0;overflow:hidden;}
给浮动元素父级设置高度
父级同时浮动（需要给父级同级元素添加浮动）
父级设置成 inline-block，其 margin: 0 auto 居中方式失效
给父级添加 overflow:hidden 清除浮动方法
万能清除法 after 伪类清浮动（现在主流方法，推荐使用）

.float_div:after{
	content:".";
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
	visibility:hidden;
}
.float_div{
	zoom:1
}

自适应布局

思路：

左侧浮动或者绝对定位，然后右侧 margin 撑开
使用 div 包含，然后靠负 margin 形成 bfc
使用 flex

画三角形

#item {
	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;
}